microcharts — Claude Code MCP server: what it does, how to install
Generates tiny SVG charts with automatic alt summaries directly from natural language. Useful when an agent needs to visualize trends inside markdown or chats.
claude mcp add microcharts -- npx -y @microcharts/mcpWhat microcharts does
The server exposes three primary tools. find_microchart matches chart candidates against user questions, get_microchart outputs component props along with verified payloads, and render_microchart outputs production-ready SVG code. Because it creates standalone graphics with accessibility labels, downstream chats display charts without needing a client-side React runtime.
Execution happens locally over stdio via npx -y @microcharts/mcp. It bundles the underlying @microcharts/react package directly. No API token, account, or cloud service is involved.
It rejects mismatched shapes with specific structural guidance rather than throwing silent crashes. Trying to feed dense multi-megabyte datasets will fail: the renderer explicitly rejects oversized arrays because microcharts are designed strictly as small inline marks.
What it helps with
- render self-contained inline SVG sparklines directly in conversational UIs
- discover the appropriate microchart layout from natural language queries
- generate descriptive accessibility summaries alongside rendered visual marks
- retrieve TypeScript props and syntax examples for microchart components
Example prompts for the agent
- Create a sparkline chart for our recent server response latency numbers.
- Find an inline chart type suitable for displaying target progress versus actual quota.
- Render a compact bullet diagram with a target of 80 and a current value of 72.
How to install microcharts
Platform CLI
claude mcp add microcharts -- npx -y @microcharts/mcpPlatform CLI
codex mcp add mcp -- npx -y @microcharts/mcpConfig file
{
"mcpServers": {
"mcp": {
"command": "npx",
"args": [
"-y",
"@microcharts/mcp"
]
}
}
}Config file
{
"servers": {
"mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@microcharts/mcp"
]
}
}
}Platform CLI
gemini mcp add mcp npx -y @microcharts/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about microcharts
How to install microcharts in Claude Code?
Run claude mcp add microcharts -- npx -y @microcharts/mcp. Claude Code manages the process over stdio without further configuration.
What does the microcharts MCP server do?
It lets models discover miniature chart types, inspect their expected JSON schemas, and output static SVGs complete with accessibility text.
Does the consuming client need React to show the output?
No, the rendering tool returns self-contained SVG graphics with embedded styling, rendering cleanly anywhere images or raw SVG can appear.
