How to add MCP Server Chart to Windsurf

Generate 26+ chart types and data visualizations using AntV, for chart generation and data analysis. Paste the config into ~/.codeium/windsurf/mcp_config.json and restart Windsurf.

Last updated June 14, 2026 · 4.2k★ · stdio · no auth · official

Windsurf config for MCP Server Chart

npx -y @antv/mcp-server-chart

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

Setup steps

1Open Windsurf → Cascade → the hammer/MCP icon → Configure (or edit ~/.codeium/windsurf/mcp_config.json).
2Paste the MCP Server Chart config below.
3Fill in placeholder secrets, then save.
4Click Refresh in the MCP panel.
5MCP Server Chart's tools become available to Cascade.

Before you start

Node.js with npx available (or global npm install of @antv/mcp-server-chart)
An MCP-compatible client (Claude Desktop, Cursor, VSCode, Cline, Cherry Studio, etc.)
Optional: SERVICE_ID for chart generation record tracking
Optional: VIS_REQUEST_SERVER for private chart rendering deployment

What MCP Server Chart can do in Windsurf

generate_area_chart

Generate an area chart to display the trend of data under a continuous independent variable.

generate_bar_chart

Generate a bar chart to compare values across different categories (horizontal comparison).

generate_boxplot_chart

Generate a boxplot to display data distribution including median, quartiles, and outliers.

generate_column_chart

Generate a column chart to compare values across different categories (vertical comparison).

generate_district_map

Generate a district-map to show administrative divisions and data distribution.

generate_dual_axes_chart

Generate a dual-axes chart to display the relationship between two variables with different units or ranges.

generate_fishbone_diagram

Generate a fishbone (Ishikawa) diagram to identify and display the root causes of a problem.

generate_flow_diagram

Generate a flowchart to display the steps and sequence of a process.

Security

By default, chart data is sent to AntV's hosted rendering service at https://antv-studio.alipay.com/api/gpt-vis to generate chart image URLs. For sensitive data, deploy a private rendering service with GPT-Vis-SSR and set the VIS_REQUEST_SERVER environment variable. Geographic visualization tools (district-map, path-map, pin-map) use the AMap service and only support maps within China; they are not available in private deployments.

MCP Server Chart + Windsurf FAQ

Where is the Windsurf config file?

Windsurf reads MCP servers from ~/.codeium/windsurf/mcp_config.json. Paste the MCP Server Chart config there under the "mcpServers" key and restart the client.

Is MCP Server Chart safe to use with Windsurf?

Where are my charts rendered?

By default, data is sent to AntV's free hosted service at https://antv-studio.alipay.com/api/gpt-vis, which returns a chart image URL. You can self-host the renderer with GPT-Vis-SSR and point the server at it via the VIS_REQUEST_SERVER environment variable.

Which transports are supported?

stdio (default), SSE, and Streamable HTTP. Run with --transport sse or --transport streamable; the default port is 1122 (SSE at /sse, Streamable at /mcp).

Can I disable specific chart tools?

Yes. Set the DISABLED_TOOLS environment variable to a comma-separated list of tool names, e.g. generate_fishbone_diagram,generate_mind_map.

View repo Full MCP Server Chart page