microcharts

Encuentra, conecta y renderiza microcharts: gráficos React del tamaño de una palabra con texto alternativo generado.

GitHub
196
Prueba este MCPPatrocinado

Documentación

@microcharts/mcp

microcharts MCP server

Un servidor MCP y un conjunto de herramientas para el Vercel AI-SDK para microcharts — permite que un modelo encuentre el gráfico del tamaño de una palabra adecuado, obtenga exactamente cómo conectarlo y lo renderice a un SVG terminado con texto alternativo real.

microcharts está construido para que un modelo pueda escribir gráficos. Así es como un modelo los invoca: no "emitir algo de gramática y esperar que el cliente lo renderice", sino una llamada a herramienta que devuelve el SVG estático real de la librería, honesto por construcción, con el nombre accesible generado describeSeries adjunto.

  • Se ejecuta en tu máquina. Servidor stdio, distribuido en npm. Nada está alojado; sin cuenta, sin clave, sin que los datos salgan.
  • Funciona en cualquier lugar. La herramienta de renderizado devuelve SVG autocontenido, por lo que una superficie de chat que no pueda ejecutar React aún puede mostrar un gráfico real.
  • Cero configuración. npx @microcharts/mcp — el paquete trae su propia copia de @microcharts/react.

Instalación

Agrégalo a cualquier cliente MCP. Para Claude Desktop (claude_desktop_config.json) o Cursor (.cursor/mcp.json):

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

Eso es todo — el cliente inicia el servidor a través de stdio bajo demanda.

Herramientas

find_microchart(question, dataShape?)

Clasifica el catálogo según una pregunta en lenguaje natural. Comienza aquí cuando conoces la pregunta, no el gráfico.

find_microchart({ question: "is it trending?" })
→ [{ slug: "sparkline", name: "Sparkline", why: "inline trend", dataShape: "number[]" }, …]

get_microchart(slug)

Todo lo necesario para conectar un gráfico: rutas de importación, sus props más las props compartidas, la forma de los datos, guía de mejores prácticas/evitar, un ejemplo ejecutable para copiar, y sample — ese mismo ejemplo como props JSON, listo para pasar directamente a 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" },
    …
  }

Cada gráfico toma su propia forma de datos — number[] para un sparkline, { label, value }[] para un dot plot, { open, high, low, close }[] para OHLC — por lo que sample es el camino más corto desde "qué gráfico" hasta "un renderizado que funciona".

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

Renderiza a un SVG terminado y autocontenido más su texto alternativo generado. Pasa la serie como data; coloca otras props (value, target, curve, color, width) en 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 es "svg" (predeterminado, estilos incrustados — se inserta en cualquier superficie) o "bare" (sin CSS, para páginas que ya cargan @microcharts/react/styles.css).

Los datos faltantes o con forma incorrecta se rechazan por nombre en lugar de pasarse a React, por lo que un llamador obtiene "dot-plot" needs \data. Forma de los datos: { label, value }[]. Llama a get_microchart("dot-plot") para un ejemplo listo para renderizar. en lugar de un stack trace. Los payloads sobredimensionados también se rechazan — un microchart es una marca del tamaño de una palabra.

También expone dos recursos: microcharts://catalog (cada gráfico + metadatos) y microcharts://agent-setup (el prompt para conectar microcharts a un codebase).

Úsalo desde el Vercel AI SDK

Las mismas tres capacidades se envían como herramientas del AI-SDK (en el subpath /ai-sdk, para que el núcleo nunca arrastre ai):

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.",
});

Las funciones también se exportan directamente — findChart, getChart, renderChart — si las quieres sin el envoltorio de herramienta.

Versionado

Este servidor agrupa el catálogo de gráficos y renderiza con @microcharts/react (instalado como dependencia normal). Su versión rastrea sus propios cambios; una librería compatible se incorpora automáticamente. La versión de la librería desde la que se cortó una instantánea dada está en el recurso microcharts://catalog.

Enlaces

MIT