Skip to main content
Glama
op7418

Generative UI MCP

by op7418
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Remote

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.

What it does

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

Related MCP server: mcpsystem.design MCP Server

Quick start

Auto-install via AI

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 Code

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

Claude Desktop

Add to your claude_desktop_config.json:

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

Cursor / Windsurf

Add to your MCP settings (.cursor/mcp.json or equivalent):

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

Tool

load_ui_guidelines

Load detailed design guidelines for generating visual widgets.

Parameters:

Name

Type

Description

modules

string[]

Modules to load: interactive, chart, mockup, art, diagram

Example call:

{
  "name": "load_ui_guidelines",
  "arguments": {
    "modules": ["chart", "diagram"]
  }
}

Shared sections (like Core Design System and Color Palette) are automatically deduplicated when loading multiple modules.

Resource

generative-ui://system-prompt

A compact system prompt snippet (~300 tokens) with all hard constraints needed for valid widget output. Hosts can inject this into their system prompt so the model can generate basic widgets even without calling the tool.

Contains: output format, JSON escaping rules, streaming order, CDN allowlist, SVG setup, size limits, and interaction patterns.

How it works

┌─────────────┐    system prompt     ┌─────────────┐
│   AI Host   │ ◄── injects ──────── │  Resource:   │
│ (Claude,    │     ~300 tokens      │ system-prompt│
│  Cursor,    │                      └─────────────┘
│  etc.)      │
│             │    tool call          ┌─────────────┐
│   Model ────│──► load_ui_          │  Guidelines  │
│             │    guidelines         │  Modules     │
│             │ ◄── returns ──────── │  (on demand) │
│             │    detailed specs     └─────────────┘
└─────────────┘

Token savings: The system prompt is ~300 tokens vs ~650+ tokens for full guidelines. Detailed specs are only loaded when the model actually needs to generate a visualization. Most conversations don't involve widgets, so this saves tokens on every request.

Development

npm install
npm run build
npm start

License

MIT

Available Tools

1 tool
load_ui_guidelinesA

Load detailed design guidelines for generating visual widgets. Call this before generating your first widget in a conversation. Available modules: interactive, chart, mockup, art, diagram.

ParametersJSON Schema
NameRequiredDescriptionDefault
modulesYesWhich guideline modules to load. interactive = HTML controls/forms, chart = Chart.js, mockup = UI mockups, art = SVG illustrations, diagram = flowcharts/timelines/hierarchies.

TDQS

A3.7/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It mentions that the tool loads guidelines, implying a read-only operation, but doesn't disclose behavioral traits like whether it caches data, requires authentication, has rate limits, or what happens on repeated calls. The description adds some context (prerequisite timing) but lacks comprehensive behavioral details for a tool with no annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is concise and well-structured: two sentences that efficiently convey purpose, usage timing, and available modules. Every sentence adds value without redundancy, making it easy to scan and understand quickly.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's moderate complexity (1 parameter, no output schema, no annotations), the description is somewhat complete but has gaps. It covers purpose and usage timing but lacks details on output format, error handling, or behavioral traits. Without annotations or output schema, more context would be helpful for an agent to use it effectively.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema description coverage is 100%, with the 'modules' parameter fully documented in the schema (including enum values and descriptions). The description adds minimal value beyond the schema by listing the available modules, but doesn't provide additional semantics like usage examples or constraints. This meets the baseline for high schema coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: 'Load detailed design guidelines for generating visual widgets.' It specifies the verb ('Load') and resource ('detailed design guidelines'), and mentions the target use case ('generating visual widgets'). However, since there are no sibling tools, it doesn't need to differentiate from alternatives, so it doesn't reach the highest score.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides clear usage guidance: 'Call this before generating your first widget in a conversation.' This indicates when to use the tool (as a prerequisite step). It also lists available modules, which helps users understand scope. However, it doesn't explicitly state when not to use it or compare to alternatives, and with no sibling tools, this is less critical.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A3.6/5.0
Disambiguation5/5

With only one tool, there is no possibility of ambiguity or overlap between tools. The single tool has a clear, distinct purpose of loading design guidelines for UI generation.

Naming Consistency5/5

The single tool name follows a clear verb_noun pattern (load_ui_guidelines), and with only one tool, consistency is inherently perfect as there are no other names to compare against.

Tool Count2/5

One tool is too few for a server named 'Generative UI MCP', which suggests a broader scope of generating visual widgets. The tool only loads guidelines, lacking actual generation, editing, or management tools, making the set feel incomplete and thin for the implied purpose.

Completeness1/5

The server is severely incomplete for generative UI tasks. It only provides guidelines loading, with no tools for creating, updating, deleting, or rendering widgets, leaving significant gaps that will cause agent failures in generating visual content.

Maintenance

ActivityInactive
ResponsivenessSyncing

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

  • Visa Design System MCP Server

    MarySuneela
    F
    license
    B
    quality
    D
    maintenance
    Provides AI tools with access to Visa's Product Design System resources, including design tokens, component specifications, and usage guidelines.
    11

  • Design Style MCP Server

    luminarylane
    A
    license
    A
    quality
    A
    maintenance
    Provides deterministic design style recommendations and structured tokens for AI content generation, with 30 curated styles including color palettes, typography, and visual directives.
    2
    168
    MIT

  • web-stylebook-mcp

    seungdori
    A
    license
    A
    quality
    B
    maintenance
    Provides deterministic, read-only design knowledge for AI coding agents to help them choose visual directions, plan UI states, and compose design tokens, all without network access.
    6
    29
    4
    MIT

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/op7418/Generative-UI-MCP'

If you have feedback or need assistance with the MCP directory API, please join our Discord server