AIGUI

@ai-gui/mcp

コーディングエージェントに図を描かせましょう。 MCP サーバーであり、Claude Code と Codex 向けの AIGUI プラグインのエンジンでもあります。チャート、図表、数式、3D シーン、分子、軌道、ダッシュボード、手順ごとに再生できるインフラストラクチャのトポロジーを、エージェントが確認できる PNG、またはブラウザーで表示するライブページに変換します。

ライブデモ · ソース · すべてのパッケージ

インストール

Claude Code — このプラグインには、テキストより図が適している場面をエージェントに知らせるスキルも含まれています。

/plugin marketplace add liliang-cn/aigui
/plugin install aigui@aigui

Codex：

codex plugin marketplace add liliang-cn/aigui
codex plugin add aigui@aigui

任意の MCP クライアント — stdio 経由で aigui-mcp を実行します。

npm install -g @ai-gui/[email protected]
claude mcp add aigui -- aigui-mcp

Node.js 18.11+ が必要です。最初の描画時にヘッドレスブラウザーをダウンロードします（約 100 MB、初回のみ）。すべてローカルで実行され、アカウントも API キーも必要ありません。

描画できるもの

21 種類のブロックに対応しています。ECharts のチャート（3D も対応）、Mermaid、KaTeX、ダッシュボードとデータウォール、3D シーン、SMILES からの分子生成、軌道と衝突、手順を再生できるトポロジー、ナレッジグラフ、ジオメトリ、関数グラフ、光学、力学、ラベル付き図、ローソク足チャート、テーブルなどがあります。そのうち 9 種類は PNG に直接レンダリングされ、すべてページ上に描画できます。

ツール

ツール	機能
aigui_guide	ブロックの一覧、または指定したブロックの正確な構文を返します。ブロックを書く前にお読みください。
aigui_render	Markdown 文字列内のブロックを PNG として描画し、エージェントに返すとともにディスクに保存します。
aigui_open	回答全体をライブページとして開きます。チャートにカーソルを合わせたり、3D を回転させたり、トポロジーやウォールを再生したりできます。
aigui_edit	回答全体を再送信せずに、検索と置換でページの一部を変更します。
aigui_export	ページを PNG、PDF、自己完結型の HTML ファイル、または再生する様子の GIF／WebM として保存します。
aigui_topology	docker-compose ファイルまたは Kubernetes マニフェストからシステムを描画します。
aigui_feedback	ユーザーがページ上のブロックに残したコメントを読み取ります。

信頼できる理由

• 数値はファイルから取得します。 data: {"sales": "/abs/path/sales.csv"} を渡し、チャート内に {"$data":"sales","column":"revenue"}（または pick、sum、count、max、min、avg）と記述します。数値はモデルが再入力するのではなく、ファイルから読み取られます。また、結果には各ブロックの参照元ファイルが示されます。
• すべての描画をチェックします。 ヘッドレスブラウザーが、ラベルの重なり、テキストの切れ、9 px 未満の文字、コントラスト不足、チャートの詰め込みすぎを検出し、表示する前に修正するようエージェントに伝えます。
• 実際の設定ファイルからトポロジーを生成します。 aigui_topology は、モデルの記憶ではなく、実際にデプロイされている内容を読み取ります。
• ローカルで動作します。 画像は ~/.cache/aigui/images に、ページは ~/.cache/aigui/pages に保存され、pages/index.html に新しいものから順に一覧表示されます。ページはネットワークから何も読み込みません。

カスタムブロック

ビルド手順もフォークも不要で、3つのファイルに独自のブロックタイプを追加できます。

npx @ai-gui/cli plugin new ticket   # writes ~/.config/aigui/plugins/ticket/

ファイル	内容
aigui.json	名前、フェンス、一行の説明、PNG にレンダリングできるかどうか
plugin.js	AIGuiPlugin を登録する通常のブラウザースクリプトです。(globalThis.__aiguiPacks ??= {}).ticket = (theme, still) => [...] の形式で登録します。HTML はほかのプラグインと同様にサニタイズされます。
spec.md	ブロックを記述する際にモデルが従うルール

追加したブロックは aigui_guide で [custom] として表示され、ページ、PNG、エクスポートに描画されます。セッション開始時にインストールされているブロックは、ツールの説明にも記載されます。計測した実行では、そのブロックを使用できる場合、エージェントは9回中9回のセッションでカスタムブロックを使用しましたが、使用できない場合は9回中5回でした。破損したフォルダーは理由とともにスキップされ、組み込みブロックと名前が重複している場合は拒否されます。

ページからのコメント

セッション中、ページはシステムが選んだポートの 127.0.0.1 で配信され、コメントボタンが表示されます。ブロックを選び、変更内容を入力して送信します。エージェントは aigui_feedback でコメントを読み取り、ページを編集します。配信されるのは pages ディレクトリのみです。

設定

変数	効果
AIGUI_OUT_DIR	画像とページの出力先です。デフォルトは ~/.cache/aigui です（XDG_CACHE_HOME に従います）。
AIGUI_NO_OPEN=1	ページを書き出しますが、開きません。
AIGUI_OPEN_IMAGES=1	aigui_render の PNG も画像ビューアーで開きます。ターミナルでは画像を表示できないため、プラグインがこの設定を行います。
AIGUI_PLUGIN_DIR	カスタムブロックの保存先です。デフォルトは ~/.config/aigui/plugins です。
AIGUI_NO_BROWSER_DOWNLOAD=1	ヘッドレスブラウザーのダウンロードをスキップし、インストール済みの Chrome または Edge で描画します。
AIGUI_BROWSER_CHANNEL	使用するブラウザーを固定します。chromium、chrome、msedge を指定できます。

プログラムからの利用

import { createServer, callTool, renderToContent, writePage } from "@ai-gui/mcp"

createServer() は、独自のトランスポートを持つホスト向けに、未接続の McpServer を返します。callTool(name, args) はツールを1つ直接実行します。

ライセンス

MIT © Liang Li