MCP For Babylon

MCP浏览器世界

A. 模型上下文协议（MCP） 将LLM代理连接到基于浏览器的框架 3D引擎。它将场景对象（相机、灯光、网格、传感器等）暴露为MCP资源 工具，让客户喜欢 克劳德代码 或 MCP检查员 检查和 通过标准JSON-RPC接口操纵实时3D场景。

该框架的核心是与引擎无关的，并附带了适配器 Babylon.js 和 铯JS.

空间视图 --该项目是《 空间视图书，其中包括 空间MCP工具背后的愿景、概念和路线图。

______________________________________________________________________

快速启动

# 1. Clone & install
git clone https://github.com/pandaGaume/mcp-browser-world.git
cd mcp-browser-world
npm install

# 2. Build everything (TypeScript → UMD bundles → deploy)
npm run build:all:dev

# 3. Start the tunnel server (opens browser automatically)
npm run server:start

开发线束在以下位置打开 http://localhost:3000/。单击 开始 连接 将浏览器端MCP服务器连接到隧道，然后将MCP客户端指向 显示端点。

______________________________________________________________________

建筑

┌──────────────────────────────────────────────────────────────────────┐
│                        MCP Clients                                   │
│   Claude Code  ·  MCP Inspector  ·  any MCP-compatible agent         │
└──────────┬───────────────────────────────────────────────────────────┘
           │  POST /mcp   (Streamable HTTP, MCP 2025-03-26)
           │  GET  /sse   (SSE stream,      MCP 2024-11-05)
           ▼
┌──────────────────────────────────────────────────────────────────────┐
│                     WsTunnel  (Node.js)                 @dev/tunnel  │
│            HTTP / HTTPS relay  ←→  WebSocket bridge                  │
└──────────┬───────────────────────────────────────────────────────────┘
           │  ws://localhost:3000/provider  (wss:// with TLS)
           ▼
┌──────────────────────────────────────────────────────────────────────┐
│                  McpServer  (browser page)                           │
│                                                                      │
│  ┌──────────┐  ┌───────────┐  ┌───────────┐                          │
│  │  Camera  │  │   Light   │  │   Mesh    │   ← Behaviors            │
│  │ Behavior │  │ Behavior  │  │ Behavior  │     (@dev/behaviors)     │
│  └────┬─────┘  └─────┬─────┘  └─────┬─────┘                          │
│       │              │              │                                │
│  ┌────┴─────┐  ┌─────┴─────┐  ┌─────┴─────┐  ┌───────────┐          │
│  │ Babylon  │  │  Babylon  │  │  Babylon  │  │  Filters  │ optional │
│  │ Adapter  │  │  Adapter  │  │  Adapter  │  │ Pipeline  │ @dev/    │
│  └──────────┘  └───────────┘  └───────────┘  │ (Workers) │ filters  │
│       │              │              │         └─────┬─────┘          │
│       └──────────────┴──────────────┴───────────────┘                │
│                      │                                               │
│              ┌───────┴────────┐                                      │
│              │  Babylon.js /  │   ← 3D Engine                        │
│              │   CesiumJS     │                                      │
│              └────────────────┘                                      │
└──────────────────────────────────────────────────────────────────────┘

分层设计

关键概念

坐标系

坐标使用隐式检测-- {x,y,z} 是笛卡尔坐标系， {lat,lon} 是地理上的。 相机工具通过以下方式接受这两种格式 coordinateSchema （从 @dev/geodesy). 铯适配器通过以下方式将地理输入转换为ECEF resolveToCartesian3().

______________________________________________________________________

先决条件

______________________________________________________________________

构建

编译TypeScript

npm run build:dev        # one-shot
npm run build:watch      # watch mode

UMD浏览器捆绑包

为以下对象生成webpack捆绑包 @dev/core, @dev/babylon，以及 @dev/cesium:

