Echarts MCP

🚀 ECharts MCP Server

A Model Context Protocol (MCP) server that generates beautiful chart images from ECharts configurations.

🚀 Quick Start

This is a Model Context Protocol (MCP) server that can generate stunning chart images based on ECharts configurations. You can quickly get started by following the installation and usage steps below.

✨ Features

• 🎨 Generate high - quality chart images from ECharts configurations.
• 🖼️ Support various chart types, such as bar, line, pie, scatter, etc.
• 📐 Customize the dimensions (width/height) of the chart.
• 🎯 Easily integrate with AI assistants via MCP.

⚙️ Configuration

Configure in the .cursor/mcp.json file as follows:

{
  "mcpServers": {
    "echarts-mcp": {
      "command": "npx",
      "args": ["echarts-mcp"]
    }
  }
}

📦 Installation

If you want to run from source, follow these steps:

# Clone the repository
git clone https://github.com/w2xi/echarts-mcp.git
cd echarts-mcp

# Install dependencies
npm install

# Run the server
npm start

Then configure your MCP client:

{
  "mcpServers": {
    "echarts-mcp": {
      "command": "node",
      "args": ["/path/to/echarts-mcp/cli.js"],
      "env": {}
    }
  }
}

💻 Usage Examples

Basic Usage

Once configured, you can use the MCP server in your AI assistant by requesting chart generation. Here are some example prompts:

• "Generate a bar chart showing sales data for the last 6 months"
• "Create a pie chart displaying market share distribution"
• "Make a line chart with temperature data over time"

Tool Parameters

• width: Chart width in pixels (e.g., 1000).
• height: Chart height in pixels (e.g., 500).
• echarts: ECharts configuration object as string.

Example ECharts Configuration

{
  backgroundColor: '#fff',
  title: {
    text: 'Monthly Sales Data'
  },
  tooltip: {},
  legend: {
    data: ['Sales']
  },
  xAxis: {
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: {},
  series: [{
    name: 'Sales',
    type: 'bar',
    data: [120, 200, 150, 80, 70, 110]
  }]
}

🔧 Technical Details

Scripts

• npm start: Start the MCP server.
• npm test: Run test charts.
• npm run inspect: Inspect the MCP server with debugging tools.

Dependencies

• ECharts: Chart generation library.
• Canvas: Server - side canvas rendering.
• MCP SDK: Model Context Protocol implementation.
• Zod: Schema validation.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is under the MIT License.

🔗 Links

• ECharts Documentation
• Model Context Protocol

Made with ❤️ by w2xi