SkillFoxx

microcharts MCP

The @microcharts/mcp server: an agent picks from 106 tiny React charts, gets ready props and receives SVG with alt text

  • 207 ★ on the repository
  • Last commit
  • MIT
MCP server

Minimal access

Why this level

  • The server picks and renders charts locally from the library and writes nothing to the project without your command
All reasons and checks

ganapativs/microchartsAuthor:ganapativs

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add mcp/microcharts-mcp

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Minimal accessThe tool runs nothing and makes no network calls.

  • The server picks and renders charts locally from the library and writes nothing to the project without your command

This is third-party code. Review the repository files before installing.

What it does

microcharts is a library of 106 tiny React charts built to sit inside an interface: in a sentence, a table cell, a KPI card or a streamed model reply. It has no dependencies, is pure SVG, takes about 2–7 kB with interactivity, static charts are safe for server components and each chart describes itself in words from its data. The `@microcharts/mcp` package runs locally over stdio and gives an assistant three tools: find the chart type that answers a question, get its exact props and a ready sample and render the chart to a self-contained SVG with generated alt text. It connects with the `npx` command and the arguments `-y @microcharts/mcp`. The library also has AI documentation: `llms.txt` and a `catalog.json` catalog of all charts.

Who it is for. React interface developers who ask an agent to put a tiny chart into a table, card or chat reply and want accessible text included.

Good fit when

  • The agent picks a chart type for a question, such as a delta or sparkline, and gets validated props
  • A table cell needs a sparkline with the week's trend and a meaningful description for a screen reader
  • You need a ready SVG chart with alt text to paste into an email or a document
  • A tiny chart is streamed into a model reply and must stay readable and checkable by a person

Not a fit when

  • You need large panels with axes, legends and labels: the library makes word-sized charts
  • The project is not on React: the package targets React as the only peer
  • You need custom one-off visualizations: each type has one documented encoding channel

Example request

Pick a tiny chart for the weekly conversion trend, give the props and render an SVG with alt text for a table cell

MCP

Transport
stdio
Authentication
not required

Limitations

The server works over stdio and is started locally, while the library itself targets React. The authors say the code is tested and in production use but not across every stack and edge, and ask for findings in the repository issues. Static charts are safe for React server components, and the interactive version is a separate `/interactive` import that needs a client component. The server does not call the network to render and works from the library itself. The license is MIT and the documentation and catalog are at microcharts.dev.

How to disable. Remove the server from the client and the `@microcharts/react` package from the project (`npm uninstall @microcharts/react`).

FAQ

How do I connect microcharts MCP?

Add a server with the `npx` command and the arguments `-y @microcharts/mcp` to the client config. It works over stdio on your machine.

Which tools does the server have?

Three: find a chart type for a question, get its exact props and a ready sample, and render the chart to SVG with alt text.

How do I install the library?

With `npm install @microcharts/react` and a one-time import of `@microcharts/react/styles.css` at the app root.

Why are charts safe for server components?

Static charts are hook-free and render to HTML with no client JavaScript. Interactivity is a separate import from `/interactive`.

How big are the charts?

About 2–7 kB gzip with interactivity and 1–4 kB static, with the budget checked in CI.

Discussion

No questions or reviews yet.

MCP servers
Official

An MCP server for Keyline Icons: the agent finds an icon by name and gets its SVG and a ready React import with no guessing

MCP serverMinimal access205

The Arc UI MCP server: an agent searches animated React components, reads docs and props and gets the shadcn install command.

MCP serverMinimal access1.3K
Official

Chakra UI MCP server: a reference for components, props and theme tokens, plus code review for moving from version 2 to 3

MCP serverExtended access40.7K

An MCP server that finds a coolicons icon by meaning and returns the SVG with the import line, so the agent never guesses names

MCP serverExtended access494
Official

The CodeRocket MCP server gives an agent a saved library's design rules, components and blocks over a read-only connection.

MCP serverMinimal access247
Official

ReactUse MCP server: the agent finds the right React hook and reads its description, example and API table straight from the library

MCP serverExtended access1.1K

README in short

The text presents a tiny chart library for React: why it exists, install, a first chart, interactivity and theming. A separate section describes the MCP server and links lead to AI documentation.

README badge

Report a problem