Vchart MCP Server

🚀 vchart-mcp-server

@visactor/vchart のためのモデルコンテキストプロトコル (MCP) サーバーです。このサーバーを使用することで、AIアシスタントがインタラクティブなチャートやビジュアライゼーションを生成できます。

English | 简体中文

🚀 クイックスタート

デスクトップアプリケーション（Trae、Claude、VSCode、Cline、Cherry Studio、Cursorなど）で使用するには、以下のMCPサーバー設定を追加します。

MacOS

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

Windows

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

Smitheryを通じたインストール

Smithery を通じてClaude Desktop用にvchart-mcp-serverを自動的にインストールするには、以下のコマンドを実行します。

npx -y @smithery/cli install @VisActor/vchart-mcp-server --client claude

✨ 主な機能

チャート出力形式

各チャートは複数の形式で生成できます。

• 画像 - 埋め込み用のPNG/JPG画像形式（デフォルト）
• 仕様 - プログラムで使用するためのVChart仕様オブジェクト
• HTML - Web表示用のインタラクティブなHTMLチャート

すべてのチャートでサポートされる共通パラメータ

サポートされるチャートタイプとツール

generate_cartesian_chart

直交座標系のチャートを生成します。エリアチャート、棒グラフ、折れ線グラフ、瀑布グラフ、ファネルグラフ、アニメーション付きランキング棒グラフが含まれます。

generate_polar_chart

極座標系のチャートを生成します。レーダーチャート、ローズチャート、パイチャートが含まれます。

generate_hierarchical_chart

階層チャートを生成します。ツリーマップ、円パッキングチャート、サンバーストチャートが含まれます。

generate_progress_chart

進捗チャートを生成します。円形、線形、ゲージ、液体チャートが含まれます。

generate_wordcloud_venn

ワードクラウドまたはベン図を生成します。テキストデータのキーワードと頻度を表示するのに適しています。

パラメータ:

generate_range_column_chart

水平範囲棒グラフを生成します。データ範囲と比較を表示するのに適しています。

generate_dual_axis_chart

2つのY軸を持つ複合チャートで、異なる単位の2つの指標を比較するのに適しています。

generate_scatter_chart

2つの変数間の関係を表示します。パターンや外れ値を発見するのに適しています。

generate_sankey_chart

サンキー図を生成します。

generate_heatmap_chart

ヒートマップを生成します。データの密度と分布を表示するのに適しています。

💻 使用例

設定が完了したら、AIアシスタントにチャートを作成するように依頼できます。

基本的な使用法

「月別の売上データを示すエリアチャートを作成して」

アシスタントは以下のパラメータで generate_cartesian_chart ツールを使用します。
- chartType: "area"
- dataTable: あなたの売上データ
- xField: "month"
- yField: "sales"

「収益とユーザー成長を比較する2軸チャートを生成して」

アシスタントは以下のパラメータで generate_dual_axis_chart ツールを使用します。
- dataTable: あなたのビジネスデータ
- xField: "time"
- yField: ["revenue", "userGrowth"]

「四半期ごとのパフォーマンスのインタラクティブなHTML棒グラフを表示して」

アシスタントは以下のパラメータで generate_cartesian_chart ツールを使用します。
- chartType: "bar"
- dataTable: あなたの四半期データ
- xField: "quarter"
- yField: "performance"
- output: "html"

「製品の売上シェアのパイチャートを作成して」

アシスタントは以下のパラメータで generate_polar_chart ツールを使用します。
- chartType: "pie"
- dataTable: あなたの売上データ
- categoryField: "product"
- valueField: "sales"

「身長と体重の散布図を描いて」

アシスタントは以下のパラメータで generate_scatter_chart ツールを使用します。
- dataTable: あなたの身体データ
- xField: "height"
- yField: "weight"
- colorField: "gender" (オプション)

「チームのスキル評価のレーダーチャートを作成して」

アシスタントは以下のパラメータで generate_polar_chart ツールを使用します。
- chartType: "radar"
- dataTable: あなたの評価データ
- categoryField: "skill"
- valueField: "score"

「データの流れを示すサンキー図を生成して」

アシスタントは以下のパラメータで generate_sankey_chart ツールを使用します。
- dataTable: あなたのフローデータ
- sourceField: "from"
- targetField: "to"
- valueField: "amount"

「データの分布を示すヒートマップを作成して」

アシスタントは以下のパラメータで generate_heatmap_chart ツールを使用します。
- dataTable: あなたの分布データ
- xField: "x_category"
- yField: "y_category"
- sizeField: "value"

🔧 技術詳細

SSEまたはストリーミング可能なトランスポートでの実行

インストールと起動

@visactor/vchart-mcp-server をグローバルにインストールします。

npm install -g @visactor/vchart-mcp-server

サーバーを起動します。

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

# ストリーミング可能なトランスポートの場合（デフォルトエンドポイント: /streamable）
mcp-server-chart --transport streamable

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

• SSEトランスポート: http://localhost:3001/sse
• ストリーミング可能なトランスポート: http://localhost:3001/streamable

その他のCLIオプション

オプション:
  -t, --transport <type>   トランスポートタイプ (stdio, sse, streamable) [デフォルト: stdio]
  -p, --port <port>        HTTPベースのトランスポートのポート番号 [デフォルト: 3000]
  -e, --endpoint <path>    HTTPベースのトランスポートのエンドポイントパス [デフォルト: /message]
  -h, --help               このヘルプメッセージを表示

例:
  node index.js                                    # stdioトランスポートで起動
  node index.js -t sse -p 3000                     # ポート3000でSSEトランスポートで起動
  node index.js -t sse -p 3000 -e /api/sse         # カスタムエンドポイントでSSEトランスポートで起動
  node index.js -t streamable -p 3001 -e /stream   # カスタムエンドポイントでストリーミング可能なトランスポートで起動

開発

前提条件

• Node.jsバージョン >= 22.7.5

ビルド

npm run build

開発モード（自動再構築）

npm run watch

テスト

# チャート生成のテスト
npm run test-tool

# デバッグ用のMCPインスペクターを実行
npm run inspector

デバッグ

MCPサーバーはstdioを介して通信するため、デバッグは困難な場合があります。開発にはMCPインスペクターを使用します。

npm run inspector

AIエディタでのテスト

AIエディタでMCPサーバーをテストするには、以下の設定を使用します。

{
  "mcpServers": {
    "vchart-mcp-server": {
      "command": "node",
      "args": ["/Users/path/to/your/project/vchart-mcp-server/build/index.js"]
    }
  }
}

環境変数

• VIMD_IMAGE_SERVER - カスタム画像生成サーバーのURL（デフォルト: https://vmind.visactor.com/export）

プライベートデプロイ

現在、vchart-mcp-serverによって生成される画像とHTMLは https://vmind.visactor.com/export を介して生成されています。プライベートデプロイの場合は、VIMD_IMAGE_SERVER 環境変数を設定して独自の画像生成サーバーを指定します。

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

画像生成サービスは https://github.com/VisActor/vchart-mcp-server-export を参照してプライベートでデプロイできます。

📄 ライセンス

MITライセンス

貢献

貢献は大歓迎です！問題やプルリクエストを自由に提出してください。

関連プロジェクト

• VChart - 基盤となるビジュアライゼーションライブラリ
• Model Context Protocol - プロトコル仕様