Relay Room

Inspiration

Most WebMCP demos focus on task automation. I wanted to test a different use: making the tool interface part of a game.

Relay Room is an asymmetric escape room. The player can see the room and use its controls, but cannot access the remote systems. Relay can operate those systems through WebMCP, but cannot see the room. Progress depends on the information they exchange through an AI agent connected in the browser.

What it does

Relay Room is played by one person and Relay (the AI agent, as in ChatGPT or Gemini in WebMCP in Chrome).

The player reads visual clues, connects cables and activates controls. Relay receives a private manual and eight WebMCP tools to inspect the facility, decode signals, operate remote systems and release the exit door. This version has only one simple level to understand the game mechanics.

The game has three stages, randomized puzzles, scoring, saved progress, voice lines, a solo test mode and offline support as an installable PWA.

How I built it

I used Next.js, React and TypeScript. The WebMCP integration uses the imperative API, with eight tools registered through document.modelContext.registerTool().

The interface and the WebMCP handlers share the same game state. Visual clues stay in the interface. WebMCP only exposes the manual, system state and remote actions that Relay is allowed to use.

Local storage keeps the current mission and best score.

Challenges

The first problem was deciding what each participant was allowed to know and do. If a tool reveals the visual clues, the player is no longer necessary. If the tools expose too little information, Relay cannot reason about the puzzle.

I also had to account for two connection paths: Chrome with a compatible WebMCP extension and the built-in browser in ChatGPT Desktop. They have different setup and permission flows, so the onboarding explains both options and verifies that the eight tools are available before starting.

I think we are still in early stages of user experience for doing these kinds of interaction.

What I learned

WebMCP tool descriptions are part of the interface. Relay needs to know when to call each tool, what it changes and what to do with the result.

Capability detection is not enough. The page also needs to explain which browser or client to use, where it must remain open and which permissions the player needs to approve.

There is a need for a future version of WebMCP to register listeners, so the page can also send messages to connected agent.

Built With

• ai-agents
• chatgpt
• css
• html
• javascript
• next.js
• openai
• pwa
• react
• service-worker
• typescript
• vite
• webmcp