chart-canvas

Chart Canvas MCP Server

Model Context Protocol 経由で AI アシスタントにインタラクティブなビジュアライゼーションダッシュボードを提供します

AI との会話から、見栄えのよいチャート、図、テーブルを直接作成できます。Chart Canvas は、Claude などの LLM を使って作業している間、ビジュアライゼーションをリアルタイムで表示するダッシュボードを提供します。

デモ

Chart Canvas の動作を確認するには、YouTube の全編デモをご覧ください！

機能

✨ 複数のチャートタイプ：折れ線、棒、散布図、円グラフ、テーブル、Mermaid 図
🎨 インタラクティブなダッシュボード：ドラッグ＆ドロップで配置できるグリッドレイアウトとリアルタイム更新
🔄 ライブ同期：変更がブラウザーに即座に反映されます
📊 豊富なビジュアライゼーション：ECharts と Mermaid を採用
💾 幅広いデータソース：SQLite、CSV、Parquet、JSON、NDJSON ファイルを直接クエリできます
⚡ スマートなデータフロー：クエリをサーバー側で実行するため、データはローカルに保持され、LLM に送信されません
🔒 プライバシーを最優先：データがマシンの外部に送信されることはありません
🚀 簡単なセットアップ：1 つのコマンドですぐに使い始められます
🌐 本番環境に対応：最適化されたビルドを備えた本番モードを内蔵

対応データソース

Chart Canvas では、複数のファイル形式のデータをクエリしてビジュアライズできます。

• SQLite（.db、.sqlite、.sqlite3）- リレーショナルデータベース
• CSV（.csv）- カンマ区切り値
• Parquet（.parquet）- 列指向のストレージ形式
• JSON（.json）- オブジェクトの JSON 配列
• NDJSON（.jsonl、.ndjson）- 改行区切りの JSON

プライバシーとパフォーマンス：すべてのクエリは DuckDB を使ってマシン上でローカルに実行されます。クエリ結果はサーバー側でビジュアライゼーションに変換され、LLM に送信されるのはメタデータ（チャートの設定）のみで、実際のデータが送信されることはありません。そのため、高速でスケーラブルかつプライベートに利用できます。

クイックスタート

インストール

npm install -g @gluip/chart-canvas-mcp

または、npx で直接実行できます（インストール不要）。

npx @gluip/chart-canvas-mcp

設定

MCP クライアントの設定（例：Claude Desktop）に追加します。

macOS：~/Library/Application Support/Claude/claude_desktop_config.json
Windows：%APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "chart-canvas": {
      "command": "npx",
      "args": ["-y", "@gluip/chart-canvas-mcp"]
    }
  }
}

使い方

1. MCP クライアント（例：Claude Desktop）を起動します
2. サーバーがポート 3000 で自動的に起動します
3. showCanvas ツールを使って、ブラウザーでダッシュボードを開きます
4. AI にビジュアライゼーションの作成を依頼します！

プロンプトの例

"Show me a line chart comparing sales data for 2023 and 2024"

"Create a pie chart showing market share by region"

"Draw a flowchart for the user authentication process"

"Make a table with team member information"

"Show me the database schema for my SQLite database"

"Query the athletes table and show the top 10 with most personal records"

"Create a chart showing sales trends from the database grouped by region"

MCP ツール

addVisualization

キャンバスにチャート、図、テーブルを作成します。

対応タイプ：

• line - 複数の系列を含む折れ線チャート
• bar - 比較用の棒グラフ
• scatter - データ分布を示す散布図
• pie - ラベル付きの円グラフ
• table - ヘッダー付きのデータテーブル
• flowchart - Mermaid 図（フローチャート、シーケンス図、ガントチャートなど）

例：

{
  type: "line",
  title: "Monthly Sales",
  series: [
    { name: "2023", data: [[1, 120], [2, 132], [3, 101]] },
    { name: "2024", data: [[1, 220], [2, 182], [3, 191]] }
  ],
  xLabels: ["Jan", "Feb", "Mar"]
}

removeVisualization

ID を指定して、特定のビジュアライゼーションを削除します。

clearCanvas

キャンバスからすべてのビジュアライゼーションを削除します。

showCanvas

デフォルトのブラウザーでダッシュボードを開きます。

getDatabaseSchema

クエリを作成する前に、SQLite データベースの構造を調べて、利用可能なテーブルや列を確認します。

パラメーター：

• databasePath - SQLite データベースファイルのパス（例：./data/mydb.sqlite または絶対パス）

例：

{
  databasePath: "/path/to/database.db";
}

戻り値：すべてのテーブル、列、データ型、制約を示す、書式設定済みのスキーマ。

queryAndVisualize

SQLite データベースに対して SQL クエリを実行し、結果から可視化を作成します。クエリはサーバー側で実行され、読み取り専用（SELECT のみ）である必要があります。最大 10,000 行です。

パラメーター：

• databasePath - SQLite データベースファイルへのパス
• query - SQL SELECT クエリ（読み取り専用）
• visualizationType - グラフの種類：line、bar、scatter、pie、または table
• columnMapping（table の場合は任意）- グラフの軸に対する列のマッピング：
  • xColumn - X 軸に使用する列（グラフでは必須）
  • yColumns - Y 軸に使用する列の配列（グラフでは必須）
  • seriesColumn - データを個別の系列にグループ化する列（任意）
  • groupByColumn - 代替のグループ化列（任意）
• title - 可視化のタイトル（任意）
• description - 説明（任意）
• useColumnAsXLabel - true の場合、数値の代わりに X 列の値をラベルとして使用します

例：

{
  databasePath: "./data/sales.db",
  query: "SELECT region, SUM(revenue) as total FROM sales GROUP BY region",
  visualizationType: "bar",
  columnMapping: {
    xColumn: "region",
    yColumns: ["total"]
  },
  title: "Revenue by Region",
  useColumnAsXLabel: true
}

セキュリティ：SELECT および WITH（CTE）クエリのみが許可されます。INSERT、UPDATE、DELETE、DROP など、データを変更する操作はブロックされます。

アーキテクチャ

• バックエンド：Node.js + TypeScript + Express + MCP SDK
• フロントエンド：Vue 3 + ECharts + Mermaid + Grid Layout
• 通信：リアルタイムのポーリングによる即時更新

開発

ローカル開発

# Clone repository
git clone https://github.com/gluip/chart-canvas.git
cd chart-canvas

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

# Development mode (backend + frontend separate)
# Terminal 1 - Backend
cd backend
npm run dev

# Terminal 2 - Frontend
cd frontend
npm run dev

# Production mode (single server)
cd backend
npm run build:all
npm run start:prod

ローカル開発用の MCP 設定

{
  "mcpServers": {
    "chart-canvas": {
      "command": "/path/to/node",
      "args": [
        "/path/to/chart-canvas/backend/node_modules/.bin/tsx",
        "/path/to/chart-canvas/backend/src/index.ts"
      ]
    }
  }
}

ライセンス

MIT © 2026 Martijn

リンク

• NPM パッケージ
• GitHub リポジトリ
• Model Context Protocol