Why I built it
A checkout error is a dead end for a customer. They do not know whether to refresh, wait, or contact support. The website often knows what failed, but that context never reaches the customer's agent.
I built Host Whisperer to make that moment useful instead of frustrating.
What it does
A developer connects their host and downloads one JavaScript file for their website. That file contains a small WebMCP runtime and the exact recovery actions the developer has allowed.
In the demo, Big Pink's checkout returns a 503 because its checkout service is unhealthy. Host Whisperer offers help beside the error. The customer asks ChatGPT to fix checkout, and ChatGPT makes one WebMCP tool call.
Host Whisperer checks the incident privately, applies the approved recovery, and verifies checkout before reporting success. The customer sees simple progress instead of infrastructure logs. Their cart is preserved, and ChatGPT never places the order for them. If the problem is unsupported or verification fails, the tool escalates it instead of pretending it worked.
The hosting operation is simulated so the demo is repeatable. The WebMCP handoff, state changes, recovery flow, and verification all run in the browser.
Why WebMCP
Without WebMCP, an assistant has to guess from the page or from whatever the customer can describe. Here, the website exposes one purpose-built support handoff tied to its current state.
The customer supplies the intent, ChatGPT carries it through a structured tool call, and Host Whisperer uses the website's private diagnostics and developer-approved recovery. No one part can safely do the whole job alone.
How I built it
The setup experience is React and TypeScript. It generates a self-contained, origin-bound plugin. The host token is never stored in the browser or included in the downloaded file.
The runtime registers one tool with document.modelContext.registerTool(...). It includes a small incident state machine, a Shadow DOM support panel, context sanitization, single-use recovery, replay protection, progress updates, and post-recovery verification. WebMCP is registered only on the customer website.
What I learned
The hardest part was deciding what the agent should actually do. Giving a customer's assistant raw logs or general infrastructure access would be unsafe and confusing. I ended up with one high-level delegation tool and kept the technical work behind Host Whisperer.
My main takeaway is that WebMCP can let a website define a narrow support contract: what evidence is safe, what action is allowed, and what must be verified before success is returned.
Built With
- indexeddb
- react
- render
- shadow-dom
- typescript
- vite
- webmcp