vega-chart-mcp

An MCP server that generates line and bar charts as SVG images using Vega-Lite.

• No external services — renders entirely server-side
• No native dependencies — no node-canvas or similar; works on any Node.js environment including Cloud Run
• Markdown output — returns charts as ![title](data:image/svg+xml;base64,...) so they render directly in chat UIs and markdown renderers

Tools

generate_line_chart

Generates a line chart. Supports multiple series with automatic color assignment and a legend.

{
  "title": "Visibility Index",
  "labels": ["Jan", "Feb", "Mar", "Apr"],
  "datasets": [
    { "label": "wetter.com", "data": [810, 830, 795, 860] },
    { "label": "wetter.de",  "data": [155, 162, 158, 165] }
  ]
}

generate_bar_chart

Generates a grouped bar chart. Multiple datasets are rendered as side-by-side bars.

{
  "title": "Monthly Comparison",
  "labels": ["Q1", "Q2", "Q3"],
  "datasets": [
    { "label": "2025", "data": [120, 135, 128] },
    { "label": "2026", "data": [140, 150, 145] }
  ]
}

Both tools return a Markdown image string:

![Visibility Index](data:image/svg+xml;base64,PHN2ZyB4bWxu...)

Usage with Expert Builder

Deploy as an npm MCP package in the Expert Builder admin UI:

• Package: vega-chart-mcp
• No environment variables required

Once deployed, add the MCP server to any agent. The agent can then call generate_line_chart and generate_bar_chart directly.

Usage with Claude Desktop

Add to your claude_desktop_config.json:

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

Local Development

git clone https://github.com/superseoworld/expert-builder.git
cd expert-builder/mcp-chart-server
npm install
npm run dev

Test via stdin:

echo '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"generate_line_chart","arguments":{"title":"Test","labels":["Jan","Feb","Mar"],"datasets":[{"label":"Series A","data":[100,120,110]}]}}}' \
  | node dist/index.js

License

MIT