AI导哈

3D场景操作工具

VibeCAD是一款结合自然语言处理和Model Context Protocol (MCP)的创新3D场景操作系统，允许用户通过文本命令在Babylon.js环境中创建和管理3D对象。

  • by VibeCAD
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 VibeCAD/babylonjs-mcp

使用说明

VibeCAD-基于人工智能的MCP 3D场景操纵

VibeCAD是一个创新的3D场景操作系统，它将自然语言处理与模型上下文协议（MCP）相结合，在Babylon.js环境中创建和管理3D对象。用户可以通过web界面或Claude Desktop使用简单的文本命令创建3D场景。

核心功能

VibeCAD使用户能够：

  • 使用自然语言命令创建三维对象
  • 操纵对象（移动、旋转、缩放、颜色）
  • 通过直观的GUI管理场景对象
  • 使用AI助手（OpenAI或Claude）来解释命令
  • 使用Babylon.js进行实时3D可视化

当前能力

这个版本的MCP能够创建圆柱体、立方体和球体正在工作的原始形状，但由于某种原因，环面不能。 创建、删除、选择工具都在工作。列表功能不起作用。 GUI中的浏览器控制台日志显示正在生成babylon.js Torus，但它没有被渲染。 接下来的步骤将涉及增加MCP服务器的功能，以处理更复杂的形状。

架构概述

graph TB
    subgraph "Input Sources"
        User1[User via Browser]
        User2[User via Claude Desktop]
    end
    
    subgraph "AI Processing"
        OpenAI[OpenAI API]
        Claude[Claude Desktop]
    end
    
    subgraph "MCP Server"
        STDIO[STDIO Interface]
        HTTP[HTTP API :8081]
        WS[WebSocket Server :8080]
        Core[MCP Core Logic]
    end
    
    subgraph "Frontend"
        GUI[React GUI :5173]
        Babylon[Babylon.js Scene]
        WSClient[WebSocket Client]
    end
    
    User1 -->|Text Input| GUI
    GUI -->|API Call| OpenAI
    OpenAI -->|Structured Commands| HTTP
    
    User2 -->|Text Input| Claude
    Claude -->|MCP Protocol| STDIO
    
    HTTP --> Core
    STDIO --> Core
    Core -->|Commands| WS
    WS -->|Real-time Updates| WSClient
    WSClient --> Babylon
    
    style GUI fill:#e1f5fe
    style MCP Server fill:#fff3e0
    style Babylon fill:#c8e6c9

MCP服务器功能

可用工具

1. 创建对象

在场景中创建新的三维对象。

{
  "shape": "box|sphere|cylinder|cone|torus",
  "name": "unique_object_name",
  "position": { "x": 0, "y": 1, "z": 0 },
  "size": 2,
  "color": { "r": 1, "g": 0, "b": 0 }
}

2. 删除对象

从场景中删除对象。

{
  "name": "object_name"
}

3. 选择对象

选择要操纵的对象。

{
  "name": "object_name"
}

4. list_objects

列出场景中当前的所有对象。

{}

项目结构

VibeCAD/
├── babylonjs-mcpV2/          # MCP Server
│   ├── src/
│   │   ├── core/             # Core MCP logic
│   │   │   ├── mcp-server.ts
│   │   │   ├── types.ts
│   │   │   ├── babylon-scene.ts
│   │   │   ├── command-parser.ts
│   │   │   └── websocket-client.ts
│   │   └── mcp-stdio-server.ts  # Main server file
│   ├── dist/                 # Compiled JS
│   └── package.json
│
└── gui/gui/                  # Frontend Application
    ├── src/
    │   ├── App.tsx           # Main React component
    │   ├── App.css           # Styles
    │   └── main.tsx          # Entry point
    ├── public/
    └── package.json

技术架构

WebSocket连接

  • 目的：MCP服务器和GUI之间的实时双向通信
  • 端口：8080（可通过以下方式配置 MCP_WS_PORT)
  • 协议：JSON消息格式的标准WebSocket
  • 特性:
    • 自动重新连接（5次尝试，间隔3秒）
    • 连接状态监控
    • 消息确认系统