npm run bundle           # production (minified)
npm run bundle:dev       # development (source maps)
npm run bundle:watch     # watch mode (core only)

输出：

• packages/dev/core/bundle/mcp-server.js
• packages/dev/babylon/bundle/mcp-babylon.js
• packages/dev/cesium/bundle/mcp-cesium.js

将捆绑包部署到开发工具

npm run deploy:bundles   # copies bundles → packages/host/www/bundle/

一次性构建所有内容

npm run build:all:dev    # development (recommended)
npm run build:all        # production (minified)

小贴士 --更改TypeScript源代码后，始终重新运行 npm run build:all:dev 所以浏览器会接收你的更改。

______________________________________________________________________

运行开发服务器

npm run server:start

输出：

⚙️  MCP Browser World — tunnel started
────────────────────────────────────────────────────────
📡  Provider     ws://localhost:3000/provider
🔌  MCP HTTP     http://localhost:3000/mcp   ← MCP Inspector
📺  MCP SSE      http://localhost:3000/sse   ← Claude Code
🖥️   Dev harness  http://localhost:3000/
────────────────────────────────────────────────────────

集 MCP_TUNNEL_NO_OPEN=1 以抑制浏览器的自动启动。

______________________________________________________________________

连接MCP客户端

浏览器开发工具

1. 打开 http://localhost:3000/
2. 将默认值保留在 连接 面板
3. 点击 开始 --状态更改为 连接

MCP检查员

npx @modelcontextprotocol/inspector

选择 流式HTTP 传输，URL: http://localhost:3000//mcp.

克劳德代码

添加 ~/.claude/settings.json:

{
    "mcpServers": {
        "babylon": {
            "url": "http://localhost:3000//sse"
        }
    }
}

替换 ` 名字传给 McpServerBuilder.withName()`.

然后尝试：

“列出巴比伦场景中可用的所有资源。” 将BoxMesh移动到位置（3，0，-2） “平滑地设置摄影机动画，使其在2秒内观察球体。”

______________________________________________________________________

HTTPS/TLS

# Generate a self-signed certificate
npm run gen-cert

# Start with TLS (bash)
MCP_TUNNEL_TLS_CERT=certs/cert.pem MCP_TUNNEL_TLS_KEY=certs/key.pem npm run server:start

# Or use the shortcut
npm run server:start:https

替换 http:// 随着 https:// 在所有客户端URL中。请参阅 docs/guides/howto.md 了解更多TLS详细信息。

______________________________________________________________________

样品

即用型示例页面已上线 packages/host/www/samples/:

每个示例都包括一个连接面板、画布和控制台输出。

______________________________________________________________________

语法系统

工具描述与工具模式分开，因此可以替换它们， 每个客户端都可以在不接触代码的情况下进行本地化或调优。语法很简单 JSON序列化对象，在会话期间按会话解析 initialize 握手。

完整文档： docs/gramm.md

______________________________________________________________________

快照筛选器

这 @dev/filters 软件包提供应用于以下内容的捕获后图像过滤器 camera_snapshot PNG编码前的结果。过滤器实施 ISnapshotFilter 并通过以下方式在相机适配器上注册 IHasImageFiltering 界面。

这 camera_snapshot 工具接受可选 filters 参数：

使用 camera_list_filters 在运行时发现已注册的过滤器。

符合工人资格的过滤器（实施 IWorkerSnapshotFilter)都是 自动批处理并在主线程之外执行，以获得更好的性能。

内置过滤器： 灰度, 视网膜 （具有颜色恢复功能的多尺度视网膜）。

Loopback client — camera snapshot with retinex filter

完整文档： docs/filters/architecture.md

______________________________________________________________________

MCP传输

配置TLS时，通过HTTPS/WSS可用的所有传输。

______________________________________________________________________

行为

该框架附带了三种行为，每种行为都有详细的记录：

相机工具（摘要）

轻型工具（概述）

网格工具（摘要）

______________________________________________________________________

