Chart Pane

ChartPane

可在 Claude 界面中内嵌渲染交互式 Chart.js 图表的 MCP 应用。适用于 Claude Desktop、ChatGPT、VS Code、Cursor，以及任何支持 MCP Apps 的客户端。

在线实例： mcp.chartpane.com

功能

• 支持 9 种图表类型：柱状图、折线图、面积图、饼图、圆环图、极区图、气泡图、散点图、雷达图
• 堆叠式和水平柱状图变体
• 多图表仪表板网格布局（最多 4 列）
• 自定义颜色或自动应用 12 色调色板
• 客户端渲染——图表数据绝不存储在服务端
• 适用于任何兼容 MCP 的客户端（Claude Desktop、ChatGPT、VS Code、Cursor）

工具

• render_chart — 渲染单个图表（柱状图、折线图、面积图、饼图、圆环图、极区图、气泡图、散点图、雷达图、堆叠图）
• render_dashboard — 渲染多图表网格布局

快速开始

通过 Settings > Connectors > Add custom connector 将 ChartPane 添加到 Claude Desktop：

https://mcp.chartpane.com/mcp

或者使用 mcp-remote（需要 Node.js）：

{
  "mcpServers": {
    "chartpane": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.chartpane.com/mcp"]
    }
  }
}

使用示例

1. 柱状图

提示词：“创建一张季度收入柱状图：Q1 5 万美元，Q2 8 万美元，Q3 12 万美元，Q4 9.5 万美元”

Claude 调用 render_chart 并传入：

{
  "type": "bar",
  "title": "Quarterly Revenue",
  "data": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [{ "label": "Revenue ($k)", "data": [50, 80, 120, 95] }]
  }
}

对话中会内嵌渲染一张交互式柱状图。

2. 饼图

提示词：“用饼图展示浏览器市场份额：Chrome 65%、Safari 19%、Firefox 8%、Edge 5%、其他 3%”

Claude 调用 render_chart 并传入：

{
  "type": "pie",
  "title": "Browser Market Share",
  "data": {
    "labels": ["Chrome", "Safari", "Firefox", "Edge", "Other"],
    "datasets": [{ "label": "Share", "data": [65, 19, 8, 5, 3] }]
  }
}

每个扇区都会从内置调色板中获得不同的颜色。

3. 多图表仪表板

提示词：“创建一个仪表板，用折线图展示月活跃用户，用柱状图展示各渠道的注册人数”

Claude 调用 render_dashboard 并传入：

{
  "title": "Growth Dashboard",
  "charts": [
    {
      "type": "line",
      "title": "Monthly Active Users",
      "data": {
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
        "datasets": [{ "label": "MAU", "data": [12000, 15000, 18000, 22000, 28000, 35000] }]
      }
    },
    {
      "type": "bar",
      "title": "Signups by Channel",
      "data": {
        "labels": ["Organic", "Referral", "Paid", "Social"],
        "datasets": [{ "label": "Signups", "data": [4500, 3200, 2800, 1500] }]
      }
    }
  ],
  "columns": 2
}

两张图表会以网格布局并排渲染。

自托管

ChartPane 运行在 Cloudflare Workers 上。

npm install
cp .dev.vars.example .dev.vars    # Configure secrets (optional)
npm run dev                        # Local dev server (port 8787 + sandbox on 3456)
npm run deploy                     # Deploy to Cloudflare Workers

你需要创建自己的 KV 命名空间和 D1 数据库——请参阅 wrangler.jsonc 中的注释。

开发

npm run dev        # wrangler dev + sandbox dev server (localhost:3456)
npm run build      # Type-check (tsc --noEmit) + bundle UI
npm test           # Run all tests (vitest)
npm run test:watch # Watch mode

架构

Claude 的工具调用会经由一个轻量 MCP 服务，由它验证输入并返回 structuredContent。浏览器端 UI 会将输入转换为 Chart.js 配置，并渲染到 canvas 上。所有共享逻辑（类型、验证、颜色、配置）都位于 shared/ 中。

Claude tool call → server.ts (validate) → structuredContent
    → mcp-app.ts (browser) → buildChartConfig() → Chart.js canvas

隐私

ChartPane 仅记录请求元数据（图表类型、标题、时间戳），绝不存储图表数据值。图表完全在你的浏览器中进行客户端渲染。完整政策：chartpane.com/privacy

支持

• GitHub 问题：github.com/ahmadnassri/chartpane/issues
• 电子邮件：[email protected]

许可证

MIT