Chart Pane

ChartPane

Claude の UI 内にインタラクティブな Chart.js チャートをインラインで表示する MCP App です。Claude Desktop、ChatGPT、VS Code、Cursor、および MCP Apps に対応するあらゆるクライアントで動作します。

ライブインスタンス： mcp.chartpane.com

機能

• 9 種類のチャート：棒、折れ線、面、円、ドーナツ、polarArea、バブル、散布図、レーダー
• 積み上げ棒グラフと横棒グラフのバリエーション
• 複数チャートのダッシュボードグリッド（最大 4 列）
• カスタムカラーまたは自動 12 色パレット
• クライアント側でレンダリング — チャートデータはサーバー側に保存されません
• MCP 互換のあらゆるクライアント（Claude Desktop、ChatGPT、VS Code、Cursor）で動作します

ツール

• render_chart — 単一のチャートをレンダリングします（bar、line、area、pie、doughnut、polarArea、bubble、scatter、radar、stacked）
• render_dashboard — 複数チャートのグリッドレイアウトをレンダリングします

クイックスタート

Settings > Connectors > Add custom connector から Claude Desktop に ChartPane を追加します：

https://mcp.chartpane.com/mcp

または、mcp-remote を使用します（Node.js が必要です）：

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

使用例

1. 棒グラフ

プロンプト：「四半期ごとの収益を棒グラフにしてください：Q1 $50k、Q2 $80k、Q3 $120k、Q4 $95k」

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 のツール呼び出しは、入力を検証して structuredContent を返す薄い MCP サーバーを経由します。ブラウザー側の UI は入力を Chart.js の設定に変換し、キャンバスにレンダリングします。共有ロジック（型、検証、カラー、設定）はすべて shared/ にあります。

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

プライバシー

ChartPane が記録するのはリクエストのメタデータ（チャートの種類、タイトル、タイムスタンプ）のみです。チャートのデータ値は保存されません。チャートはすべてブラウザー内でクライアント側レンダリングされます。ポリシー全文：chartpane.com/privacy

サポート

• GitHub Issues：github.com/ahmadnassri/chartpane/issues
• メール：[email protected]

ライセンス

MIT