Allows running the VChart MCP server as a standalone Node.js application with SSE or Streamable transport, enabling integration with web-based AI applications beyond desktop clients.
A Model Context Protocol (MCP) server for the @visactor/vchart that enables AI assistants to generate interactive charts and visualizations.
English | 简体中文
Table of Contents
- Features
- Usage
- Running with SSE or Streamable Transport
- Example Usage in AI Conversations
- Development
- Environment Variables
- Private Deployment
- License
- Contributing
- Related Projects
Features
Chart Output Formats
Each chart can be generated in multiple formats:
- Image - PNG/JPG image format for embedding (default)
- Spec - VChart spec object for programmatic use
- HTML - Interactive HTML chart for web display
Common Parameters Supported by All Charts
Parameter | Description | Type/Options | Default |
---|---|---|---|
output | Output format | "spec" | "image" | "html" | "image" |
width | Chart width | Number | 500 |
height | Chart height | Number | 500 |
title | Chart title | String | Optional |
subTitle | Chart subtitle | String | Optional |
titleOrient | Title position | String | Optional |
chartTheme | Chart theme | String | Optional |
background | Background color | String | Optional |
colors | Color palette | Array/String | Optional |
Supported Chart Types and Tools
generate_cartesian_chart
Generates Cartesian coordinate system charts, including area, bar, line, waterfall, funnel, and animated ranking bar charts.
Parameter | Description | Type | Required |
---|---|---|---|
dataTable | Data object array | Array | Yes |
chartType | Chart type | "line" | "area" | "bar" | "waterfall" | "funnel" | "ranking_bar" | Yes |
xField | X axis field name | string | Yes |
yField | Y axis field name | string | Yes |
colorField | Color mapping field | string | Optional |
timeField | Time field for animated ranking bar chart | string | Optional |
stackOrPercent | Stack or percent mode | "stack" | "percent" | Optional |
transpose | Display bar chart horizontally (as bar chart) | boolean | Optional |
xAxisType | X axis type | "band" | "linear" | Optional |
xAxisOrient | X axis position | "top" | "bottom" | Optional |
xAxisTitle | X axis title | string | Optional |
xAxisHasGrid | Show X axis grid lines | boolean | Optional |
xAxisHasLabel | Show X axis labels | boolean | Optional |
xAxisHasTick | Show X axis ticks | boolean | Optional |
yAxisType | Y axis type | "band" | "linear" | Optional |
yAxisOrient | Y axis position | "left" | "right" | Optional |
yAxisTitle | Y axis title | string | Optional |
yAxisHasGrid | Show Y axis grid lines | boolean | Optional |
yAxisHasLabel | Show Y axis labels | boolean | Optional |
yAxisHasTick | Show Y axis ticks | boolean | Optional |
generate_polar_chart
Generates polar coordinate system charts, including radar, rose, and pie charts.
Parameter | Description | Type/Options | Required |
---|---|---|---|
dataTable | Data object array | Array | Yes |
chartType | Chart type | "radar" | "rose" | "pie" | Yes |
categoryField | Category field name | string | Yes |
valueField | Value field name | string | Yes |
colorField | Color mapping field | string | Optional |
angleAxisTitle | Angle axis title | string | Optional |
angleAxisHasGrid | Show angle axis grid lines | boolean | Optional |
angleAxisHasLabel | Show angle axis labels | boolean | Optional |
angleAxisHasTick | Show angle axis ticks | boolean | Optional |
angleAxisType | Angle axis type | "band" | "linear" | Optional |
radiusAxisTitle | Radius axis title | string | Optional |
radiusAxisHasGrid | Show radius axis grid lines | boolean | Optional |
radiusAxisHasLabel | Show radius axis labels | boolean | Optional |
radiusAxisHasTick | Show radius axis ticks | boolean | Optional |
radiusAxisType | Radius axis type | "band" | "linear" | Optional |
generate_hierarchical_chart
Generates hierarchical charts, including treemap, circle packing, and sunburst charts.
Parameter | Description | Type/Options | Required |
---|---|---|---|
dataTable | Data object array | Array | Yes |
chartType | Chart type | "sunburst" | "treemap" | "circle_packing" | Yes |
colorField | Color mapping field | string | Yes |
valueField | Value mapping field | string | Yes |
generate_progress_chart
Generates progress charts, including circular, linear, gauge, and liquid charts.
Parameter | Description | Type/Options | Required |
---|---|---|---|
dataTable | Data object array | Array | Yes |
chartType | Chart type | "linear_progress" | "circular_progress" | "gauge" | "liquid" | Yes |
valueField | Progress value field name | string | Yes |
colorField | Color mapping field (optional for liquid, required otherwise) | string | Optional |
generate_wordcloud_venn
Generates word cloud or Venn diagrams, suitable for displaying keywords and frequencies in text data.
Parameters:
Parameter | Description | Type/Options | Required |
---|---|---|---|
dataTable | Data object array | Array | Yes |
chartType | Chart type | "wordcloud" | "venn" | Yes |
colorField | Text field or Venn set field name | string | Yes |
valueField | Value field name (required for Venn) | string | Optional |
generate_range_column_chart
Generates horizontal range bar charts, suitable for displaying data ranges and comparisons.
Parameter | Description | Type/Options | Required |
---|---|---|---|
dataTable | Data object array | any[] | Yes |
xField | Category field name | string | Yes |
yField | Value field names | [string, string] | Yes |
colorField | Color mapping field | string | Optional |
xAxisType | X axis type | "band" | "linear" | Optional |
xAxisOrient | X axis position | "top" | "bottom" | Optional |
xAxisTitle | X axis title | string | Optional |
xAxisHasGrid | Show X axis grid lines | boolean | Optional |
xAxisHasLabel | Show X axis labels | boolean | Optional |
xAxisHasTick | Show X axis ticks | boolean | Optional |
yAxisType | Y axis type | "band" | "linear" | Optional |
yAxisOrient | Y axis position | "left" | "right" | Optional |
yAxisTitle | Y axis title | string | Optional |
yAxisHasGrid | Show Y axis grid lines | boolean | Optional |
yAxisHasLabel | Show Y axis labels | boolean | Optional |
yAxisHasTick | Show Y axis ticks | boolean | Optional |
generate_dual_axis_chart
Combination chart with two Y axes, for comparing two metrics with different units.
Parameter | Description | Type/Options | Required |
---|---|---|---|
dataTable | Data object array | any[] | Yes |
xField | X axis field name | string | Yes |
yField | Two Y axis field names | [string, string] | Yes |
colorField | Color mapping field | string | Optional |
stackOrPercent | Stack or percent mode | "stack" | "percent" | Optional |
xAxisOrient | X axis position | "top" | "bottom" | Optional |
xAxisTitle | X axis title | string | Optional |
xAxisHasGrid | Show X axis grid lines | boolean | Optional |
xAxisHasLabel | Show X axis labels | boolean | Optional |
xAxisHasTick | Show X axis ticks | boolean | Optional |
leftYAxisTitle | Left Y axis title | string | Optional |
leftYAxisHasGrid | Left Y axis grid lines | boolean | Optional |
leftYAxisHasLabel | Left Y axis labels | boolean | Optional |
leftYAxisHasTick | Left Y axis ticks | boolean | Optional |
rightYAxisTitle | Right Y axis title | string | Optional |
rightYAxisHasGrid | Right Y axis grid lines | boolean | Optional |
rightYAxisHasLabel | Right Y axis labels | boolean | Optional |
rightYAxisHasTick | Right Y axis ticks | boolean | Optional |
generate_scatter_chart
Displays the relationship between two variables, suitable for discovering patterns and outliers.
Parameter | Description | Type/Options | Required |
---|---|---|---|
dataTable | Data object array | any[] | Yes |
xField | X axis field name | string | Yes |
yField | Y axis field name | string | Yes |
colorField | Color mapping field | string | Optional |
sizeField | Size mapping field | string | Optional |
xAxisType | X axis type | "band" | "linear" | Optional |
xAxisOrient | X axis position | "top" | "bottom" | Optional |
xAxisTitle | X axis title | string | Optional |
xAxisHasGrid | Show X axis grid lines | boolean | Optional |
xAxisHasLabel | Show X axis labels | boolean | Optional |
xAxisHasTick | Show X axis ticks | boolean | Optional |
yAxisType | Y axis type | "band" | "linear" | Optional |
yAxisOrient | Y axis position | "left" | "right" | Optional |
yAxisTitle | Y axis title | string | Optional |
yAxisHasGrid | Show Y axis grid lines | boolean | Optional |
yAxisHasLabel | Show Y axis labels | boolean | Optional |
yAxisHasTick | Show Y axis ticks | boolean | Optional |
generate_sankey_chart
Generates Sankey diagrams.
Parameter | Description | Type | Required |
---|---|---|---|
dataTable | Data object array | any[] | Yes |
sourceField | Source node field | string | Yes |
targetField | Target node field | string | Yes |
valueField | Value field | string | Yes |
generate_heatmap_chart
Generates heatmaps, suitable for displaying data density and distribution.
Parameter | Description | Type/Options | Required |
---|---|---|---|
dataTable | Data object array | any[] | Yes |
xField | X axis field name | string | Yes |
yField | Y axis field name | string | Yes |
sizeField | Value field name | string | Yes |
xAxisType | X axis type | "band" | "linear" | Optional |
xAxisOrient | X axis position | "top" | "bottom" | Optional |
xAxisTitle | X axis title | string | Optional |
xAxisHasGrid | Show X axis grid lines | boolean | Optional |
xAxisHasLabel | Show X axis labels | boolean | Optional |
xAxisHasTick | Show X axis ticks | boolean | Optional |
yAxisType | Y axis type | "band" | "linear" | Optional |
yAxisOrient | Y axis position | "left" | "right" | Optional |
yAxisTitle | Y axis title | string | Optional |
yAxisHasGrid | Show Y axis grid lines | boolean | Optional |
yAxisHasLabel | Show Y axis labels | boolean | Optional |
yAxisHasTick | Show Y axis ticks | boolean | Optional |
Usage
To use in desktop applications (such as Trae, Claude, VSCode, Cline, Cherry Studio, Cursor, etc.), add the following MCP server configuration:
MacOS
Windows
Installing via Smithery
To install vchart-mcp-server for Claude Desktop automatically via Smithery:
Running with SSE or Streamable Transport
Install and Start
Install @visactor/vchart-mcp-server
globally:
Start the server:
Then you can access the server at:
- SSE transport:
http://localhost:3001/sse
- Streamable transport:
http://localhost:3001/streamable
Other CLI Options
Example Usage in AI Conversations
Once configured, you can ask your AI assistant to create charts:
"Create an area chart showing monthly sales data"
"Generate a dual-axis chart comparing revenue and user growth"
"Show me an interactive HTML bar chart of quarterly performance"
"Create a pie chart of product sales share"
"Draw a scatter plot of height and weight"
"Create a radar chart for team skill assessment"
"Generate a Sankey diagram showing data flow"
"Create a heatmap showing data distribution"
Development
Prerequisites
- Node.js version >= 22.7.5
Build
Development Mode (Auto Rebuild)
Testing
Debugging
Since the MCP server communicates via stdio, debugging can be challenging. Use MCP Inspector for development:
Testing in AI Editors
To test the MCP server in an AI editor, use the following configuration:
Environment Variables
VIMD_IMAGE_SERVER
- Custom image generation server URL (default: https://vmind.visactor.com/export)
Private Deployment
Currently, images and HTML generated by vchart-mcp-server are produced via https://vmind.visactor.com/export. For private deployment, set the VIMD_IMAGE_SERVER
environment variable to specify your own image generation server.
License
MIT License
Contributing
Contributions are welcome! Please feel free to submit issues and pull requests.
Related Projects
- VChart - Underlying visualization library
- Model Context Protocol - Protocol specification
Tools
A Model Context Protocol (MCP) server for the @visactor/vchart that enables AI assistants to generate interactive charts and visualizations.
Related MCP Servers
- AsecurityFlicenseAqualityAn MCP server that allows AI models to create data visualizations using Vega-Lite syntax by providing tools to save data tables and generate visualizations from them.Last updated -22Python
- TypeScriptMIT License
- -securityAlicense-qualityModel Context Protocol (MCP) server that provides AI assistants with advanced web research capabilities, including Google search integration, intelligent content extraction, and multi-source synthesis.Last updated -283TypeScriptMIT License
- AsecurityFlicenseAqualityThis Model Context Protocol (MCP) server provides powerful visualization tools using QuickChart.io APIs. With this MCP, AI assistants can create charts, diagrams, barcodes, QR codes, word clouds, tables, and more.Last updated -1218TypeScript