Blueprint Chart

LLM で Blueprint Chart の .bpc ファイルを作成するための Model Context Protocol サーバーです。実践的なデータ可視化の教育知見に基づき、解析と描画をすばやく繰り返してフィードバックを得られます。AI が記述でき、あらゆるブラウザーで描画できる、オープンなプレーンテキストのチャート形式です。単体で動作し、バックエンドもアカウントも必要ありません。

MCP は、Blueprint Chart のデータ可視化ハンドブック、DSL 文法リファレンス、チャートタイプのドキュメント、標準サンプルを MCP リソースとして公開し、さらに 11 個の決定論的なツールを提供します。validate_dsl、inspect_dsl、recommend_chart_type、render、list_chart_types、describe_chart_type、get_example、get_grammar、export_chart、search_examples、list_palettes です。LLM が .bpc を記述し、MCP が実践的なデータ可視化の教育知見に基づいて内容を補い、すばやくフィードバックを得られるようにします。

インストール

npx @blueprint-chart/mcp           # stdio (for Claude Desktop, Claude Code, Cursor)
npx @blueprint-chart/mcp --http    # HTTP/SSE on 127.0.0.1:4321

Claude Desktop での使用

claude_desktop_config.json に追加します。

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

Claude Code での使用

claude mcp add blueprint-chart \
  -e BLUEPRINT_CHART_EDITOR_URL=https://blueprintchart.com \
  -e BLUEPRINT_CHART_DOCS_URL=https://docs.blueprintchart.com \
  -- npx -y @blueprint-chart/mcp

ツール

ツール	目的
validate_dsl	.bpc を解析します。{ valid, errors[], warnings[] } を返します。各エラーには code、message、suggestion が含まれます
inspect_dsl	解析して要約します。chartType、scenes、seriesCount、rowCount、hasHighlights、hasColorizes などを返します
recommend_chart_type	指定した列の形状と行数に適したグラフの種類を順位付けします
render	SVG（デフォルト）、PNG、または HTML にレンダリングします。format:"png" を指定すると、あなたとユーザーの両方が確認できるインライン画像を返します。構造化されたフレームメタデータを常に返します。MCP_PUBLIC_URL が設定されている場合は urls（{png,svg,bpc}）も含まれます。グラフデータが URL 内に含まれるステートレスなリンクです。modelVisible:false を設定すると、インライン画像をレスポンスから完全に除外し、画像トークンを消費しません。save:<path> を渡すと出力をディスクに書き込みます（MCP_FS_WRITE_DIR が必要です。書き込み先はそのディレクトリ内に限定されます）。幅と高さの上限は 1600 です。PNG は 2 倍の解像度です。
list_chart_types	レンダリング可能なすべてのグラフの種類を一覧表示します（bpc://handbook/choosing に相当するツール）
describe_chart_type	1 種類のグラフについて、プロパティ、使用する場面、使用すべきでない場面、データの形状を説明します（bpc://chart-types/{slug} に相当するツール）
get_example	グラフの種類またはサンプル名を指定して、標準的な .bpc サンプルを取得します（bpc://samples/{id} に相当するツール）
search_examples	トピックのキーワードやグラフの種類で標準的なサンプルを検索します（参照先を返します。DSL 全体を取得するには get_example を使用します）
get_grammar	DSL の構文リファレンス全体（bpc://grammar に相当するツール）
list_palettes	colorPalette 用の、名前付きカラー パレットと 16 進数カラーコードを一覧表示します
export_chart	.bpc を検証し、共有可能な URL とインラインプレビューを返します。{ copyUrl, embedUrl, urls?, frame } を返します。copyUrl はエディターで編集可能で、embedUrl は読み取り専用の iframe の参照先です。urls.{png,svg,bpc} はステートレスなレンダリング済み画像／ソースへのリンクです（MCP_PUBLIC_URL が設定されている場合）。modelVisible:false を設定すると、インラインプレビューをレスポンスから完全に除外し、画像トークンを消費しません。BLUEPRINT_CHART_EDITOR_URL が必要です。プレビューに失敗してもエクスポートは妨げられません。

