AntV Chart + Windsurf Editor: Complete MCP Integration

AntV Chart is a MCP server that A Model Context Protocol server for generating 15+ visual charts using AntV..

When integrated with Windsurf Editor, you can:

• Access AntV Chart functionality through Windsurf Editor

This guide provides step-by-step instructions to set up AntV Chart in Windsurf Editor, including configuration, examples, and troubleshooting.

What You'll Achieve

After completing this setup:

• AntV Chart will be fully integrated and operational
• You can use AntV Chart tools directly in Windsurf Editor
• All AntV Chart capabilities will be available for your workflows

Prerequisites

Before starting, ensure you have:

• Windsurf Editor installed and configured
• Compatible operating system (Desktop App)

Installation

Step 1: Install AntV Chart

Configuration

Step 2: Configure Windsurf Editor

1. Locate your configuration file:

   • Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json
   • macOS: ~/.codeium/windsurf/mcp_config.json
   • Linux: ~/.codeium/windsurf/mcp_config.json

2. Add server configuration:

{
  "mcpServers": {
    "antv-chart": {
      "command": "antv chart",
      "args": []
    }
  }
}

Note: If AntV Chart requires environment variables, add them to the server configuration:
"env": {
  
}

3. Restart Windsurf Editor

Completely quit and restart Windsurf Editor to load the new configuration.

Examples

Once configured, you can use AntV Chart in Windsurf Editor:

Testing Your Setup

1. Launch Windsurf Editor
2. Verify AntV Chart is available in the tools list
3. Test basic AntV Chart functionality

Troubleshooting

Common Issues

Tools Not Appearing

Symptoms: Cascade does not see new tools, Hammer icon missing

Cause: Configuration syntax error or server failed to start.

Solution:

• Check the JSON configuration for syntax errors.
• Verify the command (e.g., npx, python) is in your system PATH.
• Check Windsurf logs for MCP connection errors.

Environment Variables

Symptoms: Authentication failed, Permission denied

Cause: Missing API keys in configuration.

Solution:

• Ensure env block is correctly defined inside the server config.
• Restart Windsurf after changing environment variables.

AntV Chart not appearing in Windsurf Editor

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

• Verify configuration syntax
• Check AntV Chart installation
• Restart Windsurf Editor
• Check logs for error messages

Next Steps

Now that AntV Chart is integrated with Windsurf Editor:

• Explore all AntV Chart capabilities through Windsurf Editor
• Check out other MCP servers that work with Windsurf Editor
• Join the MCP community for tips and support
• Consider contributing to AntV Chart development

Need Help?

• Search for AntV Chart documentation
• Check the Windsurf Editor MCP guide
• Join the MCP community discussions