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 許可證