検出ツール（list_chart_types、describe_chart_type、get_example、search_examples、get_grammar、list_palettes）を使うと、MCP リソースに対応していないクライアントでも、bpc:// URI で公開されるものと同じリファレンス資料にアクセスできます。

レンダリング結果の保存

render ツールは save: <path> を使って、出力をディスクに書き込めます。これはデフォルトでは無効です。有効にするには MCP_FS_WRITE_DIR にディレクトリを設定します。絶対パスが推奨されます。相対パスを指定した場合は、サーバーの起動時に作業ディレクトリを基準として解決されます。すべての書き込みはそのディレクトリ内に限定されるため（サンドボックス）、クライアントがファイルをどこに配置するかを心配する必要はありません。相対 save パスはそのディレクトリに結合され、すでにそのディレクトリ内にある絶対パスはそのまま使用され、それ以外の絶対パスはそのディレクトリ内のパスに付け替えられます（先頭のスラッシュを取り除いて残りを結合するため、save: "/tmp/foo.png" は <dir>/tmp/foo.png になります）。../ によるパストラバーサルでサンドボックスの外に出るパスだけが拒否されます。存在しないサブディレクトリは自動的に作成されます。包含チェックは字句的に行われ（realpath は使いません）、字句上のパスがサンドボックス内にあるシンボリックリンクはチェックを通過し、書き込み時に OS によって解決されます。そのリンク先がサンドボックス外にある場合、そこに書き込まれます。隔離が重要な場合は、サンドボックス内にシンボリックリンクを置かないでください。

claude mcp add コマンドに -e フラグを追加してください。

claude mcp add blueprint-chart \
  -e MCP_FS_WRITE_DIR=/path/to/output \
  -- npx -y @blueprint-chart/mcp

リソース

• bpc://grammar — DSL の構文リファレンス全体
• bpc://handbook/<slug> — データビジュアライゼーションの基礎（選び方、デザイン原則、色、タイポグラフィ、注釈、アクセシビリティなど）
• bpc://guide/<slug> — 使用ガイド（シーン、パレット、データ変換など）
• bpc://chart-types/<slug> — グラフの種類ごとのドキュメント
• bpc://samples/<id> — 標準的な .bpc の例
• bpc://reference/dsl/<slug>、bpc://reference/api/<slug> — リファレンス全体

プロンプト

• author_chart — LLM に一連の手順（読み込み → 作成 → 検証 → レンダリング → 改良）を実行させます

例

Claude でクイックスタート

MCP に接続したら、Claude にチャートの作成を依頼します。

あなた： 英語の文字の出現頻度を横棒グラフにしてください。上位 10 件を表示し、E を強調してください。

Claude： (list_chart_types、get_example({ chartType: "bar-horizontal" }) を呼び出し、.bpc を作成し、解析できることを確認するために validate_dsl を呼び出し、format: 'png' を指定して render を呼び出し、画像とソースを表示します)

チャートはこちらです。

![image]

chart bar-horizontal {
  title = "E is the most frequent letter in English"
  sort = descending
  valueLabels = true
  highlight "E"
  data { "E" = 12.70; "T" = 9.06; "A" = 8.17; ... }
}

MCP は、Claude が DSL を 1 行でも書く前に、実際のデータ可視化の教育資料（ハンドブック）に基づいて作業できるようにし、その後、決定的な解析とレンダリングのフィードバックで一連の作業を完了します。

.bpc の例

chart bar-vertical {
  title = "E is the most frequent letter in English"
  description = "How often each letter appears in typical English text"
  source = "Lewand, Cryptological Mathematics"
  colorPalette = "London"
  sort = descending
  valueLabels = true
  highlight "E"

  data {
    "E" = 12.70
    "T" = 9.06
    "A" = 8.17
    "O" = 7.51
    ...
  }
}

文法の全容は bpc://grammar にあります。17 個の標準サンプルは bpc://samples/<id> にあります（letter-frequency、co2-emissions、quarterly-revenue、browser-market、temperature-anomaly、population-stacked-bar、…）。

validate_dsl — 構造化診断を含む解析

