AI 모델을 가르치는 MCP 서버는 상호 작용하는 시각화를 생성합니다. - 차트, 다이어그램, 조업 등.

Anthropic의 Artifacts 및 Vercel의 생성 UI에 영감을 주었습니다. 이 서버는 구조화된 디자인 가이드라인을 제공합니다. 그래서 AI 모델은 일관된 스트리밍 안전, 시각적으로 광택된 위젯을 생산합니다.

무엇 그것

디자인 규칙의 수천을 모든 시스템 프롬프트에 저장하는 대신, 이 MCP 서버는 실제 시각화를 생성 할 필요가있을 때 모델 **로드 가이드 라인을 허용한다.

모델 호출 load_ui_guidelines 모듈이 필요하며, 다음과 같은 종합적인 디자인 사양을 가져옵니다.

• 핵심 설계 시스템 (필로피, 스트리밍 규칙, CSS 변수)
• 색상 팔레트 (6 경사로 semantic 사용 규칙)
• 구성 요소 패턴 및 코드 템플릿

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.