Chartpane

🚀 ChartPane

ClaudeのUI内にインラインでインタラクティブなChart.jsチャートをレンダリングするMCPアプリです。Claude Desktop、ChatGPT、VS Code、Cursorなど、MCPアプリをサポートするあらゆるクライアントで動作します。

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

✨ 主な機能

• 9種類のチャートタイプ: 棒グラフ、折れ線グラフ、エリアグラフ、円グラフ、ドーナツグラフ、極座標グラフ、バブルグラフ、散布図、レーダーチャート
• 積み上げ棒グラフと水平棒グラフのバリエーション
• マルチチャートダッシュボードグリッド（最大4列）
• カスタムカラーまたは自動12色パレット
• クライアントサイドレンダリング — チャートデータはサーバー側に保存されません
• 任意のMCP互換クライアント（Claude Desktop、ChatGPT、VS Code、Cursor）で動作

🛠️ ツール

• render_chart — 単一のチャート（棒グラフ、折れ線グラフ、エリアグラフ、円グラフ、ドーナツグラフ、極座標グラフ、バブルグラフ、散布図、レーダーチャート、積み上げ棒グラフ）をレンダリングします。
• render_dashboard — マルチチャートグリッドレイアウトをレンダリングします。

🚀 クイックスタート

Claude DesktopにChartPaneを追加するには、Settings > Connectors > Add custom connector を経由して以下を入力します。

https://mcp.chartpane.com/mcp

または、mcp-remote を使用することもできます（Node.jsが必要）。

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

💻 使用例

基本的な使用法

1. 棒グラフ

プロンプト: "Create a bar chart of quarterly revenue: 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. 円グラフ

プロンプト: "Show browser market share as a pie chart: Chrome 65%, Safari 19%, Firefox 8%, Edge 5%, Other 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. マルチチャートダッシュボード

プロンプト: "Build a dashboard with monthly active users as a line chart and signups by channel as a bar chart"

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のツール呼び出しは、入力を検証して 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
• メール: support@chartpane.com

📄 ライセンス

MIT