MCP ECharts

Generate Apache ECharts diagram and chart with AI MCP dynamically. Using for chart generation and data analysis.

✨ Features

• Fully support all features and syntax of ECharts, include data, style, theme and so on.
• Support exporting to png, svg, and option formats, with validation for ECharts to facilitate the model's multi-round output of correct syntax and graphics.
• MinIO Integration, store charts in MinIO object storage and return URLs instead of Base64 data for better performance and sharing capabilities.
• Lightweight, we can install it easily with zero dependence.
• Extremely secure, fully generated locally, without relying on any remote services.

🤖 Usage

Desktop Applications (stdio transport)

To use with Desktop APP, such as Claude, VSCode, Cline, Cherry Studio, and so on, add the MCP server config below. On Mac system:

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

On Window system:

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Also, you can use it on modelscope, glama.ai, smithery.ai or others with HTTP, SSE Protocol.

🚰 Run with SSE or Streamable transport

Install the package globally.

npm install -g mcp-echarts

Run the server with your preferred transport option:

# For SSE transport (default endpoint: /sse)
mcp-echarts -t sse

# For Streamable transport with custom endpoint
mcp-echarts -t streamable

Then you can access the server at:

• SSE transport: http://localhost:3033/sse
• Streamable transport: http://localhost:3033/mcp

🎮 CLI Options

You can also use the following CLI options when running the MCP server. Command options by run cli with -h.

MCP ECharts CLI

Options:
  --transport, -t  Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --port, -p       Specify the port for SSE or streamable transport (default: 3033)
  --endpoint, -e   Specify the endpoint for the transport:
                    - For SSE: default is "/sse"
                    - For streamable: default is "/mcp"
  --help, -h       Show this help message

🗂️ MinIO Configuration (Optional)

For better performance and sharing capabilities, you can configure MinIO object storage to store chart images as URLs instead of Base64 data.

Note

If MinIO is not configured or unavailable, the system automatically falls back to Base64 data output, ensuring compatibility.

We can Integrate with MinIO object storage providers below.

• MinIO: High-performance, S3-compatible object storage. Use MinIO JavaScript Client for direct integration.
• Amazon S3: Use AWS SDK with compatible API endpoint.
• Alibaba Cloud OSS: Use the Alibaba Cloud SDK for OSS services.
• Google Cloud Storage: Integrate using Google Cloud SDK or compatible API.
• Microsoft Azure Blob Storage: Use Azure SDK for Blob storage access.
• Tencent Cloud COS: Use the Tencent Cloud SDK for COS integration.

Also, we can setup MinIO locally for free.

1. Install and start MinIO locally:

   # Download MinIO (macOS example)
   brew install minio/stable/minio
   
   # Start MinIO server
   minio server ~/minio-data --console-address :9001

2. Configure environment variables:

   # Copy the example environment file
   cp .env.example .env
   
   # Edit .env with your MinIO settings
   MINIO_ENDPOINT=localhost
   MINIO_PORT=9000
   MINIO_USE_SSL=false
   MINIO_ACCESS_KEY=minioadmin
   MINIO_SECRET_KEY=minioadmin
   MINIO_BUCKET_NAME=mcp-echarts

🔨 Development

Install dependencies:

npm install

Build the server:

npm run build

Start the MCP server:

npm run start

🧑🏻‍💻 Contributors

• lyw405: Supports 15+ charting MCP tool. #2
• 2niuhe: Support MCP with SSE and Streaming HTTP. #17
• susuperli: Use MinIO to save the chart image base64 and return the url. #10
• BQXBQX: Use @napi-rs/canvas instead node-canvas. #3
• hustcc: Initial the repo.

📄 License

MIT@hustcc.