Charts MCP

🚀 MCP Server Chart

このプロジェクトは、AntV を使用してチャートを生成するための Model Context Protocol サーバーです。この MCP サーバーを使って、チャート生成 と データ分析 を行うことができます。

🚀 クイックスタート

この TypeScript ベースの MCP サーバーはチャート生成機能を提供し、MCP ツールを通じて様々なタイプのチャートを作成することができます。また、Dify でも使用することができます。

Desktop APP での使用方法

Claude、VSCode、Cline、Cherry Studio、Cursor などの Desktop APP で使用するには、以下の MCP サーバー設定を追加します。

Mac システムの場合：

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

Windows システムの場合：

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

また、aliyun、modelscope、glama.ai、smithery.ai などで HTTP、SSE プロトコルを使用して利用することもできます。

✨ 主な機能

現在、25 種類以上のチャートがサポートされています。

1. generate_area_chart：エリア チャートを生成します。連続した独立変数の下でデータの傾向を表示し、データの全体的な傾向を観察することができます。
2. generate_bar_chart：棒 チャートを生成します。異なるカテゴリ間の値を比較するのに使用され、水平比較に適しています。
3. generate_boxplot_chart：ボックスプロット を生成します。データの分布を表示し、中央値、四分位数、外れ値を含みます。
4. generate_column_chart：縦棒 チャートを生成します。異なるカテゴリ間の値を比較するのに使用され、垂直比較に適しています。
5. generate_district_map：地区マップ を生成します。行政区画とデータ分布を表示します。
6. generate_dual_axes_chart：二重軸 チャートを生成します。異なる単位または範囲を持つ 2 つの変数間の関係を表示します。
7. generate_fishbone_diagram：魚骨 図を生成します。石川図とも呼ばれ、問題の根本原因を特定して表示するのに使用されます。
8. generate_flow_diagram：フローチャート を生成します。プロセスのステップと順序を表示します。
9. generate_funnel_chart：ファネル チャートを生成します。異なる段階でのデータ損失を表示します。
10. generate_histogram_chart：ヒストグラム を生成します。データを区間に分割し、各区間のデータポイントの数を数えてデータの分布を表示します。
11. generate_line_chart：折れ線 チャートを生成します。時間または他の連続変数に対するデータの傾向を表示します。
12. generate_liquid_chart：液体 チャートを生成します。データの割合を表示し、水で満たされた球体の形式でパーセンテージを視覚的に表します。
13. generate_mind_map：マインドマップ を生成します。思考プロセスと階層情報を表示します。
14. generate_network_graph：ネットワーク グラフを生成します。ノード間の関係と接続を表示します。
15. generate_organization_chart：組織 チャートを生成します。組織の構造と人員関係を表示します。
16. generate_path_map：経路マップ を生成します。POI のルート計画結果を表示します。
17. generate_pie_chart：円 チャートを生成します。データの割合を表示し、セクターで表される部分に分割して各部分の割合を示します。
18. generate_pin_map：ピンマップ を生成します。POI の分布を表示します。
19. generate_radar_chart：レーダー チャートを生成します。多次元データを総合的に表示し、レーダーのような形式で複数の次元を示します。
20. generate_sankey_chart：サンキー チャートを生成します。データの流れと量を表示し、異なるノード間のデータの移動をサンキー形式で表します。
21. generate_scatter_chart：散布 図を生成します。2 つの変数間の関係を表示し、データポイントを座標系上の散らばった点として示します。
22. generate_treemap_chart：ツリーマップ を生成します。階層データを表示し、データを矩形の形式で示し、矩形のサイズがデータの値を表します。
23. generate_venn_chart：ベン図 を生成します。集合間の関係を表示し、交差、和集合、差集合を含みます。
24. generate_violin_chart：バイオリン プロットを生成します。データの分布を表示し、ボックスプロットと密度プロットの機能を組み合わせて、データの分布をより詳細に表示します。
25. generate_word_cloud_chart：ワードクラウド を生成します。テキストデータ内の単語の頻度を表示し、フォントサイズが各単語の頻度を示します。

⚠️ 重要提示

上記の地理可視化チャート生成ツールは AMap service を使用しており、現在は中国国内のマップ生成のみをサポートしています。

🚰 SSE または Streamable トランスポートでの実行

直接実行

パッケージをグローバルにインストールします。

npm install -g @antv/mcp-server-chart

好みのトランスポートオプションでサーバーを実行します。

