DOCSEARCHbyAlgolia
Submit Docs

MCP Server Chart

repository·main·Indexed 26 days ago

https://github.com/antvis/mcp-server-chart

A TypeScript-based Model Context Protocol (MCP) server that enables AI models to generate over 26 types of charts and visualizations using the AntV library. It supports various transport protocols including stdio, SSE, and streamable, and can be integrated into AI IDEs like Claude, VSCode, Cline, and Cursor. The server provides tools for a wide range of visualizations, from standard bar and line charts to complex network graphs, fishbone diagrams, and geographic maps.

Tokens
6.3K
Snippets
11
Records
37
Agent score
84%

What's inside @antv/mcp-server-chart

  1. Use the chart-visualization skill for automatic chart selection

    main

    If you are using an AI IDE with skill support (such as Claude Code), you can install the chart-visualization skill. This allows the AI to automatically select the best chart type from 25+ options based on your data or description.

    To add the skill, run:

    npx skills add antvis/chart-visualization-skills

  2. Run MCP Server Chart with SSE or Streamable transport

    main

    You can run the server directly by installing it globally and specifying the transport protocol.

    1. Install globally:
    npm install -g @antv/mcp-server-chart
    1. Run with SSE transport (default endpoint: /sse):
    mcp-server-chart --transport sse

    Access at: http://localhost:1122/sse

    1. Run with Streamable transport:
    mcp-server-chart --transport streamable

    Access at: http://localhost:1122/mcp

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

  3. Develop and Run the MCP Server

    main

    Follow these steps to build and run the server from source:

    1. Install dependencies:
      npm install
    2. Build the server:
      npm run build
    3. Start the server:
      • Standard start: npm run start
      • SSE transport: node build/index.js -t sse
      • Streamable transport: node build/index.js -t streamable
    npm install
npm run build
npm run start
# Or for specific transports:
node build/index.js -t sse
node build/index.js -t streamable

  4. Enable Chart Generation Record Tracking

    main

    To view your chart generation records via the Alipay mini program, you must generate a personal SERVICE_ID and add it to your MCP server configuration.

    1. Use the Alipay mini program to generate a service identifier (via the "My Services" page).
    2. Add the SERVICE_ID to your MCP configuration.
    3. Restart your AI client application.

    After successful generation, you can view records in the "My Map" page of the mini program.

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

  5. Deploy MCP Server Chart using Docker

    main

    To deploy using Docker, navigate to the docker directory and use docker-compose.

    cd docker
docker compose up -d

    After deployment, the server is accessible at:

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

  6. Deploy a Private Chart Generation Service

    main

    If you need a private deployment, you can use VIS_REQUEST_SERVER to point to your own chart generation service (e.g., using AntV's GPT-Vis-SSR).

    Service Requirements:

    • Method: POST
    • Parameter: A JSON object passed to the renderer (e.g., { "type": "line", "data": [...] }).
    • Return Format:
      • success: boolean (whether generation succeeded)
      • resultObj: string (the chart image URL)
      • errorMessage: string (error message if success is false)

    Note: Private deployment currently does not support geographic visualization tools: geographic-district-map, geographic-path-map, and geographic-pin-map.

    {
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

  7. Install and configure MCP Server Chart for Desktop Apps

    main

    To use the MCP Server Chart with desktop applications like Claude, VSCode, Cline, Cherry Studio, or Cursor, add the server to your MCP configuration file.

    On macOS:

    {
  "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"]
    }
  }
}

  8. Disable Specific Chart Tools

    main

    Use the DISABLED_TOOLS environment variable to provide a comma-separated list of tool names you wish to disable. This is useful for resolving compatibility issues or limiting functionality.

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

  9. Deploy MCP Server Chart using Docker Compose

    main

    You can deploy the MCP Server Chart using Docker Compose, which provides two service options: sse for SSE transport and streamable for Streamable transport.

    • SSE Service: Exposes port 1123. Maps the local ./sse directory to /mcp-server-chart/sse inside the container.
    • Streamable Service: Exposes port 1122. Maps the local ./streamable directory to /mcp-server-chart/streamable inside the container.

    Both services are configured to restart unless-stopped.

    name: mcp-server-chart
services:
  sse:
    restart: unless-stopped
    build:
      context: ./sse
      dockerfile: Dockerfile
    ports:
      - "1123:1123"
    volumes:
      - ./sse:/mcp-server-chart/sse

  streamable:
    restart: unless-stopped
    build:
      context: ./streamable
      dockerfile: Dockerfile
    ports:
      - "1122:1122"
    volumes:
      - ./streamable:/mcp-server-chart/streamable

  11. Configure VIS_REQUEST_SERVER environment variable

    main

    When deploying via Docker or other environments, you can use the VIS_REQUEST_SERVER environment variable to point the MCP server to a private HTTP service for rendering. This is useful if you are using AntV's GPT-Vis-SSR project to deploy an HTTP service in a private environment. Set the variable to the URL of your rendering service (e.g., http://127.0.0.1:3000/render).

    environment:
  - VIS_REQUEST_SERVER=http://127.0.0.1:3000/render