@microcharts/mcp
An MCP server and Vercel AI-SDK toolset for microcharts — let a model find the right
word-sized chart, get exactly how to wire it, and render it to a finished SVG with real alt text.
microcharts is built so a model can write charts. This is how a model calls them: not "emit some grammar and hope
the client renders it," but a tool call that returns the real library's static SVG, honest by construction, with the
generated describeSeries accessible name attached.
- Runs on your machine. stdio server, distributed on npm. Nothing is hosted; no account, no key, no data leaves.
- Works anywhere. The render tool returns self-contained SVG, so a chat surface that can't run React can still show
a real chart.
- Zero setup.
npx @microcharts/mcp — the package brings its own copy of @microcharts/react.
Install
Add it to any MCP client. For Claude Desktop (claude_desktop_config.json) or Cursor (.cursor/mcp.json):
{
"mcpServers": {
"microcharts": {
"command": "npx",
"args": ["-y", "@microcharts/mcp"]
}
}
}
That's it — the client spawns the server over stdio on demand.
find_microchart(question, dataShape?)
Rank the catalog against a plain-language question. Start here when you know the question, not the chart.
find_microchart({ question: "is it trending?" })
→ [{ slug: "sparkline", name: "Sparkline", why: "inline trend", dataShape: "number[]" }, …]
get_microchart(slug)
Everything needed to wire one chart: import paths, its props plus the shared props, data shape, best/avoid guidance, a
copy-runnable example, and sample — that same example as JSON props, ready to pass straight to render_microchart.
get_microchart({ slug: "bullet" })
→ {
staticImport: "@microcharts/react/bullet",
props: [...],
example: { code: "<Bullet value={72} target={80} bands={[50, 90]} title=\"Quota\" />" },
sample: { value: 72, target: 80, bands: [50, 90], title: "Quota" },
…
}
Every chart takes its own data shape — number[] for a sparkline, { label, value }[] for a dot plot,
{ open, high, low, close }[] for OHLC — so sample is the shortest path from "which chart" to "a render that works".
Render to a finished, self-contained SVG plus its generated alt text. Pass the series as data; put other props
(value, target, curve, color, width) in props.
render_microchart({ type: "sparkline", data: [132, 148, 141, 165, 159, 182] })
→ {
svg: "<svg …><style>…</style>…</svg>",
summary: "Trending up 38%. Range 132 to 182. Last value 182.",
mimeType: "image/svg+xml", width: 80, height: 20
}
format is "svg" (default, styles embedded — drops into any surface) or "bare" (no CSS, for pages that already load
@microcharts/react/styles.css).
Missing or wrong-shaped data is rejected by name rather than passed through to React, so a caller gets
"dot-plot" needs \data`. Data shape: { label, value }[]. Call get_microchart("dot-plot") for a ready-to-render
sample.` instead of a stack trace. Oversized payloads are refused too — a microchart is a word-sized mark.
It also exposes two resources: microcharts://catalog (every chart + metadata) and microcharts://agent-setup (the
prompt for wiring microcharts into a codebase).
Use it from the Vercel AI SDK
The same three capabilities ship as AI-SDK tools (on the /ai-sdk subpath, so the core never pulls in ai):
import { microchartsTools } from "@microcharts/mcp/ai-sdk";
import { streamText } from "ai";
const result = streamText({
model,
tools: microchartsTools,
prompt: "Summarise this quarter and show the revenue trend as a chart.",
});
The functions are exported directly too — findChart, getChart, renderChart — if you want them without the tool
wrapper.
Versioning
This server bundles the chart catalog and renders with @microcharts/react (installed as a normal dependency). Its
version tracks its own changes; a compatible library is pulled in automatically. The library version a given snapshot
was cut from is on the microcharts://catalog resource.
Links
MIT