# SSE トランスポートの場合 (デフォルトのエンドポイント: /sse)
mcp-server-chart --transport sse

# カスタムエンドポイントでの Streamable トランスポートの場合
mcp-server-chart --transport streamable

その後、以下のアドレスでサーバーにアクセスできます。

• SSE トランスポート: http://localhost:1122/sse
• Streamable トランスポート: http://localhost:1122/mcp

Docker でのデプロイ

Docker ディレクトリに移動します。

cd docker

docker-compose を使用してデプロイします。

docker compose up -d

その後、以下のアドレスでサーバーにアクセスできます。

• SSE トランスポート: http://localhost:1123/sse
• Streamable トランスポート: http://localhost:1122/mcp

🎮 CLI オプション

MCP サーバーを実行する際に、以下の CLI オプションを使用することもできます。-h を付けて CLI を実行すると、コマンドオプションが表示されます。

MCP Server Chart CLI

Options:
  --transport, -t  トランスポートプロトコルを指定します: "stdio", "sse", または "streamable" (デフォルト: "stdio")
  --port, -p       SSE または streamable トランスポートのポートを指定します (デフォルト: 1122)
  --endpoint, -e   トランスポートのエンドポイントを指定します:
                   - SSE の場合: デフォルトは "/sse"
                   - streamable の場合: デフォルトは "/mcp"
  --help, -h       このヘルプメッセージを表示します

⚙️ 環境変数

📠 プライベートデプロイ

MCP Server Chart はデフォルトで無料のチャート生成サービスを提供しています。プライベートデプロイの必要があるユーザーは、VIS_REQUEST_SERVER を使用して独自のチャート生成サービスをカスタマイズすることができます。

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ],
      "env": {
        "VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

AntV のプロジェクト GPT-Vis-SSR を使用して、プライベート環境で HTTP サービスをデプロイし、その URL アドレスを VIS_REQUEST_SERVER 環境変数を通じて渡すことができます。

• メソッド: POST
• パラメータ: GPT-Vis-SSR にレンダリング用に渡されます。例えば、{ "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }。
• 戻り値: HTTP サービスの戻りオブジェクト。
  • success: boolean チャート画像の生成が成功したかどうか。
  • resultObj: string チャート画像の URL。
  • errorMessage: string success = false の場合、エラーメッセージを返します。

⚠️ 重要提示

プライベートデプロイソリューションは現在、geographic-district-map、geographic-path-map、geographic-pin-map の 3 つのツールを含む地理可視化チャート生成をサポートしていません。

🗺️ 生成レコードの表示

デフォルトでは、ユーザー自身が結果を保存する必要がありますが、チャート生成レコードを表示するサービスも提供しています。これには、ユーザーが自分自身のサービス識別子を生成し、設定する必要があります。

アリペイでミニプログラムをスキャンして開き、個人用のサービス識別子を生成します（下の「My」メニューをクリックし、「My Services」ページに入り、「Generate」ボタンをクリックし、成功後に「Copy」ボタンをクリックします）。

次に、MCP サーバーの設定に SERVICE_ID 環境変数を追加する必要があります。例えば、Mac の設定は以下の通りです（Windows システムの場合は、env 変数を追加するだけです）。

{
  "mcpServers": {
    "AntV Map": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ],
      "env": {
        "SERVICE_ID": "***********************************"
      }
    }
  }
}

MCP Server の設定を更新した後、AI クライアントアプリケーションを再起動し、MCP Server が正常に起動して接続されていることを再度確認します。その後、マップを再生成してみることができます。生成が成功したら、ミニプログラムの「My Map」ページにアクセスして、マップ生成レコードを確認することができます。

🎛️ ツールフィルタリング

DISABLED_TOOLS 環境変数を使用して、特定のチャート生成ツールを無効にすることができます。これは、特定のツールが MCP クライアントと互換性の問題がある場合や、利用可能な機能を制限したい場合に便利です。

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ],
      "env": {
        "DISABLED_TOOLS": "generate_fishbone_diagram,generate_mind_map"
      }
    }
  }
}

フィルタリング可能なツール名 は ✨ 主な機能 を参照してください。

🔨 開発

依存関係をインストールします。

npm install

サーバーをビルドします。

npm run build

MCP サーバーを起動します。

npm run start

SSE トランスポートで MCP サーバーを起動します。

node build/index.js -t sse

Streamable トランスポートで MCP サーバーを起動します。

node build/index.js -t streamable

📄 ライセンス

MIT@AntV.