Node Render Graph Editor
https://scrapbox.io/files/6820d25a2f326bd51cc6b40d.png
https://scrapbox.io/files/6828aa4560df83984275298b.png
https://scrapbox.io/files/6820d229dbb1d368046c2069.png
https://scrapbox.io/files/6828b1542d88bb327d62b334.png
MCP Server として使う方法
1. 準備（初回のみ）
code:PowerShell
cd C:\github\Babylon.js
npm install
2. MCP クライアントへの登録
方法A（推奨）: npm 公開版 @babylonjs/mcp-servers を npx で起動
claude_desktop_config.json の例:
code:json
"mcpServers": {
"babylonjs-nrge": {
"command": "C:\\Program Files\\nodejs\\npx.cmd",
}
}
方法B: ローカルビルド版（サーバー改造・未リリース変更を試す場合のみ）
code:PowerShell
npm run build -w @tools/nrge-mcp-server
code:json
"mcpServers": {
"babylonjs-nrge": {
"command": "node",
}
}
登録後、クライアントを再起動。
3. エディタの起動（毎回）
ターミナルを2つ使う:
code:PowerShell
# ターミナル1: babylonServer（初回はビルドに時間がかかる）
cd C:\github\Babylon.js
npm start
# ターミナル2: Node Render Graph Editor（パッケージ名は @tools/node-render-graph-editor）
cd C:\github\Babylon.js
npm run serve -w @tools/node-render-graph-editor
Vite が表示する URL をブラウザで開く。
4. MCP セッションへの接続
AI 側で create_render_graph（または start_session）を実行すると、セッション URL が返る:
エディタの MCP セッション接続パネル（Properties 内）に貼り付けて接続
以後、AI がブロックを追加・接続するとエディタにリアルタイム反映される
5. 基本ワークフロー
code:text
create_render_graph → add_block（InputBlock → レンダラー/ポストプロセス → OutputBlock）
→ connect_blocks → validate_graph → export_graph_json