AntV Chart Generator MCP server for AI agents

The MCP Server Chart is a TypeScript-based Model Context Protocol (MCP) server that provides powerful chart generation capabilities using AntV. This tool allows you to create over 25 different types of charts through MCP-enabled applications and services.

Getting Started

To use the MCP Server Chart, you'll need to install and configure it with your preferred MCP client application.

Installation Options

Using with Desktop Applications

For desktop applications like Claude, VSCode, Cline, Cherry Studio, or Cursor, add the MCP server configuration to your client.

On Mac:

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

On Windows:

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

Global Installation

You can install the package globally and run it directly:

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

Then run the server:

# For default stdio transport
mcp-server-chart

# For SSE transport
mcp-server-chart --transport sse

# For Streamable transport
mcp-server-chart --transport streamable

Docker Deployment

The server can also be deployed using Docker:

cd docker
docker compose up -d

After deployment, you can access the server at:

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

Configuration Options

CLI Options

The MCP Server Chart supports various command-line options:

Options:
  --transport, -t  Specify protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --host, -h       Specify host (default: localhost)
  --port, -p       Specify port (default: 1122)
  --endpoint, -e   Specify endpoint path (defaults: "/sse" for SSE, "/mcp" for streamable)
  --help, -H       Show help message

Environment Variables

You can customize the behavior using the following environment variables:

Variable	Description	Example
`VIS_REQUEST_SERVER`	Custom chart generation service URL	`https://your-server.com/api/chart`
`SERVICE_ID`	Identifier for chart generation records	`your-service-id-123`
`DISABLED_TOOLS`	Tools to disable (comma-separated)	`generate_fishbone_diagram,generate_mind_map`

Private Deployment

For private deployments, you can configure 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 AntV's project GPT-Vis-SSR to create your own HTTP service, then pass the URL through the VIS_REQUEST_SERVER environment variable.

Saving Generation Records

To save chart generation records:

Generate a personal service identifier using the AntV mini program
Add the SERVICE_ID to your configuration:

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

After configuration, restart your AI client application to apply changes.

Disabling Specific Tools

To disable certain chart generation tools:

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

Available Chart Types

The MCP Server Chart supports over 25 different chart types, including:

Area charts
Bar and column charts
Box plots
District maps
Dual axes charts
Fishbone diagrams
Flow diagrams
Funnel charts
Histograms
Line charts
Liquid charts
Mind maps
Network graphs
Organization charts
Path maps
Pie charts
Pin maps
Radar charts
Sankey charts
Scatter plots
Treemaps
Venn diagrams
Violin plots
Word clouds

Each chart type has a corresponding generation tool that can be invoked through your MCP-enabled application.

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "mcp-server-chart" '{"command":"npx","args":["-y","@antv/mcp-server-chart"]}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

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

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

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

3. Restart Claude Desktop for the changes to take effect