Microcharts

What ganapativs/microcharts does

ganapativs/microcharts connects an MCP client to the microcharts library and exposes a workflow for choosing and producing compact charts. The catalog contains 106 word-sized chart types, including sparklines, bars, bullets, dot plots, and OHLC charts. The server renders the selected chart to SVG and includes generated descriptive text through the result's summary field.

Its local design keeps execution on the user's machine. The package runs as a stdio server distributed through npm; it does not require an account or API key, and chart data is not sent to a hosted service. Because the rendered SVG includes its styles by default, the result can be placed into a chat or other surface without a React runtime.

How it works

The three main tools support a staged workflow:

• find_microchart(question, dataShape?) ranks chart types against a plain-language question and optionally considers the shape of the available data.
• get_microchart(slug) returns the selected chart's import path, chart-specific and shared props, expected data shape, usage guidance, runnable example, and JSON sample props.
• render_microchart(type, data?, props?, format?) turns the chart type, series data, and additional properties into a finished SVG.

Chart inputs are deliberately type-aware. A sparkline can take a number[], while a dot plot expects objects shaped like { label, value }; an OHLC chart expects { open, high, low, close } records. Chart-specific values such as value and target, along with shared settings such as curve, color, and width, belong in props.

Rendering returns the SVG, a generated summary, the image/svg+xml MIME type, and dimensions. The default svg format embeds styles. The optional bare format omits CSS for pages that already load @microcharts/react/styles.css.

Setup and configuration

Install the server in an MCP client with the npm package command:

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

Claude Desktop uses claude_desktop_config.json, while Cursor uses .cursor/mcp.json. The client starts the process over stdio when needed. The same capabilities are also available as Vercel AI SDK tools from @microcharts/mcp/ai-sdk; the package exports microchartsTools and the underlying findChart, getChart, and renderChart functions.

Tools and capabilities

Two MCP resources complement the tools: microcharts://catalog provides chart metadata, and microcharts://agent-setup provides a prompt for integrating microcharts into a codebase. The catalog resource also identifies the library version associated with the bundled snapshot.

The package includes its compatible @microcharts/react dependency and maintains its own package version as the server changes. get_microchart is useful for agents that need an exact import and a render-ready sample before producing a chart.

Limitations and notes

The server rejects missing or incorrectly shaped data before passing it to React, returning an error that names the chart and expected data shape. Oversized payloads are also refused because the output is intended to remain a compact, word-sized chart. Rendering is focused on SVG output; the bare option assumes the consuming page is responsible for loading the chart stylesheet.