m{ai}geXR-3d-mcp

Der Multi-Framework-3D-MCP-Server, der tatsächlich funktioniert. Steuern Sie Live-Three.js-, A-Frame-, Babylon.js- und React Three Fiber-Szenen von jedem MCP-fähigen KI-Tool aus — GitHub Copilot, Claude Desktop, Cursor, was auch immer — mit In-World-Async-Chat, sodass Sie aus dem Inneren des 3D-Canvas mit der KI sprechen können, während diese die Welt um Sie herum neu gestaltet.

Alle vier Framework-Clients rendern übereinstimmende, visuell ausgerichtete Ausgaben aus einem einzigen, vereinheitlichten Szenenzustand. Gleicher Prompt, gleiche Szene, jede Engine.

Highlights

• 4 produktionsreife 3D-Clients — Three.js, A-Frame (1.7.0 + Bloom), Babylon.js (PBR), React Three Fiber + Zustand — alle visuell aufeinander abgestimmt

• WebXR / VR-Unterstützung — tauchen Sie in allen vier Clients in immersive VR ein; ein schwebendes Chat-Panel folgt Ihrem Blick, sodass Sie aus dem Headset heraus mit der KI sprechen können

• 9 KI-Anbieter direkt einsatzbereit — OpenAI (GPT-5.2), Anthropic (Claude Sonnet 4.6), Google Gemini 3.1 Pro, Mistral, Groq (Llama 3.3 70B), xAI Grok-4, Cohere Command R+, Together.ai und lokales Ollama

• 23 MCP-Werkzeuge — Objekte, Lichter, Kameras, Animationen, Umgebung, Szenen-I/O, Rückgängig/Wiederherstellen, Screenshots und In-World-Chat

• Persistente Animationen — Animationen überstehen das Neuladen der Seite; der Server speichert aktive Animationen im Szenenzustand und spielt sie beim erneuten Verbinden der Clients wieder ab

• Gleichzeitige Animationen — mehrere Eigenschaften (Position, Rotation, Skalierung) werden gleichzeitig auf demselben Objekt über alle Engines hinweg animiert

• Framework-spezifische System-Prompts — jeder Client weist die KI an, Geometrien, Materialien und Beleuchtung zu generieren, die in dieser Engine korrekt aussehen (adaptiert von der iOS maigeXR-App)

• In-World-Chat — drücken Sie ~, um mit der KI zu sprechen, ohne das 3D-Viewport zu verlassen; sie liest Ihre Nachrichten und antwortet in einem schwebenden Overlay

• Szenenbewusste KI — 20-stufige Konversationshistorie + Live-Szenenzustandsinjektion stellen sicher, dass die KI inkrementelle Änderungen vornimmt, keine destruktiven Neuerstellungen

• Ein Befehl — pnpm dev startet den Server + alle vier Clients gleichzeitig; öffnet automatisch den Three.js-Client in Ihrem Browser

• Hot-Swappable KI-Anbieter — wechseln Sie den Anbieter mitten in der Sitzung über das Client-Dropdown; kein Neustart erforderlich

Related MCP server: Unity MCP

Schnellstart

Option A — npx (kein Klonen erforderlich)

npx maige-3d-mcp

Dies startet den MCP-Server über stdio. Verweisen Sie Ihren MCP-Client (VS Code Copilot, Claude Desktop, Cursor) auf den Befehl npx maige-3d-mcp.

Option B — aus dem Quellcode

1. Installieren

cd mcp-webgpu
pnpm install

2. Konfigurieren

cp .env.example .env

Fügen Sie mindestens einen API-Schlüssel hinzu. Alle Variablen:

Jeder Anbieter hat auch eine *_MODEL Umgebungsvariable (z. B. OPENAI_MODEL=gpt-4.1) — siehe .env.example für alle verfügbaren Modelle.

Zwei Chat-Modi:

• Relay-Modus (kein Schlüssel erforderlich): Die MCP-Host-KI (Copilot, Claude Desktop) übernimmt den In-World-Chat durch Abfragen von getPendingUserMessages.

• Direkt-Modus (Schlüssel in .env): Der Server beantwortet den Chat autonom unter Verwendung des konfigurierten Anbieters.

3. Bauen & Ausführen

pnpm build:server # compile TypeScript once
pnpm dev # start server + all 4 clients

Clients öffnen sich unter:

4. Registrierung bei VS Code Copilot

