MCP Server
Babylon.js MCP Server とは
@babylonjs/mcp-servers は Babylon.js 公式が提供する MCP（Model Context Protocol）サーバー集（2026年6月リリース）。Claude や VS Code などの MCP 対応 AI クライアントから、Babylon.js の各種ノードエディタのグラフを生成・編集・保存・ライブ同期できる。
https://scrapbox.io/files/6a24ca1f601c8b4efdcd6005.png
対応エディタ（7種）
1パッケージに7サーバーが同梱。dispatcher 名を引数で指定して使い分ける。
セットアップ（Claude Desktop の例）
claude_desktop_config.json に追記して再起動するだけ。
code:claude_desktop_config.json
{
"mcpServers": {
"babylonjs-nge": {
"command": "npx",
}
}
}
Windows で npx が見つからない場合 command をフルパスに → C:\Program Files\nodejs\npx.cmd
★パッケージ版（ストア/MSIX）Claude Desktop の落とし穴 AppData が仮想化されており、%APPDATA%\Claude\` ではなく ...\AppData\Local\Packages\Claude_xxxxx\LocalCache\Roaming\Claude\claude_desktop_config.json` を読む。「設定 → 開発者 → 設定を編集」で開くファイルが正解。
基本：グラフを作って保存する（一番手軽）
AI に「Box ジオメトリを作って」と頼むと nge がブロックを組み立てる。スニペット保存すれば共有 URL になる。
例: 保存後 https://nge.babylonjs.com/#スニペットID で誰でも開ける。ライブ接続不要でまず試すならこれが確実。
応用：エディタとライブ接続（MCP Session）
公式手順:
1. AI にセッション URL を発行してもらう（http://localhost:3001/session/...）
2. 対応エディタを開く
3. 右パネルの「MCP SESSION」を展開し、Session URL に貼って Connect
https://scrapbox.io/files/6a24bc36601c8b4efdcd4a1a.png
https://scrapbox.io/files/6a24bc04601c8b4efdcd49cf.png
接続後、MCP 側の変更はエディタに自動反映。エディタ → MCP は「Push to MCP」で送信。
★CORS の注意（v9.11.0 時点） セッションサーバーは localhost / 127.0.0.1 からの接続のみ許可するため、公開ホスト版エディタ（https://nge.babylonjs.com 等）から繋ぐと CORS で弾かれることがある。その場合はエディタをローカル起動する（将来のバージョンで改善される可能性あり）。 ローカルでエディタを起動する Babylon.js 本体リポジトリから:
code:sh
git pull # MCP Session 機能は新しいので最新化
npm install
ブラウザのコンソールで:
code:js
const ng = new BABYLON.NodeGeometry("ng");
ng.setToDefault(); // Box → Geometry Output の既定グラフ
BABYLON.NodeGeometryEditor.Show({ nodeGeometry: ng });
これで localhost オリジンになり、MCP Session 欄から Connect できる。
つまずきポイント / Tips
セッションは無操作15分で閉じる → 閉じたら再度セッション URL を発行
セッションサーバー(localhost:3001)はブラウザで直接開くとメタ JSON が返る（エディタの MCP Session 欄に貼る用で、アドレスバー用ではない）
「Push to MCP」後はブロック ID が振り直される → AI 側は再度グラフを取得して最新 ID で操作する
Show({}) を引数なしで呼ぶと nodeGeometry 未指定でクラッシュ → 編集対象を必ず渡す
claude_desktop_config.json 設定例
code:json
{
"mcpServers": {
"babylonjs-nme": {
"command": "C:\\Program Files\\nodejs\\npx.cmd",
},
"babylonjs-nge": {
"command": "C:\\Program Files\\nodejs\\npx.cmd",
},
"babylonjs-nrge": {
"command": "C:\\Program Files\\nodejs\\npx.cmd",
},
"babylonjs-npe": {
"command": "C:\\Program Files\\nodejs\\npx.cmd",
},
"babylonjs-gui": {
"command": "C:\\Program Files\\nodejs\\npx.cmd",
},
"babylonjs-flow-graph": {
"command": "C:\\Program Files\\nodejs\\npx.cmd",
},
"babylonjs-smart-filters": {
"command": "C:\\Program Files\\nodejs\\npx.cmd",
}
}
}
参考リンク