Skip to content

antvis/mcp-server-chart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

49 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

MCP Server Chart build npm Version smithery badge npm License

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.

โœจ Features

Now 20+ charts supported.

mcp-server-chart preview

  1. generate_area_chart: Generate an area chart, used to display the trend of data under a continuous independent variable, allowing observation of overall data trends.
  2. generate_bar_chart: Generate a bar chart, used to compare values across different categories, suitable for horizontal comparisons.
  3. generate_boxplot_chart: Generate a boxplot, used to display the distribution of data, including the median, quartiles, and outliers.
  4. generate_column_chart: Generate a column chart, used to compare values across different categories, suitable for vertical comparisons.
  5. generate_dual_axes_chart: Generate a dual-axes chart, used to display the relationship between two variables with different units or ranges.
  6. generate_fishbone_diagram: Generate a fishbone diagram, also known as an Ishikawa diagram, used to identify and display the root causes of a problem.
  7. generate_flow_diagram: Generate a flowchart, used to display the steps and sequence of a process.
  8. generate_funnel_chart: Generate a funnel chart, used to display data loss at different stages.
  9. generate_histogram_chart: Generate a histogram, used to display the distribution of data by dividing it into intervals and counting the number of data points in each interval.
  10. generate_line_chart: Generate a line chart, used to display the trend of data over time or another continuous variable.
  11. generate_liquid_chart: Generate a liquid chart, used to display the proportion of data, visually representing percentages in the form of water-filled spheres.
  12. generate_mind_map: Generate a mind-map, used to display thought processes and hierarchical information.
  13. generate_network_graph: Generate a network graph, used to display relationships and connections between nodes.
  14. generate_organization_chart: Generate an organizational chart, used to display the structure of an organization and personnel relationships.
  15. generate_pie_chart: Generate a pie chart, used to display the proportion of data, dividing it into parts represented by sectors showing the percentage of each part.
  16. generate_radar_chart: Generate a radar chart, used to display multi-dimensional data comprehensively, showing multiple dimensions in a radar-like format.
  17. generate_sankey_chart: Generate a sankey chart, used to display data flow and volume, representing the movement of data between different nodes in a Sankey-style format.
  18. generate_scatter_chart: Generate a scatter plot, used to display the relationship between two variables, showing data points as scattered dots on a coordinate system.
  19. generate_treemap_chart: Generate a treemap, used to display hierarchical data, showing data in rectangular forms where the size of rectangles represents the value of the data.
  20. generate_venn_chart: Generate a venn diagram, used to display relationships between sets, including intersections, unions, and differences.
  21. generate_violin_chart: Generate a violin 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.
  22. generate_word_cloud_chart: Generate a word-cloud, used to display the frequency of words in textual data, with font sizes indicating the frequency of each word.

๐Ÿค– Usage

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.

๐Ÿšฐ Run with SSE or Streamable transport

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

๐ŸŽฎ CLI Options

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

๐Ÿ“  Private Deployment

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 When success = false, return the error message.

๐Ÿ”จ Development

Install dependencies:

npm install

Build the server:

npm run build

Start the MCP server:

npm run start

๐Ÿ“„ License

MIT@AntV.

About

๐Ÿค– A visualization Model Context Protocol server for generating 20+ visual charts using @antvis.

Topics

Resources

License

Stars

Watchers

Forks