{"id":47430759,"url":"https://github.com/op7418/Generative-UI-MCP","last_synced_at":"2026-04-05T11:01:09.557Z","repository":{"id":344742969,"uuid":"1182905825","full_name":"op7418/Generative-UI-MCP","owner":"op7418","description":"MCP server that teaches AI models to generate interactive visualizations — charts, diagrams, mockups, and more.","archived":false,"fork":false,"pushed_at":"2026-03-16T04:50:31.000Z","size":20,"stargazers_count":21,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-16T16:34:36.170Z","etag":null,"topics":["ai","chart","claude","diagram","generative-ui","mcp","model-context-protocol","svg","visualization"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/op7418.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-16T04:29:03.000Z","updated_at":"2026-03-16T14:24:37.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/op7418/Generative-UI-MCP","commit_stats":null,"previous_names":["op7418/generative-ui-mcp"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/op7418/Generative-UI-MCP","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/op7418%2FGenerative-UI-MCP","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/op7418%2FGenerative-UI-MCP/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/op7418%2FGenerative-UI-MCP/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/op7418%2FGenerative-UI-MCP/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/op7418","download_url":"https://codeload.github.com/op7418/Generative-UI-MCP/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/op7418%2FGenerative-UI-MCP/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31433044,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T08:13:15.228Z","status":"ssl_error","status_checked_at":"2026-04-05T08:13:11.839Z","response_time":75,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","chart","claude","diagram","generative-ui","mcp","model-context-protocol","svg","visualization"],"created_at":"2026-03-22T06:00:35.547Z","updated_at":"2026-04-05T11:01:09.551Z","avatar_url":"https://github.com/op7418.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Generative UI MCP\n\nAn MCP server that teaches AI models to generate interactive visualizations — charts, diagrams, mockups, and more.\n\n\u003e Inspired by [Anthropic's Artifacts](https://www.anthropic.com/news/artifacts) and [Vercel's Generative UI](https://vercel.com/blog/ai-sdk-3-generative-ui). This server provides structured design guidelines so AI models produce consistent, streaming-safe, visually polished widgets.\n\n## What it does\n\nInstead 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.\n\n| Module | What it covers |\n|--------|---------------|\n| `interactive` | HTML controls, forms, sliders, calculators |\n| `chart` | Chart.js patterns, canvas setup, interactive data controls |\n| `mockup` | UI mockup layouts, component patterns |\n| `art` | SVG illustrations, artistic visualizations |\n| `diagram` | Flowcharts, timelines, hierarchies, cycle diagrams, matrices |\n\nThe model calls `load_ui_guidelines` with the modules it needs, and gets back comprehensive design specs including:\n- Core design system (philosophy, streaming rules, CSS variables)\n- Color palette (6 ramps with semantic usage rules)\n- Component patterns and code templates\n- SVG setup guides with arrow markers and viewBox calculations\n- 8 diagram types with layout rules and code examples\n\n## Quick start\n\n### Auto-install via AI\n\nCopy and paste the following prompt into your AI assistant (Claude Code, Cursor, etc.) to install automatically:\n\n\u003e Install the `generative-ui-mcp` MCP server. Run `npx generative-ui-mcp` as a stdio MCP server. The server name should be \"generative-ui\".\n\n### Claude Code\n\n```bash\nclaude mcp add generative-ui -- npx generative-ui-mcp\n```\n\n### Claude Desktop\n\nAdd to your `claude_desktop_config.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"generative-ui\": {\n      \"command\": \"npx\",\n      \"args\": [\"generative-ui-mcp\"]\n    }\n  }\n}\n```\n\n### Cursor / Windsurf\n\nAdd to your MCP settings (`.cursor/mcp.json` or equivalent):\n\n```json\n{\n  \"mcpServers\": {\n    \"generative-ui\": {\n      \"command\": \"npx\",\n      \"args\": [\"generative-ui-mcp\"]\n    }\n  }\n}\n```\n\n## Tool\n\n### `load_ui_guidelines`\n\nLoad detailed design guidelines for generating visual widgets.\n\n**Parameters:**\n\n| Name | Type | Description |\n|------|------|-------------|\n| `modules` | `string[]` | Modules to load: `interactive`, `chart`, `mockup`, `art`, `diagram` |\n\n**Example call:**\n\n```json\n{\n  \"name\": \"load_ui_guidelines\",\n  \"arguments\": {\n    \"modules\": [\"chart\", \"diagram\"]\n  }\n}\n```\n\nShared sections (like Core Design System and Color Palette) are automatically deduplicated when loading multiple modules.\n\n## Resource\n\n### `generative-ui://system-prompt`\n\nA 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.\n\nContains: output format, JSON escaping rules, streaming order, CDN allowlist, SVG setup, size limits, and interaction patterns.\n\n## How it works\n\n```\n┌─────────────┐    system prompt     ┌─────────────┐\n│   AI Host   │ ◄── injects ──────── │  Resource:   │\n│ (Claude,    │     ~300 tokens      │ system-prompt│\n│  Cursor,    │                      └─────────────┘\n│  etc.)      │\n│             │    tool call          ┌─────────────┐\n│   Model ────│──► load_ui_          │  Guidelines  │\n│             │    guidelines         │  Modules     │\n│             │ ◄── returns ──────── │  (on demand) │\n│             │    detailed specs     └─────────────┘\n└─────────────┘\n```\n\n**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.\n\n## Development\n\n```bash\nnpm install\nnpm run build\nnpm start\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fop7418%2FGenerative-UI-MCP","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fop7418%2FGenerative-UI-MCP","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fop7418%2FGenerative-UI-MCP/lists"}