Skip to content

MCP.md

Latest commit

 

History

History
55 lines (40 loc) · 3.66 KB

MCP.md

File metadata and controls

55 lines (40 loc) · 3.66 KB
Raw

Build with AI: the ViroReact MCP server 🤖

The ViroReact MCP server connects your AI coding agent (Claude, Claude Code, Cursor, Windsurf, Codex) to ViroReact. Your agent doesn't just write AR/VR code; it can run your scene in a real renderer and check it.

It's free with a ReactVision Studio account.

What your agent gets

  • The full, current ViroReact component catalogue (props and real event names), working examples and platform support (iOS, Android, Meta Quest, visionOS)
  • Run scenes in ViroReact's web renderer and get back actual frames, including simulated taps (AR-only parts such as plane detection aren't simulated, so check those on a device)
  • Structural checks that catch misspelled props and components that don't exist
  • Crash and error log diagnosis that matches your error against known ViroReact traps and falls back to a docs search
  • Performance budget checks that flag 3D models too heavy for your target headset
  • Render comparison that shows exactly what changed between two renders
  • Studio ↔ code conversion between ReactVision Studio scenes and ViroReact TSX
  • Scene templates: generate a ready-to-use scene and validate it before you run it

Set it up (2 minutes)

  1. Create a free ReactVision Studio account: https://studio.reactvision.xyz/auth/register

  2. Add this server URL to your coding agent, then sign in with your Studio login:

    https://mcp.reactvision.xyz/viro
    • Claude / Claude Code: add "ReactVision: ViroReact MCP" from the Claude connector directory (https://claude.ai/directory/connectors/reactvision-viroreact-mcp) and click Connect. In Claude Code you can instead run this once, from any folder: 
      claude mcp add --transport http --scope user reactvision-viro https://mcp.reactvision.xyz/viro
      Then start claude, run /mcp, select reactvision-viro, choose Authenticate and sign in with your Studio login in the browser (pick your team, then click Connect).
    • Cursor, Windsurf, Codex: add it as a remote (HTTP) MCP server with the same URL, then sign in when prompted. Codex needs two commands: 
      codex mcp add reactvision-viro --url https://mcp.reactvision.xyz/viro
codex mcp login reactvision-viro
      Windsurf uses serverUrl instead of url in ~/.codeium/windsurf/mcp_config.json. In Studio, your team's AI Assistants tab has copy-paste setup for every client.

Full setup docs: https://viro-community.readme.io/docs/viroreact-mcp-server

Prompts to try

  • "Use the ViroReact MCP to build an AR scene with a 3D model and some lighting, then run it and show me the frame."
  • "Check this scene for invalid props or components and fix them."
  • "Here's my crash log. Use the ViroReact MCP to diagnose it."
  • "Is the GLB model at within the performance budget for Meta Quest?" (the server downloads the model itself, so put the .glb at a public URL first; up to 50 MB)
  • "Convert this Studio scene to ViroReact TSX and tell me what could not be converted: " (get the JSON with curl -H "x-api-key: <your API key>" https://platform.reactvision.xyz/functions/v1/scenes/<scene-id>; create the key in your team's API Keys tab)

Tutorial: Build a geospatial AR app in React Native with Claude Code and ViroReact

Workshop

Wed Oct 7, 8:00 AM PT, live on the Discord stage (recorded): building with AI agents and the ViroReact MCP server.

Using the MCP server counts toward Technical Implementation. Tell the judges how you used it in your tech stack and demo video.