microcharts

@microcharts/mcp

microcharts 用の MCP サーバーおよび Vercel AI-SDK ツールセットです。モデルが適切な小さなチャートを見つけ、その組み込み方を正確に取得し、実際の代替テキスト付きの完成した SVG としてレンダリングできます。

microcharts は、モデルがチャートを 書ける ように作られています。モデルがチャートを 呼び出す 方法は次のとおりです。「何らかの文法を出力して、クライアントがレンダリングしてくれることを期待する」のではなく、ツール呼び出しによって、実際のライブラリの静的 SVG を返します。生成された describeSeries のアクセシブルな名前も付いているため、最初から正確です。

• お使いのマシンで動作します。 npm で配布される stdio サーバーです。ホストされているものはなく、アカウントもキーも不要で、データが外部に送信されることもありません。
• どこでも使えます。 レンダリングツールは自己完結型の SVG を返すため、React を実行できないチャット画面でも実際のチャートを表示できます。
• セットアップ不要です。 npx @microcharts/mcp — パッケージには @microcharts/react のコピーが同梱されています。

インストール

任意の MCP クライアントに追加してください。Claude Desktop（claude_desktop_config.json）または Cursor（.cursor/mcp.json）の場合：

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

これだけです。必要に応じて、クライアントが stdio 経由でサーバーを起動します。

ツール

find_microchart(question, dataShape?)

平易な言葉で書かれた質問に照らして、カタログを順位付けします。質問はわかっているものの、使うチャートがわからない場合は、ここから始めてください。

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

get_microchart(slug)

チャートを組み込むために必要なすべての情報を取得します。インポートパス、そのチャート固有の props と共通 props、データ形状、推奨事項と避けるべきケース、コピーして実行できるサンプルに加え、render_microchart にそのまま渡せる JSON props 形式の同じサンプル sample が含まれます。

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" },
    …
  }

チャートごとに必要なデータ形状は異なります。スパークラインは number[]、ドットプロットは { label, value }[]、OHLC は { open, high, low, close }[] を受け取ります。そのため、sample を使えば「どのチャートか」から「正しく動作するレンダリング」まで最短でたどり着けます。

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

完成した自己完結型の SVG と、生成された代替テキストをレンダリングします。系列は data として渡し、その他の props（value、target、curve、color、width）は 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"（デフォルト。スタイルが埋め込まれているため、どの画面にも挿入できます）または "bare"（CSS なし。すでに @microcharts/react/styles.css を読み込んでいるページ向け）です。

データがない場合や形状が正しくない場合は、React に渡すのではなく、チャート名を示してエラーになります。そのため、呼び出し元にはスタックトレースではなく、"dot-plot" needs \data`. Data shape: { label, value }[]. Call get_microchart("dot-plot") for a ready-to-render sample.` が返されます。サイズが大きすぎるペイロードも拒否されます。microchart は小さなチャートです。

さらに、2 つのリソースも公開します。microcharts://catalog（すべてのチャートとメタデータ）と microcharts://agent-setup（コードベースに microcharts を組み込むためのプロンプト）です。

Vercel AI SDK から使う

同じ 3 つの機能を AI-SDK ツールとして利用できます（/ai-sdk サブパスから提供されるため、コアが 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.",
});

ツールラッパーなしで使いたい場合は、関数も findChart、getChart、renderChart として直接エクスポートされています。

バージョン管理

このサーバーにはチャートカタログがバンドルされており、通常の依存関係としてインストールされる @microcharts/react を使ってレンダリングします。サーバーのバージョンはサーバー自体の変更に合わせて更新され、互換性のあるライブラリが自動的に取得されます。各スナップショットの作成元となったライブラリのバージョンは、microcharts://catalog リソースに記載されています。

リンク

• ドキュメント：https://microcharts.dev/docs/mcp
• ライブラリ：@microcharts/react
• ソース：https://github.com/ganapativs/microcharts/tree/main/packages/mcp

MIT