Inspiration
A cafe owner may already have a physical or digital menu, but customers still crowd around one screen, repeat their choices, and manually reconcile the final order.
AI can help structure that information, but giving an agent unrestricted authority creates a more serious problem: it could publish incorrect items, confirm choices for someone else, or trigger a payment without proper approval.
Shared Room MCP explores a safer commercial pattern:
AI prepares. Humans approve.
What it does
Shared Room MCP is an open-source WebMCP workspace for coordinated ordering and other shared decisions.
A merchant provides a menu image. Local OCR extracts the text, and Codex performs a visual review before preparing a structured draft. The merchant compares the draft with the original evidence, corrects uncertain fields, and explicitly approves it.
Only after merchant approval can the menu be published to customers.
Customers enter an isolated room through a shared link. Each customer can:
- view the published menu
- select items independently
- see their own choices and total
- confirm only their own order
The merchant receives the combined result and can download a clear HTML or PDF summary.
Payment remains outside the agent's authority.
How we built it
The application uses Node.js, Express, Socket.IO, HTML, CSS, and JavaScript. Zeabur hosts the shared room, review workflow, synchronized state, and export surface.
When WebMCP is available, the page registers structured tools through:
document.modelContext.registerTool()
The tool surface includes:
inspect_roomget_task_routerget_claim_auditget_formula_contractget_trust_layer_contractsuggest_next_actionscreate_action_proposal
WebMCP tools are exposed according to the user's role.
Customer routes receive a read-only tool surface. The merchant route can receive a structured action proposal, but the proposal remains a draft until the merchant reviews and approves it.
After publication, parsed menu items are locked from agent-side replacement. Customers cannot access merchant approval actions, and the agent cannot confirm another person's order.
The deployed application does not need to store a paid model provider key. Local OCR handles text extraction, while Codex performs the visual review and draft-preparation role through the browser workflow.
What makes it useful with WebMCP
This is not an agent blindly clicking through a webpage.
Without WebMCP, an assistant must infer application state from pixels or return instructions that the user manually copies into the page.
With WebMCP, the application exposes explicit, structured, role-aware tools. The agent can inspect the room, understand its current state, identify missing confirmations, and prepare a reviewable proposal.
The responsibility is deliberately divided:
- The agent handles inspection and draft preparation.
- The merchant verifies the original evidence.
- Customers control their own selections.
- The merchant controls publication and final approval.
- Payment stays outside the automated workflow.
This creates a practical trust boundary for commercial AI adoption.
Challenges
The main challenge was not simply extracting text from an image. It was keeping the agent useful without giving it excessive authority.
We had to separate:
- OCR evidence from approved structured data
- agent proposals from merchant decisions
- merchant permissions from customer permissions
- individual confirmations from the combined result
- order preparation from payment authorization
We also had to keep English and Chinese routes consistent, prevent stale room state from crossing room boundaries, and make the workflow fail closed when required approval was missing.
What we learned
WebMCP is most useful when the website is designed for humans and agents together.
An agent does not need unrestricted backend access to create value. A small, explicit tool surface can remove repetitive work while keeping irreversible decisions under human control.
Human-in-the-loop review is not an interruption to the workflow. It is part of the product architecture.
What's next
The same pattern can support many commercial workflows:
- restaurant and drink ordering
- repair estimates and maintenance approvals
- group purchases and threshold checks
- appointment and booking preparation
- procurement request review
- rental and shared-cost coordination
- salon or clinic intake
- event and venue coordination
The next production step is stronger identity management, merchant administration, audit history, and a database such as PostgreSQL or Redis for larger deployments.
The hackathon version uses lightweight single-service persistence and demonstrates the core contract:
AI prepares structured work through WebMCP. Humans retain authority over every commitment.
Built With
- chatgpt
- chrome
- codex
- css
- express.js
- github
- html
- javascript
- license
- mit
- multer
- node.js
- sharp
- socket.io
- webmcp
- zeabur
Log in or sign up for Devpost to join the conversation.