Vchart MCP Server

vchart-mcp-server

模型上下文协议（MCP）服务器 @visactor/vchart 这使得AI助手能够生成交互式图表和可视化。

 ](https://www.npmjs.com/package/@visactor/vchart-mcp-server) ](https://www.npmjs.com/package/@visactor/vchart-mcp-server) ](https://smithery.ai/server/@visactor/vchart-mcp-server)

英语| 简体中文

目录

• 目录
• 特性

- 图表输出格式 - 所有图表支持的通用参数 - 支持的图表类型和工具 - generate_cartesian_chart - generate_polar_chart - generate_hierarchical_chart - generate_progress_chart - generate_wordcloud_venn - generate_range_column_chart - generate_dual_axis_chart - generate_scatter_chart - generate_sankey_chart - generate_heatmap_chart

• 用法

- MacOS - 视窗 - 通过Smithery安装

• 使用SSE或流式传输运行

- 安装并启动 - 其他CLI选项

• AI对话中的示例用法
• 发展

- 先决条件 - 构建 - 开发模式（自动重建） - 测试 - 调试 - 在AI编辑器中进行测试

• 环境变量
• 私有部署
• 许可证
• 贡献
• 相关项目

特性

图表输出格式

每个图表都可以生成多种格式：

• 图像 -用于嵌入的PNG/JPG图像格式（默认）
• 规格 -用于编程的VChart规范对象
• 超文本标记语言 -用于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

具有两个Y轴的组合图，用于比较具有不同单位的两个指标。

generate_scatter_chart

显示两个变量之间的关系，适用于发现模式和异常值。

generate_sankey_chart

生成Sankey图。

generate_heatmap_chart

生成热图，适用于显示数据密度和分布。

用法

要在桌面应用程序（如Trae、Claude、VSCode、Cline、Cherry Studio、Cursor等）中使用，请添加以下MCP服务器配置：

MacOS

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

视窗

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

通过Smithery安装

通过以下方式自动安装Claude Desktop的vchart mcp服务器 史密瑟里:

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

使用SSE或流式传输运行

安装并启动

安装 @visactor/vchart-mcp-server 全球地：

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

启动服务器：

# For SSE transport (default endpoint: /sse)
mcp-server-chart --transport sse

# For Streamable transport (default endpoint: /streamable)
mcp-server-chart --transport streamable

然后，您可以访问服务器：

• SSE运输： http://localhost:3001/sse
• 可流动运输： http://localhost:3001/streamable

其他CLI选项

Options:
  -t, --transport    Transport type (stdio, sse, streamable) [default: stdio]
  -p, --port 
        Port number for HTTP-based transports [default: 3000]
  -e, --endpoint 
    Endpoint path for HTTP-based transports [default: /message]
  -h, --help               Show this help message

Examples:
  node index.js                                    # Start with stdio transport
  node index.js -t sse -p 3000                     # Start with SSE transport on port 3000
  node index.js -t sse -p 3000 -e /api/sse         # Start with SSE transport on custom endpoint
  node index.js -t streamable -p 3001 -e /stream   # Start with streamable transport on custom endpoint

AI对话中的示例用法

配置后，您可以要求您的AI助手创建图表：

“创建显示月度销售数据的面积图”

The assistant will use the generate_cartesian_chart tool with parameters:
- chartType: "area"
- dataTable: your sales data
- xField: "month"
- yField: "sales"

“生成一个比较收入和用户增长的双轴图”

The assistant will use the generate_dual_axis_chart tool with parameters:
- dataTable: your business data
- xField: "time"
- yField: ["revenue", "userGrowth"]

“显示季度绩效的交互式HTML条形图”

The assistant will use the generate_cartesian_chart tool with parameters:
- chartType: "bar"
- dataTable: your quarterly data
- xField: "quarter"
- yField: "performance"
- output: "html"

“创建产品销售份额饼图”

The assistant will use the generate_polar_chart tool with parameters:
- chartType: "pie"
- dataTable: your sales data
- categoryField: "product"
- valueField: "sales"

“绘制身高和体重的散点图”

The assistant will use the generate_scatter_chart tool with parameters:
- dataTable: your body data
- xField: "height"
- yField: "weight"
- colorField: "gender" (optional)

“为团队技能评估创建雷达图”

The assistant will use the generate_polar_chart tool with parameters:
- chartType: "radar"
- dataTable: your assessment data
- categoryField: "skill"
- valueField: "score"

“生成显示数据流的Sankey图”

The assistant will use the generate_sankey_chart tool with parameters:
- dataTable: your flow data
- sourceField: "from"
- targetField: "to"
- valueField: "amount"

“创建显示数据分布的热图”

The assistant will use the generate_heatmap_chart tool with parameters:
- dataTable: your distribution data
- xField: "x_category"
- yField: "y_category"
- sizeField: "value"

发展

先决条件

• Node.js版本>=22.7.5

构建

npm run build

开发模式（自动重建）

npm run watch

测试

# Test chart generation
npm run test-tool

# Run MCP Inspector for debugging
npm run inspector

调试

由于MCP服务器通过stdio进行通信，调试可能具有挑战性。使用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服务器生成的图像和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": ""
      }
    }
  }
}

图像生成服务可以私下部署，请参考https://github.com/VisActor/vchart-mcp-server-export.

明星历史

许可证

MIT许可证

贡献

欢迎投稿！请随时提交问题和拉取请求。

相关项目

• VChart -基础可视化库
• 模型上下文协议 -协议规范