microcharts

Encontre, conecte e renderize microcharts — gráficos React do tamanho de uma palavra com texto alternativo gerado.

Documentação

@microcharts/mcp

Um servidor MCP e conjunto de ferramentas Vercel AI-SDK para microcharts — permita que um modelo encontre o gráfico do tamanho de uma palavra certo, obtenha exatamente como conectá-lo e renderize-o em um SVG finalizado com texto alternativo real.

microcharts é construído para que um modelo possa escrever gráficos. É assim que um modelo chama eles: não "emita alguma gramática e espere que o cliente renderize", mas uma chamada de ferramenta que retorna o SVG estático real da biblioteca, honesto por construção, com o nome acessível gerado describeSeries anexado.

Roda na sua máquina. Servidor stdio, distribuído no npm. Nada é hospedado; sem conta, sem chave, nenhum dado sai.
Funciona em qualquer lugar. A ferramenta de renderização retorna SVG autossuficiente, então uma superfície de chat que não pode executar React ainda pode mostrar um gráfico real.
Zero configuração. npx @microcharts/mcp — o pacote traz sua própria cópia de @microcharts/react.

Instalação

Adicione a qualquer cliente MCP. Para Claude Desktop (claude_desktop_config.json) ou Cursor (.cursor/mcp.json):

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

É isso — o cliente inicia o servidor via stdio sob demanda.

Ferramentas

`find_microchart(question, dataShape?)`

Classifique o catálogo contra uma pergunta em linguagem simples. Comece aqui quando você souber a pergunta, não o gráfico.

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

`get_microchart(slug)`

Tudo o que é necessário para conectar um gráfico: caminhos de importação, suas props mais as props compartilhadas, formato dos dados, orientações de melhor/evitar, um exemplo executável de copiar e colar, e sample — esse mesmo exemplo como props JSON, pronto para passar diretamente para 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 aceita seu próprio formato de dados — number[] para um sparkline, { label, value }[] para um dot plot, { open, high, low, close }[] para OHLC — então sample é o caminho mais curto de "qual gráfico" para "uma renderização que funciona".

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

Renderize para um SVG finalizado e autossuficiente mais seu texto alternativo gerado. Passe a série como data; coloque outras props (value, target, curve, color, width) em 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 é "svg" (padrão, estilos embutidos — encaixa em qualquer superfície) ou "bare" (sem CSS, para páginas que já carregam @microcharts/react/styles.css).

Dados ausentes ou com formato incorreto são rejeitados pelo nome em vez de passados para o React, então um chamador recebe "dot-plot" needs \data`. Formato dos dados: { label, value }[]. Chame get_microchart("dot-plot") para um exemplo pronto para renderizar.` em vez de um stack trace. Payloads superdimensionados também são recusados — um microchart é uma marca do tamanho de uma palavra.

Ele também expõe dois recursos: microcharts://catalog (cada gráfico + metadados) e microcharts://agent-setup (o prompt para conectar microcharts a uma base de código).

Use a partir do Vercel AI SDK

As mesmas três capacidades são fornecidas como ferramentas AI-SDK (no subcaminho /ai-sdk, para que o núcleo nunca puxe 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.",
});

As funções também são exportadas diretamente — findChart, getChart, renderChart — se você quiser sem o wrapper de ferramenta.

Versionamento

Este servidor agrupa o catálogo de gráficos e renderiza com @microcharts/react (instalado como dependência normal). Sua versão rastreia suas próprias mudanças; uma biblioteca compatível é puxada automaticamente. A versão da biblioteca da qual um snapshot foi cortado está no recurso microcharts://catalog.