Vchart MCP Server

🚀 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 - 用於網頁展示的交互式 HTML 圖表

所有圖表支持的通用參數

支持的圖表類型和工具

generate_cartesian_chart

生成笛卡爾座標系圖表，包括面積圖、條形圖、折線圖、瀑布圖、漏斗圖和動畫排名條形圖。

generate_polar_chart

生成極座標系圖表，包括雷達圖、玫瑰圖和餅圖。

generate_hierarchical_chart

生成層次結構圖表，包括樹形圖、圓形填充圖和旭日圖。

generate_progress_chart

生成進度圖表，包括圓形進度圖、線性進度圖、儀表盤和液態圖。

generate_wordcloud_venn

生成詞雲或維恩圖，適用於展示文本數據中的關鍵詞和頻率。

generate_range_column_chart

生成水平範圍條形圖，適用於展示數據範圍和比較。

generate_dual_axis_chart

具有兩個 Y 軸的組合圖表，用於比較兩個不同單位的指標。

generate_scatter_chart

展示兩個變量之間的關係，適用於發現模式和異常值。

generate_sankey_chart

生成桑基圖。

generate_heatmap_chart

生成熱力圖，適用於展示數據密度和分佈。

💻 使用示例

AI 對話中的使用示例

配置完成後，你可以要求你的 AI 助手創建圖表： “創建一個顯示月度銷售數據的面積圖”

助手將使用 generate_cartesian_chart 工具，並使用以下參數：
- chartType: "area"
- dataTable: 你的銷售數據
- xField: "month"
- yField: "sales"

“生成一個比較收入和用戶增長的雙軸圖”

助手將使用 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

然後你可以通過以下地址訪問服務器：

• 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                     # 使用 SSE 傳輸在端口 3000 上啟動
  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 Inspector 進行調試
npm run inspector

調試

由於 MCP 服務器通過標準輸入輸出進行通信，調試可能具有挑戰性。可使用 MCP Inspector 進行開發：

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 - 協議規範