Microcharts

io.github.ganapativsPublished by GitHub account ganapativsv0.1.17Updated Oct 24, 2026

Find, wire, and render microcharts — word-sized React charts with generated alt text.

VerifiedSTDIODesktop onlyDeveloper ToolsMedia & Design

Overview

AI-generated overview

A local MCP server that lets an assistant find the right microchart, get its wiring details, and render it to a self-contained SVG with generated alt text.

What you can do
Find charts: rank the microchart catalog against a plain-language question, optionally by data shape, and get a slug with a reason for the match. Get wiring details: import paths, props, data shape, best/avoid guidance, a runnable example and a ready-to-render sample for a chosen chart. Render charts: produce a finished, self-contained SVG plus a generated summary and alt text, in embedded-style or bare format. Read resources: a catalog of every chart with metadata, and a prompt for wiring microcharts into a codebase. The same three capabilities are also exported as Vercel AI SDK tools and plain functions.
When to use it
Useful when an assistant should show a small, word-sized chart inline — a sparkline, bullet, dot plot or OHLC mark — in a chat or codebase, and you want a real rendered SVG with accessible alt text rather than chart markup the client may not render.
Requirements
Runs locally over stdio via npx from the npm package @microcharts/mcp, so Node.js and npx are needed. No account, API key, environment variable or header is required, and nothing is hosted.
Before you install
The server only reads its bundled catalog and renders SVG; the README states no data leaves the machine. Oversized payloads and wrong-shaped data are rejected. Installing pulls the package and its bundled chart library from npm, so normal supply-chain care applies.

Installation

In SourceWeft

  1. Open Microcharts in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

README

@microcharts/mcp

[microcharts MCP server]

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):

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

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

Tools

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_microchart(type, data?, props?, format?)

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):

ts
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

Source: packages/mcp/README.md at commit 378d4fe

Tools

0
SourceWeft has not started this package in its sandbox yet, so its tools are not known.

Version history

1
  1. v0.1.17LatestSep 16, 2026

Score

50% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 days25 pts

    Keep the endpoint answering the MCP handshake; SourceWeft probes it every 30 days.

  • Auth declared10 pts

    Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.

  • Tools listed15 pts

    Answer tools/list without a credential, or ship a package that starts in a sandbox without one.

  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts