Inspiration
Most web agents still interact with websites indirectly: read the page, inspect controls, then infer what action to take.
WebMCP provides a cleaner model. A site can expose structured capabilities while still owning its UI, state, permissions, and business rules.
Outcome Network explores what that looks like for a real multi-provider business workflow.
What it does
The demo coordinates opening a 15-person Toronto office with two constraints:
- CAD 12,000 maximum budget
- Everything ready by Friday
Three providers supply furniture, networking, and facilities services.
Through WebMCP, ChatGPT can search offerings, check inventory and availability, and create temporary resource holds after the user approves the plan.
Those holds are reversible. ChatGPT can release them and restore provider availability without changing the approved plan.
Every action is recorded in a visible audit trail with the capability, provider, result, and whether it came from WebMCP or the human workspace.
How we built it
The app uses Next.js, React, TypeScript, Tailwind CSS, Vercel, and the native document.modelContext WebMCP API.
The production workflow exposes six tools, including:
search_productscheck_inventorycheck_service_availabilityreserve_outcome_resourcesrelease_outcome_reservations
WebMCP calls use the same domain logic and state as the UI rather than separate mock handlers.
The production path uses same-origin WebMCP for reliability. I also built an experimental cross-origin implementation using allow="tools", explicit exposedTo origins, and getTools({ fromOrigins }).
Challenges we ran into
The main challenge was working with an emerging browser API. WebMCP support behaved differently across local Chrome, public HTTPS, and ChatGPT's in-app browser.
Rather than hiding those differences behind a polyfill, I added runtime diagnostics and kept the reliable production path separate from the experimental cross-origin path.
The other challenge was authority and failure handling. Approval is tied to the current plan, so changing the plan invalidates stale approval. Multi-provider reservation failures also trigger compensating releases so partial holds are not left behind.
Accomplishments that we're proud of
The WebMCP integration is part of the application rather than a demo wrapper.
In the deployed app, ChatGPT can:
- invoke real provider capabilities
- mutate the same state shown in the UI
- create six temporary holds across three providers
- release those holds and restore availability
- leave a visible WebMCP audit trail
The project also supports deterministic supplier failure, replanning, and rollback after partial reservation failure.
What we learned
Tool discovery is only the beginning.
Once agents can change application state, the harder questions are around authority, stale approvals, partial failure, reversibility, and auditability.
That led to explicit approval boundaries, typed schemas, shared state, reversible operations, and compensating rollback.
What's next for Outcome Network
The next step is connecting the same model to real independent WebMCP-enabled businesses across different origins.
The goal is not to build another marketplace. Businesses should be able to keep their own applications and rules, expose the capabilities they choose, and let agents coordinate those capabilities into useful outcomes.
Built With
- ai-agents
- chatgpt
- chrome
- next.js
- react
- tailwind-css
- typescript
- vercel
- webmcp
Log in or sign up for Devpost to join the conversation.