MCP覆盖
一个WebXR应用程序，其中AI助手(加维斯)通过MCP（模型上下文协议）工具驱动的浮动UI面板覆盖您的现实世界视觉，所有这些都在Meta Quest 3的增强现实中实现。
它的作用
看看现实世界中的一些东西。向Garvis咨询。获得即时、空间锚定的AR叠加，其中包含丰富的信息。
例子： 在杂货店，看看不同品牌的鸡肉。Garvis通过计算机视觉检测它们，通过MCP工具（网络搜索、营养API）进行研究，并在AR空间中呈现锚定在每个产品上的浮动UI面板——由语音或凝视触发。
关键能力
- 语音优先交互 --自然地说话以引发行动。实时STT（Deepgram）→ 法学硕士（克劳德）→ TTS（ElevenLabs）通过WebSocket。
- 凝视锚定覆面 --视觉研究结果显示在你开始说话时看到的确切3D点上，而不是作为静态HUD。
- MCP工具生态系统 --可通过任何MCP服务器进行扩展。随附地铁抵达信息、花旗自行车状态、体育直播和视觉研究工具。
- 可拖动三维窗口 --每个面板都是一个原生Three.js窗口，您可以在3D空间中抓取、重新定位和调整大小。立场在会议期间持续存在。
- 纯WebGL渲染 --没有DOM覆盖（Quest 3不支持它们）。所有UI都呈现为Three.js几何体和文本。
建筑
User speaks → Mic (16kHz PCM) → WebSocket → Garvis server
→ Deepgram STT → Claude LLM (with MCP tools)
→ Claude calls MCP tool → MCP Bridge → external MCP servers
→ Tool result → client renders 3D panel in AR
→ Claude generates spoken response → ElevenLabs TTS → audio playbackXR Scene
├── ChatWindow3D (conversation transcript, draggable)
├── VoiceIndicator3D (status sphere: listening/thinking/speaking)
├── SubwayArrivals3D (MCP tool result, voice-triggered)
├── CitiBikeStatus3D (MCP tool result, voice-triggered)
└── ObjectAnnotations3D (gaze-anchored vision research results)子项目
| 目录 | 用途 | 堆栈 | 端口 |
|---|---|---|---|
xr-mcp-app/ | 统一的XR应用程序——将MCP结果渲染为3D叠加 | React+Three.js+@React Three/XR | 5174 |
garvis/ | 语音助手服务器+XR客户端 | Python FastAPI+FastMCP、React | 8000 |
mcp-app-sandbox/ | 基于浏览器的MCP交互工具+托管的MCP服务器 | React+Vite，Express | 5180/5181 |
vision-research-server/ | research-visible-objects MCP工具（YOLO+克劳德视觉） | Python快速API+快速MCP | 3004 |
vision-explorer2/ | 独立实时对象检测应用程序 | React+ONNX Runtime，FastAPI | 5173 |
manim-mcp/ | 使用Manim动画渲染进行AI数学辅导 | Next.js 15，Python FastAPI | 3000 |
MCP服务器
| 服务器 | 端口 | 工具 |
|---|---|---|
| MTA地铁 | 3001 | 地铁到达时间 |
| 花旗自行车 | 3002 | 车站状态，自行车可用性 |
| CrackStreams | 3003 | 体育直播流搜索+播放 |
| 视觉研究 | 3004 | 物体检测+克劳德视觉丰富 |
快速开始
先决条件
- Node.js 18+（通过nvm管理）
- Python 3.11–3.13（通过uv管理）
- API密钥在
.env文件夹：ANTHROPIC_API_KEY,DEEPGRAM_API_KEY,ELEVENLABS_API_KEY
运行一切
./run.sh # Starts all 6 services, Ctrl+C stops all这将启动MTA（3001）、Citibike（3002）、CrackStreams（3003）、Vision Research（3004）、Garvis（8000）和XR应用程序（5174）。
运行个人服务
# XR app only (needs MCP servers + Garvis running)
cd xr-mcp-app && npm run dev
# Garvis server + client
cd garvis && ./run-all.sh
# Vision research server
cd vision-research-server && uv run uvicorn server:app --host 0.0.0.0 --port 3004 --reload访问XR应用程序
- 打开
https://localhost:5174在Quest 3浏览器上 - 轻按 输入AR 开始沉浸式会话
- 与Garvis交谈以触发MCP工具
访问麦克风和WebXR摄像头需要HTTPS。Vite-dev服务器会自动处理此问题。
技术栈
前端： React 19，Three.js，@reactthree/fiber，@React-Three/xr，TypeScript，Vite
后端： Python快速API、快速MCP、Uvicorn
AI/ML： Claude（法学硕士+视觉）、Deepgram（STT）、ElevenLabs（TTS）、YOLOv8（物体检测）
协议： MCP（基于HTTP的JSON-RPC 2.0）、WebSocket（语音管道）、SSE（流式响应）
发展
类型检查
cd xr-mcp-app && npx tsc -b代码检查
cd garvis/xr-client && npm run lint
cd manim-mcp/server && uv run ruff check . && uv run black .测试
cd garvis/server && uv run pytest
cd manim-mcp/server && uv run pytest已知的戈查斯
- 任务3忽略
dom-overlay--所有XR UI必须是Three.js 3D对象，而不是HTML。 - 端口8000冲突 --Garvis和vision-explorer2都默认为8000。挑一个。
- Python版本 --Garvis需要3.11–3.13（TensorFlow约束）。使用
uv python pin 3.13如果需要的话。 - WebXR原始摄像头访问 --尚未在Quest浏览器上可用（截至v85）。返回到getUserMedia。
- 首次检测速度较慢 --YOLOv8和DeepFace型号在首次使用时即可下载。
远程调试（任务3）
adb devices # Verify Quest connected
adb forward tcp:9222 localabstract:chrome_devtools_remote # Forward DevTools
curl -s http://localhost:9222/json | python3 -m json.tool # List tabs然后通过Chrome DevTools协议连接以读取控制台日志。看 CLAUDE.md 完整的Node.js脚本。