Die .vscode/mcp.json ist vorkonfiguriert. Laden Sie VS Code neu und maige-3d-mcp erscheint im Copilot-Agenten-Modus.

Alternativ fügen Sie es zu Ihren globalen VS Code-Einstellungen hinzu:

// .vscode/mcp.json (already included)
{
 "servers": {
 "maige-3d-mcp": {
 "type": "stdio",
 "command": "node",
 "args": ["packages/server/build/main.js"],
 "env": {
 "OPENAI_API_KEY": "${env:OPENAI_API_KEY}",
 "ANTHROPIC_API_KEY": "${env:ANTHROPIC_API_KEY}",
 "GOOGLE_API_KEY": "${env:GOOGLE_API_KEY}"
 }
 }
 }
}

Unterstützte KI-Anbieter (9)

Wechseln Sie die Anbieter über das Dropdown im Chat-Overlay oder durch Ändern von CHAT_PROVIDER in .env. Überschreiben Sie das Modell pro Anbieter mit *_MODEL Umgebungsvariablen (siehe .env.example).

Verfügbare MCP-Werkzeuge (23)

Objekte

Lichter

createLight · updateLight · deleteLight — Ambient, Direktional, Punkt, Spot, Hemisphäre

Kamera

setCamera · flyToObject

Animation

animateObject · stopAnimation — Rotieren, Springen, Pulsieren, Schweben, Drehen, benutzerdefinierte Keyframes. Animationen bleiben im Serverzustand erhalten und werden beim Neuladen der Seite automatisch wiedergegeben. Mehrere Eigenschaften werden pro Objekt gleichzeitig animiert.

Umgebung

setEnvironment — Hintergrundfarbe, Nebel, Tone Mapping, Belichtung, Schatten-Umschalter

Szene

clearScene · loadScene · exportScene · undo · redo · takeScreenshot

In-World-Chat

MCP-Ressourcen

MCP-Prompts

WebXR / VR-Unterstützung

Alle vier Clients unterstützen immersive VR über WebXR. Klicken Sie auf die Schaltfläche 🥽 Enter VR (unten links), um eine Sitzung zu starten.

In VR schwebt das Chat-Panel vor Ihnen und folgt Ihrem Blick. KI-Antworten erscheinen in Echtzeit, sodass Sie die Szene aus dem Headset heraus steuern können.

Erfordert einen WebXR-fähigen Browser (Chrome 79+, Edge 79+, Meta Quest Browser) und ein VR-Headset oder die WebXR API Emulator-Erweiterung für Desktop-Tests.

In-World-Chat

Drücken Sie ~ (Backtick) oder klicken Sie unten rechts auf AI Chat. Geben Sie eine Nachricht ein, drücken Sie Enter, und die KI empfängt sie, handelt danach und antwortet — alles ohne das 3D-Viewport zu verlassen. Das Chat-Overlay enthält außerdem:

• Anbieter-Auswahl — KI-Anbieter im laufenden Betrieb wechseln

• System-Prompt-Editor — das Verhalten der KI pro Sitzung anpassen

• Szene löschen-Schaltfläche — die Welt sofort zurücksetzen

• Debug-Panel — drücken Sie Escape, um den Szenenzustand und Verbindungsinformationen zu untersuchen

Architektur

┌─────────────────────────┐
│ MCP Host (Copilot, │ stdio / JSON-RPC
│ Claude, Cursor, etc.) │◄────────────────────┐
└─────────────────────────┘ │
 │
 ┌──────────────────┴──────────────────┐
 │ MCP Server (Node.js) │
 │ │
 │ tools/ ─ 23 tool definitions │
 │ state/ ─ SceneStateManager + Undo │
 │ chat/ ─ ChatRelay (9 providers) │
 │ ws/ ─ WebSocket bridge :8083 │
 │ └── adapters/ (per-framework) │
 └──────────┬───────────────────────────┘
 │ WebSocket
 ┌────────────────┬───────────────┼───────────────┬────────────────┐
 ▼ ▼ ▼ ▼ │
