Claude GenUI
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Claude GenUI Compare 2024 GDP for Beijing, Shanghai, Guangzhou, and Shenzhen in a chart."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Claude GenUI
让 Claude Desktop 在对话里直接生成原生的交互式可视化内容,而不是输出一段 HTML 代码或生成 Artifact。实现上是一个 MCP Apps 服务器,采用的标准和 CopilotKit「开放式生成式 UI」相同。
工具 | 作用 |
| 交互式图表:柱状、横向柱状、折线、面积、饼图、环形、雷达、散点。支持悬停提示、数据表视图和深浅色主题 |
| 信息卡片:大数字、字段网格、清单、图片。按钮点击后会把预设提示词发回给 Claude |
| 兜底用,渲染任意 HTML/CSS/JS(沙箱中运行)。可以从 jsdelivr / unpkg / cdnjs / esm.sh 加载库;脚本里调用 |
服务器自带使用说明,会引导 Claude 按「图表 → 卡片 → HTML」的优先级选用工具。
在新电脑上安装
需要 Node.js 20 或更高版本,以及 Claude Desktop。
git clone https://github.com/liuchenxiwt798-collab/claude-genui.git
cd claude-genui
npm install # 安装依赖,并自动构建 dist/view.html
npm run setup # 把服务器注册到 Claude Desktop 配置中然后完全退出 Claude Desktop(macOS 按 ⌘Q,Windows 选「文件 → 退出」),再重新打开。只关窗口不会生效。
可以这样试:
「用图表对比北上广深 2024 年 GDP」
「做一张东京三日游行程卡片」
「用 HTML 做一个可调频率的正弦波动画」
npm run setup 做了什么
Claude Desktop 每个使用模式都有自己的配置目录,普通模式是
Claude/,第三方 gateway 模式是Claude-*-3p/。脚本会找出所有带claude_desktop_config.json的目录,在每个目录里登记claude-genui。修改前会备份为.bak-genui。登记的是当前
node的路径和本目录下server.mjs的绝对路径。移动项目目录后需要重新运行一次。手动指定目录:
npm run setup -- --dir "<配置目录>"卸载:
npm run setup -- --remove
Related MCP server: chartpane
排错
服务器日志在
~/Library/Logs/Claude/mcp-server-claude-genui.log(macOS)。没有这个文件,说明 Claude Desktop 没有加载这个服务器:检查配置目录对不对,以及是否用 ⌘Q 完全退出过。Claude 还是输出 HTML:在提问里加一句「用可视化工具展示」。
开发
npm run dev:本地预览视图,地址http://localhost:5173/view.html?demo=chart|card|html,示例数据在src/demos.tsnpm test:通过 stdio 对 MCP 服务器做协议冒烟测试修改
src/后需要重新执行npm run build,再用 ⌘Q 重启 Claude Desktop
结构
server.mjs:MCP 服务器(3 个工具,对应 3 个ui://资源)view.html+src/view.ts+src/view.css:单文件视图,经 Vite 打包后内联 Chart.jsscripts/install.mjs:注册到 Claude Desktopscripts/smoke.mjs:协议冒烟测试
License
MIT
Available Tools
3 toolsrender_cardRender cardA
Render a structured information card inline (e.g. weather, product, profile, summary, checklist, comparison). Optional action buttons send a follow-up prompt back to Claude when clicked.
Inputs: title (required), hero, icon, badge, +6 more.
render_chartRender chartA
PREFERRED for any numeric data. Renders a native interactive chart inline in the chat (do not write chart HTML yourself). Use whenever numbers are better understood visually (trends, comparisons, shares). Supports bar, horizontal bar, line, area, pie, doughnut, radar and scatter. Keep to at most 8 series (3 for pie/scatter); never mix two different units on one chart.
Inputs: type (required), title (required), datasets (required), unit, +5 more.
render_htmlRender HTMLA
FALLBACK ONLY — use render_chart for data and render_card for structured info first. Renders a free-form interactive HTML/CSS/JS interface inline in a sandbox — diagrams, simulations, mini apps, custom visualizations (SVG, Canvas, D3, three.js). Provide a body fragment or full document. Scripts may be loaded only from cdn.jsdelivr.net, unpkg.com, cdnjs.cloudflare.com or esm.sh; no other network access. Inside scripts, call window.genui.send('text') to send a message back to Claude.
Inputs: html (required), title, height.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 3 tools
Each tool targets a distinct output type: charts for numeric data, cards for structured info, HTML for free-form interfaces. The descriptions explicitly establish a priority order (render_html is 'FALLBACK ONLY'), which resolves the inherent overlap created by render_html being a superset capability. Minor residual ambiguity remains since an agent could technically render a chart or card via HTML, but the guidance is strong enough to steer selection.
All three tools follow the exact same verb_noun pattern: render_chart, render_card, render_html. The shared 'render_' prefix makes the family relationship obvious and the noun cleanly signals the output target.
Three tools is well-scoped for a UI-rendering server: one per major output modality, with HTML acting as the general-purpose catch-all. No tool feels redundant, and the set avoids both the thinness of a single trivial renderer and the bloat of per-widget tool proliferation.
The surface covers the main inline-rendering needs (data visualization, structured info, arbitrary interactive content), and render_html provides an escape hatch for anything else. Some obvious convenience types are absent—e.g. dedicated table, image/media, or form renderers—but these can be worked around through render_card or render_html, so gaps are minor rather than blocking.
Maintenance
Related MCP Connectors
MCP server that lets your AI assistant build and deploy apps, hosting each one at a live URL.
MCP server for your apps' tools and custom tools, plus hosted AI agents and approval-gated workflows
MCP server unifying ERPs, CRMs, APIs and knowledge base for Claude, ChatGPT and Gemini.
Augments MCP Server - A comprehensive framework documentation provider for Claude Code
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceA minimal, dependency-free MCP server that renders interactive widgets (like bar charts) inline in Claude, ChatGPT, and Grok from a custom connector.1MIT
- AlicenseNot gradedqualityDmaintenanceMCP server that renders interactive Chart.js charts (bar, line, pie, doughnut, etc.) inline in Claude's UI.1MIT
- AlicenseNot gradedqualityDmaintenanceA professional chart generation MCP server for Claude Code. Drop a charts-theme.json into any project and Claude can generate beautiful, on-brand charts output as slide-ready PNG and SVG files — fully local, no API keys required.MIT
- AlicenseAqualityDmaintenanceMCP server that lets agents create, display, and export rich UI widgets (cards, dashboards, charts, forms) inline in conversations, with interactive iframe support in MCP Apps hosts and PNG image fallback for other clients.3MIT