Flow Graph Editor
Flow Graph は シーン内のイベント・条件分岐・値の受け渡し・アクション実行 をノードで組む仕組みです。
Flow Graph Editor は、その Flow Graph を 画面上でノードをつないで編集するためのエディタ です。
https://scrapbox.io/files/6a253442601c8b4efdcea6ad.png
デバッグ実行
https://scrapbox.io/files/6a253480601c8b4efdcea709.png
https://scrapbox.io/files/6a253472601c8b4efdcea6f4.png
実行結果
https://scrapbox.io/files/6a25361d601c8b4efdcea971.png
MCP Server として使う方法
1. 準備（初回のみ）
code:PowerShell
cd C:\github\Babylon.js
npm install
2. MCP クライアントへの登録
MCP サーバーは npm 公式パッケージ @babylonjs/mcp-servers として公開されている
（flow-graph / gui / nme / nge / npe / nrge / smart-filters の7種をバンドル、引数で選択）。
通常利用ではこちらを使う。clone もビルドも不要。
方法A（推奨）: npm 公開版を npx で起動
claude_desktop_config.json の例:
code:json
{
"mcpServers": {
"babylonjs-flow-graph": {
"command": "C:\\Program Files\\nodejs\\npx.cmd",
}
}
}
方法B: ローカルビルド版を使う（サーバー自体を改造したい／npm 未リリースの変更を試したい場合のみ）
code:PowerShell
npm run build -w @tools/flow-graph-mcp-server
code:json
{
"mcpServers": {
"babylonjs-flow-graph": {
"command": "node",
}
}
}
どちらも中身は同じサーバー（A=リリース版、B=手元の master）。登録後、クライアントを再起動。
3. （方法Aのみの場合）エディタ用にリポジトリを準備
エディタ（手順4）はモノレポから起動するため、方法Aでも手順1の clone と npm install は必要。
4. エディタの起動（毎回）
ターミナルを2つ使う:
code:PowerShell
# ターミナル1: babylonServer（初回はビルドに時間がかかる）
cd C:\github\Babylon.js
npm start
# ターミナル2: Flow Graph Editor
cd C:\github\Babylon.js
npm run serve -w @tools/flow-graph-editor
5. MCP セッションへの接続
1. AI 側で create_graph（または start_session）を実行すると、セッション URL が返る:
http://localhost:3001/session/<id>
2. エディタ右側 Properties → MCP Session を展開
3. Session URL 欄に貼り付けて接続（Status: Connected になる）
以後、AI がブロックを追加・接続するとエディタにリアルタイム反映される。
エディタ側で編集した内容を AI に戻すには Push to MCP ボタンを使う。
6. 基本ワークフロー
code:text
create_graph → add_block → connect_signal / connect_data
→ validate_graph → export_graph_json