microcharts

An MCP server and Vercel AI-SDK toolset formicrocharts— let a modelfindthe right word-sized chart,getexactly how to wire it, andrenderit to a finished SVG with real alt text.

{ "mcpServers": { "microcharts": { "command": "npx", "args": ["-y", "@microcharts/mcp"] } } }

That's it — the client spawns the server over stdio on demand.

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[]" }, …]

Everything needed to wire one chart: import paths, its props plus the shared props, data shape, best/avoid guidance, a copy-runnable example, andsample— that same example as JSON props, ready to pass straight torender_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 — sosampleis the shortest path from "which chart" to "a render that works".

render_microchart(type, data?, props?, format?)

Render to a finished, self-contained SVG plus its generated alt text. Pass the series asdata; put other props (value,target,curve,color,width) inprops.

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 }

formatis"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) andmicrocharts://agent-setup(the prompt for wiring microcharts into a codebase).

The same three capabilities ship as AI-SDK tools (on the/ai-sdksubpath, so the core never pulls inai):

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.

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 themicrocharts://catalogresource.

- Docs:https://microcharts.dev/docs/mcp
- Library:@microcharts/react
- Source:https://github.com/ganapativs/microcharts/tree/main/packages/mcp

Build and deploy full-stack Next.js apps with 98 tools for React, AWS, and MongoDB