项目结构

mcp-browser-world/
├── packages/
│   ├── dev/
│   │   ├── core/           @dev/core — MCP server SDK
│   │   │   ├── src/
│   │   │   │   ├── interfaces/       Public TypeScript interfaces
│   │   │   │   └── server/           McpServer, McpServerBuilder, McpGrammar
│   │   │   └── bundle/               mcp-server.js (UMD)
│   │   ├── geodesy/        @dev/geodesy — coordinate systems & ellipsoids
│   │   │   └── src/
│   │   │       ├── geodesy.ellipsoid.ts      Ellipsoid (WGS84, GRS80, …)
│   │   │       ├── geodesy.system.ts         GeodeticSystem (ECEF ↔ geodetic)
│   │   │       ├── geodesy.schemas.ts        JSON schemas + resolveToCartesian3
│   │   │       └── calculators/              Spherical & flat-earth calculators
│   │   ├── behaviors/      @dev/behaviors — engine-agnostic scene behaviors
│   │   │   └── src/
│   │   │       ├── behaviours/       McpCameraBehavior, McpLightBehavior, McpMeshBehavior
│   │   │       └── states/           State interfaces (camera, light, mesh, math)
│   │   ├── babylon/        @dev/babylon — Babylon.js adapters
│   │   │   ├── src/adapters/         Camera, Light, Mesh adapters
│   │   │   └── bundle/               mcp-babylon.js (UMD)
│   │   ├── cesium/         @dev/cesium — CesiumJS adapters
│   │   │   ├── src/adapters/         Camera, Light, Mesh adapters (ECEF)
│   │   │   └── bundle/               mcp-cesium.js (UMD)
│   │   ├── filters/        @dev/filters — snapshot image filters
│   │   │   └── src/
│   │   │       ├── interfaces/       ISnapshotFilter, IImageFilterSet, IHasImageFiltering
│   │   │       ├── imageFilterSet.ts Default implementation (worker batching)
│   │   │       ├── grayscale.filter.ts   Built-in: grayscale (worker-eligible)
│   │   │       └── retinex.filter.ts     Built-in: retinex  (worker-eligible)
│   │   ├── tunnel/         @dev/tunnel — WebSocket/HTTP relay
│   │   │   └── src/                  WsTunnel, WsTunnelBuilder, CLI entry
│   │   └── tools/          @dev/tools — shared build utilities (placeholder)
│   └── host/
│       └── www/            Dev harness & samples
│           ├── bundle/     Deployed UMD bundles
│           ├── samples/    babylon-camera, babylon-light, babylon-mesh, cesium-camera
│           └── index.html  Browser MCP provider
├── scripts/
│   ├── deploy-bundles.mjs  Copy bundles → www/bundle/
│   └── gen-cert.mjs        Generate self-signed TLS certificate
├── docs/
│   ├── behaviors/
│   │   ├── camera.md       Camera behavior — full tool reference
│   │   ├── light.md        Light behavior — full tool reference
│   │   └── mesh.md         Mesh behavior — full tool reference
│   ├── filters/
│   │   └── architecture.md Filter pipeline architecture & custom filters
│   ├── guides/
│   │   └── howto.md        Tips, recipes & common tasks
│   └── grammar.md          Grammar system documentation
└── package.json            Monorepo root (npm workspaces)

______________________________________________________________________

环境变量

______________________________________________________________________

npm脚本

______________________________________________________________________

延伸阅读

• 摄像头行为 --20个用于相机控制、动画、快照过滤和场景查询的工具
• 轻度行为 --17个用于光管理和环境照明的工具
• 网格行为 --13个用于网格可见性、变换、材质和标记的工具
• 语法系统 --如何在每个会话中解析工具描述
• 快照筛选器 --过滤器管道架构、工作协议、自定义过滤器
• 基本知识的 --技巧、食谱和常见任务
• 空间视图书 --愿景和路线图