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](https://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