┌──────────────┐ ┌──────────────┐ ┌───────────────┐ ┌──────────────┐ │
│ Three.js │ │ A-Frame │ │ Babylon.js │ │ R3F / React │ │
│ :5173 │ │ :5174 │ │ :5175 │ │ :5176 │ │
│ ┌──────────┐ │ │ ┌──────────┐ │ │ ┌──────────┐ │ │ ┌──────────┐ │ │
│ │VR/WebXR │ │ │ │VR/WebXR │ │ │ │VR/WebXR │ │ │ │VR/WebXR │ │ │
│ │ChatPanel │ │ │ │ChatPanel │ │ │ │ChatPanel │ │ │ │ChatPanel │ │ │
│ └──────────┘ │ │ └──────────┘ │ │ └──────────┘ │ │ └──────────┘ │ │
└──────────────┘ └──────────────┘ └───────────────┘ └──────────────┘

Jeder Client verbindet sich über WebSocket mit demselben MCP-Server. Der Server verwaltet einen einzigen kanonischen Szenenzustand und sendet Befehle über Framework-spezifische Adapter, die Vec3-Formate, Materialmodelle und Geometrienamen in die native Darstellung der jeweiligen Engine übersetzen.

Wichtige Server-Funktionen:

• Konversationshistorie — die KI erinnert sich an die letzten 20 Dialogschritte und vermeidet so destruktive Szenen-Neuerstellungen

• Szenenzustandsinjektion — jeder KI-Aufruf enthält eine Zusammenfassung der aktuellen Objekte, Lichter und Umgebung, damit die KI weiß, was bereits existiert

• Framework-spezifische System-Prompts — jeder Client weist die KI an, Geometrien, Materialien und Beleuchtung zu generieren, die in dieser spezifischen Engine korrekt aussehen

• Rückgängig/Wiederherstellen — 20-stufiger Snapshot-Stack auf dem Server, ausgelöst über MCP-Werkzeuge

• Animationspersistenz — aktive Animationen werden im Szenenzustand gespeichert und beim erneuten Verbinden wiedergegeben, sodass sich wiederholende Animationen das Neuladen der Seite überstehen

Projektlayout

mcp-webgpu/
├── .env.example ← all env vars + model lists documented
├── .vscode/mcp.json ← pre-configured for VS Code Copilot agent mode
├── package.json ← pnpm workspace root
├── PLAN.md ← full architecture plan
├── packages/
│ ├── server/ ← MCP server (TypeScript / Node)
│ │ └── src/
│ │ ├── main.ts ← entry + .env discovery
│ │ ├── types.ts ← shared types
│ │ ├── tools/ ← 23 MCP tool definitions
│ │ ├── handlers/ ← tool / prompt / resource handlers
│ │ ├── state/ ← SceneStateManager + UndoStack
│ │ ├── chat/ ← ChatRelay (9 providers) + MessageQueue
│ │ └── ws/ ← WebSocket server + framework adapters
│ │ └── adapters/ ← ThreeAdapter, AFrameAdapter,
│ │ BabylonAdapter, R3FAdapter
│ ├── client-threejs/ ← Three.js (Vite)
│ │ └── src/
│ │ ├── scene.ts ← SceneManager
│ │ ├── commands/ ← command dispatcher
│ │ ├── overlay/ ← ChatOverlay UI
│ │ └── vr/ ← VRSetup + VRChatPanel (WebXR)
│ ├── client-aframe/ ← A-Frame 1.7.0 + bloom (Vite)
│ │ └── src/
│ │ ├── scene.ts ← A-Frame SceneManager
│ │ ├── commands/ ← command dispatcher
│ │ └── overlay/ ← ChatOverlay UI
│ ├── client-babylonjs/ ← Babylon.js + PBR (Vite)
│ │ └── src/
│ │ ├── scene.ts ← Babylon SceneManager
│ │ ├── commands/ ← command dispatcher
│ │ └── overlay/ ← ChatOverlay UI
│ └── client-r3f/ ← React Three Fiber + Zustand (Vite)
│ └── src/
│ ├── App.tsx ← React app shell
│ ├── SceneCanvas.tsx ← R3F canvas + XR wrapper
│ ├── store/ ← Zustand scene store
│ ├── commands/ ← command dispatcher
│ ├── overlay/ ← ChatOverlay UI
│ └── vr/ ← VRChatPanel (React XR component)

Roadmap

• [x] Phase 1 — Three.js-Client + vollständiger Werkzeugsatz + In-World-Chat

• [x] Phase 2 — A-Frame-Client (1.

Maintenance

Resources

• NPM Package
• GitHub Repository
Need Help?Related Servers

Tools

• addBehaviorA
• animateObjectA
• clearPendingMessagesA
• clearSceneA
• cloneObjectC
• createLightC
• createObjectA
• createParticlesA