Charts MCP

🚀 MCP Server Chart

This is a Model Context Protocol (MCP) server for generating charts using AntV. It enables both chart generation and data analysis. Built with TypeScript, it offers chart - generation capabilities and can be used with MCP tools to create various chart types. Additionally, it's available on Dify.

🚀 Quick Start

To use the MCP Server Chart, you can follow different methods based on your environment.

Desktop APP Usage

• Mac system: Add the following MCP server config:

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

• Windows system: Use the following config:

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

Online Platform Usage

You can also use it on platforms like aliyun, modelscope, glama.ai, smithery.ai with HTTP, SSE Protocol.

✨ Features

Currently, it supports over 25 types of charts:

1. generate_area_chart: Generate an area chart to display data trends under a continuous independent variable, facilitating the observation of overall data trends.
2. generate_bar_chart: Generate a bar chart for comparing values across different categories, suitable for horizontal comparisons.
3. generate_boxplot_chart: Generate a boxplot to show data distribution, including median, quartiles, and outliers.
4. generate_column_chart: Generate a column chart for comparing values across different categories, ideal for vertical comparisons.
5. generate_district_map: Generate a district - map to show administrative divisions and data distribution.
6. generate_dual_axes_chart: Generate a dual - axes chart to display the relationship between two variables with different units or ranges.
7. generate_fishbone_diagram: Generate a fishbone diagram (Ishikawa diagram) to identify and display the root causes of a problem.
8. generate_flow_diagram: Generate a flowchart to show the steps and sequence of a process.
9. generate_funnel_chart: Generate a funnel chart to display data loss at different stages.
10. generate_histogram_chart: Generate a histogram to show data distribution by dividing it into intervals and counting data points in each interval.
11. generate_line_chart: Generate a line chart to display data trends over time or another continuous variable.
12. generate_liquid_chart: Generate a liquid chart to show data proportions, visually representing percentages as water - filled spheres.
13. generate_mind_map: Generate a mind - map to display thought processes and hierarchical information.
14. generate_network_graph: Generate a network graph to show relationships and connections between nodes.
15. generate_organization_chart: Generate an organizational chart to show the structure of an organization and personnel relationships.
16. generate_path_map: Generate a path - map to show route planning results for POIs.
17. generate_pie_chart: Generate a pie chart to show data proportions, dividing it into sectors representing percentages.
18. generate_pin_map: Generate a pin - map to show the distribution of POIs.
19. generate_radar_chart: Generate a radar chart to comprehensively display multi - dimensional data.
20. generate_sankey_chart: Generate a sankey chart to show data flow and volume.
21. generate_scatter_chart: Generate a scatter plot to show the relationship between two variables.
22. generate_treemap_chart: Generate a treemap to show hierarchical data.
23. generate_venn_chart: Generate a venn diagram to show relationships between sets.
24. generate_violin_chart: Generate a violin plot to show data distribution in more detail.
25. generate_word_cloud_chart: Generate a word - cloud to show word frequencies in textual data.

⚠️ Important Note

The above geographic visualization chart generation tool uses AMap service and currently only supports map generation within China.

📦 Installation

Run with SSE or Streamable transport

Direct Run

1. Install the package globally:

npm install -g @antv/mcp-server-chart

2. 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

You can then access the server at:

• SSE transport: http://localhost:1122/sse
• Streamable transport: http://localhost:1122/mcp

Docker Deploy

1. Enter the docker directory:

cd docker

2. Deploy using docker - compose:

docker compose up -d

You can then access the server at:

• SSE transport: http://localhost:1123/sse
• Streamable transport: http://localhost:1122/mcp

💻 Usage Examples

Basic Usage

The basic usage is as described in the "Quick Start" section, where you configure the MCP server according to your system and requirements.

Advanced Usage

You can use the CLI options and environment variables to customize the behavior of the MCP server.

📚 Documentation

🎮 CLI Options

You can use the following CLI options when running the MCP server. Run the cli with -h to view command options.

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

⚙️ Environment Variables

📠 Private Deployment

MCP Server Chart provides a free chart generation service by default. For private deployment, you can use VIS_REQUEST_SERVER to customize your 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 deploy an HTTP service using AntV's project GPT - Vis - SSR in a private environment and pass the URL address through the VIS_REQUEST_SERVER environment variable.

⚠️ Important Note

The private deployment solution currently does not support geographic visualization chart generation, including 3 tools: geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Generate Records

By default, users need to save the results themselves. However, a service for viewing chart generation records is provided. You need to generate a service identifier and configure it.

1. Use Alipay to scan and open the mini - program to generate a personal service identifier (click the "My" menu, enter the "My Services" page, click the "Generate" button, and click the "Copy" button after success).
2. Add the SERVICE_ID environment variable to the MCP server configuration. For example, the Mac configuration is as follows (for Windows systems, just add the env variable):

{
  "mcpServers": {
    "AntV Map": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ],
      "env": {
        "SERVICE_ID": "***********************************"
      }
    }
  }
}

After updating the MCP Server configuration, restart your AI client application and check if you have successfully started and connected to the MCP Server. Then try to generate the map again. After successful generation, you can view your map generation records on the "My Map" page of the mini - program.

🎛️ Tool Filtering

You can disable specific chart generation tools using the DISABLED_TOOLS environment variable. This is useful when certain tools have compatibility issues with your MCP client or when you want to limit the available functionality.

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ],
      "env": {
        "DISABLED_TOOLS": "generate_fishbone_diagram,generate_mind_map"
      }
    }
  }
}

Available tool names for filtering See the ✨ Features.

🔧 Technical Details

The MCP Server Chart is a TypeScript - based MCP server. It interacts with the AntV library to generate various types of charts. The server can be configured using CLI options and environment variables to support different transport protocols and endpoints. It also provides functions for private deployment, record generation, and tool filtering.

🔨 Development

1. Install dependencies:

npm install

2. Build the server:

npm run build

3. Start the MCP server:

npm run start

4. Start the MCP server with SSE transport:

node build/index.js -t sse

5. Start the MCP server with Streamable transport:

node build/index.js -t streamable

📄 License

MIT@AntV.