x402-dataviz-mcp

x402-dataviz-mcp

A free MCP (Model Context Protocol) server that renders bar, line, and area charts from structured data and returns clean, hand-designed SVG. No API key, no payment, no rate limit games — just an MCP tool any MCP client can call.

This is the open funnel twin of a paid, x402-gated HTTP API:

x402-dataviz-poc.theliminalguy.workers.dev — POST /chart, $0.01 USDC on Base per call via the x402 payment protocol, for production/high-volume or non-MCP (plain HTTP) use. Same renderer, same output, just billed per call instead of free-via-MCP.

Why this exists

The x402 Bazaar (~14,800 agent-payable APIs at time of writing) has zero coverage in "structured data → clean chart image." This MCP server is the free/local half of filling that gap — try it for nothing via MCP; reach for the paid HTTP endpoint when you need it at volume or outside an MCP client.

What it does

One tool, render_chart, takes a chart type + structured data points and returns a rendered SVG string. Rendering is hand-rolled (no headless browser, no native binaries, no heavy charting framework) — just string-built SVG, so it's fast with zero runtime dependency risk.

The design bar is the actual differentiator: a real categorical color palette (validated for colorblind-safety, not eyeballed), considered spacing, thin marks with rounded bar ends, 2px surface gaps between bars, ringed line markers, direct end-labels, and full light/dark theme support — not the default-blue/red/green look of a generic charting library.

Install & run

npx x402-dataviz-mcp

Or add it to an MCP client config (e.g. Claude Desktop's claude_desktop_config.json):

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

Tool: render_chart

Input:

{
  "type": "bar" | "line" | "area",
  "title": "optional string",
  "theme": "light" | "dark",       // defaults to "light"
  "data": [
    { "x": "Q1", "values": { "Revenue": 128000, "Cost": 84000 } },
    { "x": "Q2", "values": { "Revenue": 146500, "Cost": 91200 } }
  ]
}

values can hold one or more named series; series colors are assigned from a fixed, colorblind-validated order (never generated/cycled). A legend renders automatically for 2+ series; a single series needs no legend (the title already names it).

Output: an SVG string (as MCP tool text content) rendering the requested chart.

Local development

npm install
npm run dev      # runs src/index.ts directly on stdio via tsx
npm run build    # compiles to dist/ for the published npm package

When to use the paid HTTP twin instead

Use POST /chart on the paid Worker instead of this MCP server when:

• You're calling from outside an MCP client (plain HTTP, any language).
• You need production/high-volume use and want to pay per call rather than rely on a free tool being available indefinitely.
• Your agent already speaks x402 (e.g. via x402-fetch / x402-axios) and can pay $0.01 USDC on Base per request.

Both routes call the exact same renderChart() function — output is byte-for-byte identical.

License

MIT