AI导哈

AR智能助手

MCP Overlay是一款基于WebXR的AR应用，通过AI助手Garvis在现实世界中叠加浮动UI面板，提供即时信息查询和交互功能。

  • by brianmatzelle
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 brianmatzelle/mcp-overlay

使用说明

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 playback

XR 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应用程序

  1. 打开 https://localhost:5174 在Quest 3浏览器上
  2. 轻按 输入AR 开始沉浸式会话
  3. 与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脚本。

相关 MCP