Generative-UI-MCP

An MCP server that teaches AI models to generate interactive visualizations — charts, diagrams, mockups, and more.

> Inspired by Anthropic's Artifacts and Vercel's Generative UI. This server provides structured design guidelines so AI models produce consistent, streaming-safe, visually polished widgets.

Instead of stuffing thousands of tokens of design rules into every system prompt, this MCP server lets the model load guidelines on demand — only when it actually needs to generate a visualization.

| Module | What it covers | |--------|---------------| | interactive | HTML controls, forms, sliders, calculators | | chart | Chart.js patterns, canvas setup, interactive data controls | | mockup | UI mockup layouts, component patterns | | art | SVG illustrations, artistic visualizations | | diagram | Flowcharts, timelines, hierarchies, cycle diagrams, matrices |

The model calls load_ui_guidelines with the modules it needs, and gets back comprehensive design specs including:

• Core design system (philosophy, streaming rules, CSS variables)
• Color palette (6 ramps with semantic usage rules)
• Component patterns and code templates
• SVG setup guides with arrow markers and viewBox calculations
• 8 diagram types with layout rules and code examples

Copy and paste the following prompt into your AI assistant (Claude Code, Cursor, etc.) to install automatically:

> Install the generative-ui-mcp MCP server. Run npx generative-ui-mcp as a stdio MCP server. The server name should be "generative-ui".

claude mcp add generative-ui -- npx generative-ui-mcp

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "generative-ui": {
      "command": "npx",
      "args": ["generative-ui-mcp"]
    }
  }
}