HTTP API包装器

  • 目的：基于网络的人工智能服务和MCP服务器之间的桥梁
  • 端口：8081（可通过以下方式配置 MCP_HTTP_PORT)
  • 端点:
    • GET /health -服务器状态和连接信息
    • POST /tools/:toolName -执行MCP工具
  • 特性:
    • 浏览器访问已启用CORS
    • RESTful设计
    • 结构化JSON响应

通信路径

浏览器路径（OpenAI集成）

  1. 用户在GUI中输入自然语言命令
  2. GUI向OpenAI API发送文本
  3. OpenAI解释并返回结构化工具调用
  4. GUI对MCP服务器的HTTP API进行HTTP POST
  5. MCP服务器处理命令并通过WebSocket发送
  6. GUI接收WebSocket消息并更新3D场景

Claude桌面路径

  1. 用户在Claude Desktop中输入命令
  2. Claude直接使用MCP工具进行解释
  3. Claude通过STDIO接口调用MCP服务器
  4. MCP服务器处理命令并通过WebSocket发送
  5. GUI接收WebSocket消息并更新3D场景

架构合理性

为什么选择HTTP API？

  • 浏览器安全性：浏览器不能直接访问STDIO接口
  • CORS支持：允许来自web应用程序的跨源请求
  • RESTful设计：web开发人员熟悉的模式
  • 无状态：每个请求都是独立的，提高了可靠性
  • 调试：易于使用curl或Postman等工具进行测试

为什么使用WebSocket进行GUI更新？

  • 实时：无轮询的即时更新
  • 双向：允许未来的功能，如状态同步
  • 高效：对于频繁更新，开销低于HTTP
  • 事件驱动：自然适合UI更新

为什么是双接口（STDIO+HTTP）？

  • 灵活性：支持桌面和web客户端
  • MCP合规性：标准MCP协议的STDIO
  • Web兼容性：基于浏览器的AI服务的HTTP
  • 统一逻辑：单个代码库服务于两个接口

配置

环境变量

MCP服务器

  • MCP_WS_PORT -WebSocket端口（默认值：8080）
  • MCP_HTTP_PORT -HTTP API端口（默认：8081）

图形用户界面

  • VITE_MCP_WS_URL -WebSocket URL（默认值：ws://localhost:8080）
  • VITE_MCP_HTTP_URL -HTTP API URL（默认值：http://localhost:8081)

入门指南

先决条件

  • Node.js 18+
  • npm或纱线
  • OpenAI API密钥（用于浏览器路径）
  • Claude桌面（用于MCP路径）

安装

  1. 安装MCP服务器
cd babylonjs-mcpV2
npm install
npm run build:server
  1. 安装GUI
cd gui/gui
npm install

运行应用程序

  1. 启动MCP服务器
cd babylonjs-mcpV2
node dist/mcp-stdio-server.js
  1. 启动GUI
cd gui/gui
npm run dev
  1. 打开浏览器 引导到http://localhost:5173

使用示例

通过浏览器（OpenAI）

  • “创建一个红色立方体”
  • “在立方体上方制作一个蓝色球体”
  • “删除多维数据集”
  • “连续创建三个绿色圆柱体”

通过克劳德桌面

使用以下配置Claude Desktop：

{
  "mcpServers": {
    "babylonjs": {
      "command": "node",
      "args": ["/path/to/babylonjs-mcpV2/dist/mcp-stdio-server.js"]
    }
  }
}

然后让Claude使用可用工具创建3D对象。

未来的增强功能

  • 其他MCP工具（移动、旋转、缩放、更改颜色）
  • 高级对象分组和层次结构
  • 场景持久化和加载
  • 多用户协作
  • 导出为3D文件格式
  • 物理仿真集成

许可证

MIT许可证-有关详细信息，请参阅许可证文件

相关 MCP