Chartpane

🚀 ChartPane

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

实时实例：mcp.chartpane.com

✨ 主要特性

• 支持 9 种图表类型：条形图、折线图、面积图、饼图、环形图、极坐标区域图、气泡图、散点图、雷达图。
• 提供堆叠和水平条形图变体。
• 支持多图表仪表盘网格布局（最多 4 列）。
• 可自定义颜色，也可使用自动 12 色调色板。
• 客户端渲染 — 图表数据从不存储在服务器端。
• 可与任何兼容 MCP 的客户端（Claude Desktop、ChatGPT、VS Code、Cursor）配合使用。

🛠️ 工具

• render_chart — 渲染单个图表（条形图、折线图、面积图、饼图、环形图、极坐标区域图、气泡图、散点图、雷达图、堆叠图）。
• render_dashboard — 渲染多图表网格布局。

🚀 快速开始

通过 设置 > 连接器 > 添加自定义连接器 将 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. 条形图

提示：“创建一个季度收入的条形图：第一季度 50,000 美元，第二季度 80,000 美元，第三季度 120,000 美元，第四季度 95,000 美元” 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    # 配置密钥（可选）
npm run dev                        # 本地开发服务器（端口 8787 + 沙盒端口 3456）
npm run deploy                     # 部署到 Cloudflare Workers

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

🔧 技术细节

开发

npm run dev        # wrangler dev + 沙盒开发服务器（localhost:3456）
npm run build      # 类型检查（tsc --noEmit）+ 打包 UI
npm test           # 运行所有测试（vitest）
npm run test:watch # 监听模式

架构

Claude 工具调用通过一个轻量级的 MCP 服务器，该服务器验证输入并返回 structuredContent。浏览器端的 UI 将输入转换为 Chart.js 配置并渲染到画布上。所有共享逻辑（类型、验证、颜色、配置）都存放在 shared/ 目录中。

Claude 工具调用 → server.ts（验证） → structuredContent
    → mcp-app.ts（浏览器） → buildChartConfig() → Chart.js 画布

🛡️ 隐私

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

📞 支持

• GitHub 问题：github.com/ahmadnassri/chartpane/issues
• 电子邮件：support@chartpane.com

📄 许可证

MIT 许可证