Generative-UI-MCP

Overview

Generative-UI-MCP is a TypeScript-based MCP server that enables AI models to create interactive visualizations such as charts, diagrams, mockups, and more. Instead of including design rules in every system prompt, this server provides structured design guidelines that models can load on demand. It includes modules for interactive elements, charts, mockups, art, and diagrams. The server implements a resource-efficient approach with a compact system prompt (~300 tokens) and detailed specifications loaded only when needed.

Try asking AI

After installing, here are 5 things you can ask your AI assistant:

• load_ui_guidelinesload_ui_guidelines(modules: string[])

  Load detailed design guidelines for generating visual widgets

  Try:Load chart module guidelinesTry:Show me guidelines for creating interactive visualizationsTry:I need design specs for flowcharts and diagrams

Comparable tools

Installation

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

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

FAQ

How does this server save tokens compared to including design rules in system prompts?

Instead of ~650+ tokens for full guidelines, the system prompt is only ~300 tokens. Detailed specs are loaded on-demand only when the model needs to generate a visualization.

What visualization types does this MCP server support?

The server supports five modules: interactive (HTML controls, forms), chart (Chart.js patterns), mockup (UI layouts), art (SVG illustrations), and diagram (flowcharts, timelines).

Compare Generative-UI-MCP with