Skip to main content
Glama

Claude GenUI

让 Claude Desktop 在对话里直接生成原生的交互式可视化内容,而不是输出一段 HTML 代码或生成 Artifact。实现上是一个 MCP Apps 服务器,采用的标准和 CopilotKit「开放式生成式 UI」相同。

工具

作用

render_chart

交互式图表:柱状、横向柱状、折线、面积、饼图、环形、雷达、散点。支持悬停提示、数据表视图和深浅色主题

render_card

信息卡片:大数字、字段网格、清单、图片。按钮点击后会把预设提示词发回给 Claude

render_html

兜底用,渲染任意 HTML/CSS/JS(沙箱中运行)。可以从 jsdelivr / unpkg / cdnjs / esm.sh 加载库;脚本里调用 genui.send('...') 可给 Claude 发消息

服务器自带使用说明,会引导 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.ts

  • npm 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.js

  • scripts/install.mjs:注册到 Claude Desktop

  • scripts/smoke.mjs:协议冒烟测试

License

MIT

Available Tools

3 tools
render_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

    A4.1/5.0

    Scored across 3 tools

    Disambiguation4/5

    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.

    Naming Consistency5/5

    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.

    Tool Count5/5

    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.

    Completeness4/5

    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

    ActivityMaintained
    ResponsivenessNo recent community issues

    Related MCP Connectors

    Related MCP Servers

    • A
      license
      Not graded
      quality
      D
      maintenance
      A 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
    • A
      license
      A
      quality
      D
      maintenance
      MCP 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.
      3
      MIT