DAUB MCP Server Lets Claude Generate and Render UIs via JSON Specs

DAUB is an MCP server built specifically for Claude that bypasses the traditional UI development workflow where Claude generates code (like JSX/HTML) that developers then copy, paste, compile, and debug. Instead, Claude can directly generate and render full user interfaces.

How It Works

When using Claude with DAUB, the workflow is:

• Claude calls generate_ui("I need a dashboard with a spending chart, filters, and a data table")
• DAUB's MCP server generates a structured JSON specification
• DAUB renders this spec as a live interface immediately—no compilation or copy-paste required
• Claude can then call validate_spec or render_spec to iterate on the design across multiple conversation turns

MCP Server Tools

The MCP server, which runs on Cloudflare edge, exposes four specific tools:

• generate_ui: Converts natural language descriptions into rendered interfaces
• render_spec: Takes a JSON specification and returns a live render
• validate_spec: Allows Claude to check its own output before rendering
• get_component_catalog: Lets Claude browse 76 components across 34 categories to select appropriate UI elements

Technical Details

The JSON specification format is intentionally simple to ensure Claude can produce it reliably. It covers layout, typography, forms, tables, navigation, data display, and overlays. Claude can diff specs across turns and iterate without starting from scratch.

The rendering side requires only two CDN files: daub.css and daub.js. It includes 20 visual theme families and requires zero build step.

The entire project was built with Claude Code during development, with the specification format heavily iterated with Claude to ensure consistent generation without hallucinating component names.

Availability

DAUB is free to use. The GitHub repository is available at https://github.com/sliday/daub, and there's a playground at https://daub.dev/playground.html where you can try it without Claude. A roadmap is available at https://daub.dev/roadmap.