リクエスト：

{
  "name": "validate_dsl",
  "arguments": { "source": "chart bar-vertical {\n  title = \"oops\n}" }
}

レスポンス — valid は false です。errors[] の各項目には、code、人が読める message、実行可能な suggestion が含まれます。

{
  "valid": false,
  "errors": [
    {
      "code": "E_PARSE",
      "message": "Expected \"\\\"\" but end of input found.",
      "suggestion": "Close the string literal on line 2."
    }
  ],
  "warnings": []
}

inspect_dsl — 構造化された概要

リクエスト：

{ "name": "inspect_dsl", "arguments": { "source": "<.bpc source>" } }

レスポンス：

{
  "ok": true,
  "data": {
    "chartType": "bar-vertical",
    "scenes": [{ "index": 1, "hasTransition": false }],
    "hasAnnotations": false,
    "hasColorizes": false,
    "hasHighlights": true,
    "hasAreaFills": false,
    "seriesCount": 0,
    "rowCount": 26
  }
}

recommend_chart_type — 優先順位付きの候補

リクエスト：

{
  "name": "recommend_chart_type",
  "arguments": { "columnTypes": ["date", "number", "number", "number"], "rowCount": 24 }
}

レスポンス：

{
  "ok": true,
  "data": {
    "recommendations": [
      { "chartType": "line-multi", "label": "Multi-Line Chart", "fitness": "best",
        "reason": "1 date + 3 numeric columns — compare trends" },
      { "chartType": "bar-multi",  "label": "Grouped Bar Chart", "fitness": "alternative",
        "reason": "Can also show as grouped bars" }
    ]
  }
}

render — SVG（デフォルト）、PNG、または HTML

リクエスト：

{
  "name": "render",
  "arguments": { "source": "<.bpc source>", "format": "png", "width": 800, "height": 500 }
}

レスポンス：

{
  "ok": true,
  "data": {
    "svg": "<svg ...>...</svg>",
    "png": "<base64-encoded image>",
    "mimeType": "image/png",
    "urls": {
      "png": "https://mcp.blueprintchart.com/render.png?bpc64=…",
      "svg": "https://mcp.blueprintchart.com/render.svg?bpc64=…",
      "bpc": "https://mcp.blueprintchart.com/render.bpc?bpc64=…"
    }
  }
}

urls フィールドは MCP_PUBLIC_URL が設定されている場合にのみ含まれます。設定されている場合、すべての render と export_chart のレスポンスに、状態を持たないリンクが含まれます。チャートデータは URL 内に含まれます（.bpc ソースを URL セーフな base64 でエンコードした bpc64 として格納されます）。セッションもサーバー状態も必要ありません。リクエストで modelVisible:false を設定すると、レスポンスからインライン画像を完全に除外でき、画像トークンを消費しません。

ラスタライズに失敗した場合（まれです）、errors[] は空ではなくなり、各項目には code（"E_RENDER"）と suggestion が含まれます。それでもレスポンスには正常に生成された SVG が含まれるため、部分的な成功は保持されます。

ホストされたレンダリング URL

チャートをページに直接埋め込みます。

<img src="https://<your-mcp-host>/render.png?bpc64=<bpc64value>&width=800&height=500" alt="My chart" width="800" height="500">

/render.bpc は未加工の .bpc ソースを返します。これはあらゆるチャート URL で「ソースを表示」する機能で、共有やリンクだけからチャートを再現するのに便利です。

エンコード後のサイズが 8 KB を超えるソースは、エンドポイントから 413 を返します（また、ツールは urls を省略し、代わりに urlsOmitted: "source-too-large" を返します）。非常に大きなチャートには、インライン PNG を使用してください。

リソースを読む

{ "uri": "bpc://handbook/choosing" }

「適切なチャートの選び方」ハンドブックのページ全体を Markdown 形式で返します（docs.blueprintchart.com と同じ内容です）。

{ "uri": "bpc://samples/letter-frequency" }

文字頻度のサンプルの未加工の .bpc ソースを text/plain として返します。LLM が模倣すべき形式そのものです。

ライセンス

MIT