A Model Context Protocol server for generating charts using AntV.
This is a TypeScript-based MCP server that provides chart generation capabilities. It allows you to create various types of charts through MCP tools. You can also use it in Dify.
Now 20+ charts supported.
generate_area_chart
: Generate anarea
chart, used to display the trend of data under a continuous independent variable, allowing observation of overall data trends.generate_bar_chart
: Generate abar
chart, used to compare values across different categories, suitable for horizontal comparisons.generate_boxplot_chart
: Generate aboxplot
, used to display the distribution of data, including the median, quartiles, and outliers.generate_column_chart
: Generate acolumn
chart, used to compare values across different categories, suitable for vertical comparisons.generate_dual_axes_chart
: Generate adual-axes
chart, used to display the relationship between two variables with different units or ranges.generate_fishbone_diagram
: Generate afishbone
diagram, also known as an Ishikawa diagram, used to identify and display the root causes of a problem.generate_flow_diagram
: Generate aflowchart
, used to display the steps and sequence of a process.generate_funnel_chart
: Generate afunnel
chart, used to display data loss at different stages.generate_histogram_chart
: Generate ahistogram
, used to display the distribution of data by dividing it into intervals and counting the number of data points in each interval.generate_line_chart
: Generate aline
chart, used to display the trend of data over time or another continuous variable.generate_liquid_chart
: Generate aliquid
chart, used to display the proportion of data, visually representing percentages in the form of water-filled spheres.generate_mind_map
: Generate amind-map
, used to display thought processes and hierarchical information.generate_network_graph
: Generate anetwork
graph, used to display relationships and connections between nodes.generate_organization_chart
: Generate anorganizational
chart, used to display the structure of an organization and personnel relationships.generate_pie_chart
: Generate apie
chart, used to display the proportion of data, dividing it into parts represented by sectors showing the percentage of each part.generate_radar_chart
: Generate aradar
chart, used to display multi-dimensional data comprehensively, showing multiple dimensions in a radar-like format.generate_sankey_chart
: Generate asankey
chart, used to display data flow and volume, representing the movement of data between different nodes in a Sankey-style format.generate_scatter_chart
: Generate ascatter
plot, used to display the relationship between two variables, showing data points as scattered dots on a coordinate system.generate_treemap_chart
: Generate atreemap
, used to display hierarchical data, showing data in rectangular forms where the size of rectangles represents the value of the data.generate_venn_chart
: Generate avenn
diagram, used to display relationships between sets, including intersections, unions, and differences.generate_violin_chart
: Generate aviolin
plot, used to display the distribution of data, combining features of boxplots and density plots to provide a more detailed view of the data distribution.generate_word_cloud_chart
: Generate aword-cloud
, used to display the frequency of words in textual data, with font sizes indicating the frequency of each word.
To use with Desktop APP
, such as Claude, VSCode, Cline, Cherry Studio, Cursor, and so on, add the MCP server config below. On Mac system:
{
"mcpServers": {
"mcp-server-chart": {
"command": "npx",
"args": [
"-y",
"@antv/mcp-server-chart"
]
}
}
}
On Window system:
{
"mcpServers": {
"mcp-server-chart": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"@antv/mcp-server-chart"
]
}
}
}
Also, you can use it on aliyun, modelscope, glama.ai, smithery.ai or others with HTTP, SSE Protocol.
Install the package globally.
npm install -g @antv/mcp-server-chart
Run the server with your preferred transport option:
# For SSE transport (default endpoint: /sse)
mcp-server-chart --transport sse
# For Streamable transport with custom endpoint
mcp-server-chart --transport streamable
Then you can access the server at:
- SSE transport:
http://localhost:1122/sse
- Streamable transport:
http://localhost:1122/mcp
You can also use the following CLI options when running the MCP server. Command options by run cli with -h
.
MCP Server Chart CLI
Options:
--transport, -t Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
--port, -p Specify the port for SSE or streamable transport (default: 1122)
--endpoint, -e Specify the endpoint for the transport:
- For SSE: default is "/sse"
- For streamable: default is "/mcp"
--help, -h Show this help message
MCP Server Chart
provides a free chart generation service by default. For users with a need for private deployment, they can try using VIS_REQUEST_SERVER
to customize their own chart generation service.
{
"mcpServers": {
"mcp-server-chart": {
"command": "npx",
"args": [
"-y",
"@antv/mcp-server-chart"
],
"env": {
"VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
}
}
}
}
You can use AntV's project GPT-Vis-SSR to deploy an HTTP service in a private environment, and then pass the URL address through env VIS_REQUEST_SERVER
.
- Method:
POST
- Parameter: Which will be passed to
GPT-Vis-SSR
for renderring. Such as,{ "type": "line", "data": [{ "time": "2025-05", "value": "512" }, { "time": "2025-06", "value": "1024" }] }
. - Return: The return object of HTTP service.
- success:
boolean
Whether generate chart image successfully. - resultObj:
string
The chart image url. - errorMessage:
string
Whensuccess = false
, return the error message.
- success:
Install dependencies:
npm install
Build the server:
npm run build
Start the MCP server:
npm run start
MIT@AntV.