What is Generative UI MCP?
Generative UI MCP is a stdio MCP server that teaches AI models to produce interactive visualizations. A single tool, load_ui_guidelines, returns design specs for charts, diagrams, mockups, SVG art and interactive widgets on demand, so the rules stay out of the system prompt until needed.
The server supplies structured design guidelines so a model produces consistent, streaming safe, polished widgets. The README credits Anthropic's Artifacts and Vercel's Generative UI as inspiration for the approach.
Instead of putting thousands of tokens of rules into every system prompt, the model loads guidelines only when a visualization is actually needed. Most conversations never need them, which saves tokens on every other request.
The five modules
| Module | What it covers |
|---|---|
| interactive | HTML controls, forms, sliders and calculators |
| chart | Chart.js patterns, canvas setup and interactive data controls |
| mockup | UI mockup layouts and component patterns |
| art | SVG illustrations and artistic visualizations |
| diagram | Flowcharts, timelines, hierarchies, cycle diagrams and matrices |
What the guidelines return
A call returns a core design system with streaming rules and CSS variables, a color palette of six ramps with usage rules, component patterns, SVG setup guides and eight diagram types. Shared sections are deduplicated across modules.
Who it suits
Best for
- Hosts that render model generated HTML, SVG or charts and want consistent output.
- Agents building dashboards, calculators or diagrams, Related: Frontend Design.
- Teams that want rules loaded on demand rather than pasted into prompts.
Not for
- Anyone expecting the server to render charts. It supplies guidelines, not output.
- Component installs. Related: Magic MCP.
- Design to code from Figma, since it never reads a design file.
Use it with UiChemy
Generative UI MCP shapes widgets and mockups inside an AI session. For a WordPress site, UiChemy's AI to WordPress imports an AI build and Composer edits it in Elementor or Gutenberg. Click Get Started on uichemy.com. See also Canvas Design.
Connect Generative UI MCP: Load Visualization Design Rules on Demand to your AI client
claude mcp add generative-ui -- npx generative-ui-mcpUse the one line install
In Claude Code run the command above. The README also gives a prompt that asks an assistant to install it as a stdio server named generative-ui.
Or edit a config file
For Claude Desktop add the JSON to
claude_desktop_config.json. For Cursor or Windsurf add the same block to your MCP settings, such as.cursor/mcp.json.Optionally inject the system prompt
A host can inject the
generative-ui://system-promptresource, about 300 tokens, so basic widgets work even without a tool call.Ask for a visualization
The model calls
load_ui_guidelineswith the modules it needs, for example chart and diagram, and builds the widget from the returned specs.
Client configuration
{
"mcpServers": {
"generative-ui": {
"command": "npx",
"args": ["generative-ui-mcp"]
}
}
}Endpoints and ports
generative-ui://system-promptCompact constraints snippet for hostsWhat you can do with it
- On demand guidelinesRules load only when the model needs to draw something, so ordinary chats pay no token cost.
- Five focused modulesInteractive, chart, mockup, art and diagram modules can be loaded one at a time or together.
- Deduplicated sectionsShared parts such as the core design system and color palette appear once when modules are combined.
- Diagram templatesEight diagram types come with layout rules and code examples, plus SVG setup guides.
- Compact system promptA resource of about 300 tokens carries the hard constraints for valid widget output.
- Streaming safe outputThe rules cover output format, JSON escaping, streaming order, CDN allowlist and size limits.
Tools it exposes
load_ui_guidelines
Loads detailed design guidelines for widgets. Takes a modules array of interactive, chart, mockup, art or diagram.
Frequently asked questions
What is Generative UI MCP?
It is an MCP server that teaches AI models to generate interactive visualizations such as charts, diagrams and mockups. It provides one tool that loads design guidelines on demand and one resource with a compact system prompt.
How do I install Generative UI MCP?
Run claude mcp add generative-ui -- npx generative-ui-mcp, or add a generative-ui entry that runs npx generative-ui-mcp to Claude Desktop, Cursor or Windsurf config. It runs as a stdio MCP server.
What does load_ui_guidelines do?
It takes a modules array and returns detailed design specs for the chosen modules, which are interactive, chart, mockup, art and diagram. Shared sections such as the core design system and color palette are deduplicated across the modules.
What is the system prompt resource?
The generative-ui://system-prompt resource is a compact snippet of about 300 tokens holding the hard constraints for valid widgets, including output format, JSON escaping, streaming order, CDN allowlist, SVG setup, size limits and interaction patterns.
Which AI coding agents can use it?
The README gives setup for Claude Code, Claude Desktop, Cursor and Windsurf. Each uses the same npx command and arguments, written in that client's own config format, and the server name in the README examples is generative-ui.
How does it save tokens?
The README says the system prompt snippet is about 300 tokens against roughly 650 or more for the full guidelines. Detailed specs load only when a visualization is requested, so conversations without widgets never pay for them.
What license does it use?
The repository metadata shows no detected license, so check the repository for current terms before using it in a product. The server is a guidelines provider and does not render charts or diagrams itself.