# WebMCP Replay Room

> A tennis replay workspace where a person and a browser agent review shots together through six reversible Agent Forge capabilities.

- Tags: Web, Agents, AI, Open source
- Areas: [Agent-Ready Web Applications](https://dreamawakelabs.com/agent-ready-web.md), [AI agents & business automation](https://dreamawakelabs.com/agents.md), [Custom engineering](https://dreamawakelabs.com/software.md)

## What it is

Reviewing practice footage is slow: a player knows a shot felt wrong but has to scrub through a session to find others like it and decide what to work on next. Replay Room is a review tool where an agent does the searching and comparing through the same operations the app uses, and every change it makes is visible to the person and reversible.

## What we built

A Vue 3 application with typed domain functions for shots, shot sets, and technique metrics. Six capabilities defined with Agent Forge: three read, three reversible-write, registered over WebMCP with fallbacks for earlier browser builds. Without WebMCP the app runs as an ordinary interactive demo. Sessions load from a URL parameter or a dropped JSON file and are validated against a schema before use. Released under Apache-2.0 for the 2026 WebMCP Challenge.

## How it is used

A person selects a shot that feels wrong. The agent reads it, finds similar ones, puts them in the review rail, compares them with stronger references, and highlights the differences. On request it writes the issue into the editable coaching plan. None of it clicks or scrapes the interface.

## Behind the experience

- [Agents & Operations](https://dreamawakelabs.com/technology#platform-agents): Tools for people and agents. Systems: [Agent Forge](https://dreamawakelabs.com/technology#agent-forge), [Agent-native web apps](https://dreamawakelabs.com/technology#web-apps)

## Our technology

- Agent Forge: Six capabilities, three read and three reversible-write, registered over WebMCP.
- Agent-native web apps: One of our agent-native web apps.

## Built with

Vue 3, TypeScript, Vite, Agent Forge, WebMCP, Vercel Blob

## Media

- WebMCP Replay Room demo session: a list of twelve shots on the left with shot 3, a backhand marked "Off balance on recovery", selected; a center panel noting that video was not captured for this shot; and a right panel showing the main issue "Lost balance through contact" with metric scores and buttons to find similar shots or make it the next focus. (The demo on its synthetic session. Agent tools appear in browsers with WebMCP enabled.): https://dreamawakelabs.com/work/webmcp-replay-room/overview.webp

## Links

- [Open the live demo](https://webmcp-replay-room-seven.vercel.app) (Public demo)
- [Source on GitHub](https://github.com/DreamAwakeLabs/webmcp-replay-room) (Source code)

## Credit

Designed and built by Dream Awake Labs. Open source under Apache-2.0. The demo session is synthetic.

[All projects](https://dreamawakelabs.com/work.md)