AIモデルを教えたMCPサーバーで、インタラクティブな視覚化、チャート、図形、モックアップなどを行います。

AnthropicのアーティファクトとVercelのジェネレーションUIに触発。 このサーバーは構造化された設計ガイドラインを提供しているため、AIモデルは、一貫性のあるストリーミング安全、視覚的に洗練されたウィジェットを生成します。

それが何をするか

設計ルールの何千ものトークンをすべてのシステムプロンプトに詰め込む代わりに、このMCPサーバーでは、実際に視覚化を生成する必要がある場合にのみ、モデルの**負荷ガイドラインを要求します。

| モジュール | カバーについて | お問い合わせ | [interactive | HTML制御、フォーム、スライダ、計算機 | | [chart | チャート.js パターン、キャンバス設定、インタラクティブなデータ制御 | | [mockup | UIモックアップレイアウト、コンポーネントパターン | | [art | SVGイラスト・美術の見える化 | | [diagram | フローチャート、タイムライン、階層、サイクル図、行列 |

モデルは、必要なモジュールで[load_ui_guidelinesを呼び出し、以下を含む包括的な設計スペックを取り戻します。

• コア設計システム(哲学、ストリーミングルール、CSS変数)
• カラーパレット(6つの傾斜路使用規則)
• コンポーネントパターンとコードテンプレート

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.

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

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:

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.