x402-dataviz-mcp

x402-dataviz-mcp

構造化データから棒グラフ、折れ線グラフ、面グラフを描画し、手作業でデザインされたクリーンな SVG を返す、無料の MCP（Model Context Protocol）サーバーです。API キーも支払いも、回数制限をめぐる駆け引きも不要です。あらゆる MCP クライアントから呼び出せる MCP ツールです。

有料の x402 対応 HTTP API を、誰でも利用できるオープンな形で提供するものです。

x402-dataviz-poc.theliminalguy.workers.dev — POST /chart。本番環境や大量利用、または MCP 以外（通常の HTTP）での使用向けに、x402 payment protocol 経由で呼び出しごとに Base 上で $0.01 USDC を支払います。同じレンダラーで同じ出力ですが、MCP 経由で無料ではなく、呼び出しごとの課金となります。

これを作った理由

執筆時点で約14,800のエージェントが支払い可能な API を掲載する x402 Bazaar には、「構造化データ → クリーンなグラフ画像」の領域がまったくありません。この MCP サーバーは、その空白を埋めるための無料・ローカル版です。MCP 経由で無料で試し、大量利用が必要な場合や MCP クライアント以外で利用する場合は、有料の HTTP エンドポイントをご利用ください。

できること

render_chart という単一のツールで、グラフの種類と構造化されたデータポイントを受け取り、描画済みの SVG 文字列を返します。描画処理は独自実装です（ヘッドレスブラウザー、ネイティブバイナリ、重量級のグラフ描画フレームワークは使いません）。文字列から SVG を生成するため高速で、実行時の依存関係によるリスクもありません。

デザインの品質こそが、他との違いです。実際のカテゴリ別カラーパレット（目視ではなく、色覚多様性への配慮を検証済み）、計算された間隔、丸みのある棒の端を持つ細いマーク、棒の間の2pxの余白、リング付きの折れ線グラフのマーカー、終点への直接ラベル表示、ライト／ダーク両テーマへの完全対応を備えています。汎用グラフライブラリにありがちな青・赤・緑のデフォルト配色とは異なります。

インストールと実行

npx x402-dataviz-mcp

または、MCP クライアントの設定に追加します（例：Claude Desktop の claude_desktop_config.json）。

{
  "mcpServers": {
    "dataviz": {
      "command": "npx",
      "args": ["-y", "x402-dataviz-mcp"]
    }
  }
}

ツール：render_chart

入力：

{
  "type": "bar" | "line" | "area",
  "title": "optional string",
  "theme": "light" | "dark",       // defaults to "light"
  "data": [
    { "x": "Q1", "values": { "Revenue": 128000, "Cost": 84000 } },
    { "x": "Q2", "values": { "Revenue": 146500, "Cost": 91200 } }
  ]
}

values には、名前付きの系列を1つ以上指定できます。系列の色は固定の順序から割り当てられます（色覚多様性への配慮を検証済みで、生成や循環による割り当てはありません）。系列が2つ以上の場合は凡例が自動的に表示されます。系列が1つの場合は、タイトルに系列名が含まれるため凡例は不要です。

出力：指定したグラフを描画した SVG 文字列（MCP ツールのテキストコンテンツとして返されます）。

ローカルでの開発

npm install
npm run dev      # runs src/index.ts directly on stdio via tsx
npm run build    # compiles to dist/ for the published npm package

代わりに有料の HTTP 版を使う場合

次の場合は、この MCP サーバーの代わりに有料の Worker で POST /chart を使用してください。

• MCP クライアント以外（通常の HTTP、任意の言語）から呼び出す場合。
• 本番環境や大量利用に使い、無料ツールがいつまでも利用可能であることに頼らず、呼び出しごとに支払いたい場合。
• エージェントがすでに x402 に対応しており（例：x402-fetch / x402-axios 経由）、リクエストごとに Base 上で $0.01 USDC を支払える場合。

どちらの方法も、まったく同じ renderChart() 関数を呼び出すため、出力はバイト単位で完全に一致します。

ライセンス

MIT