INTERACTIVE DEMO

Traditional vs WebMCP

See the difference between a standard restaurant page and one with registered WebMCP tools. Same restaurant, same menu, completely different agent experience.

How to Run This Demo

1. Open either restaurant page in any browser — no extensions or special Chrome flags needed
2. Click the "Run AI Agent" button (bottom-left corner) on each page
3. Send the same message on both pages and watch the AI Agent make a reservation — the page updates in real time
4. Compare the experience: ~38s with DOM scanning vs ~8s with WebMCP tools
Note: The WebMCP page also registers real tools via navigator.modelContext.registerTool() using the @mcp-b/global polyfill. When browser-native WebMCP support ships (Chrome 146+), real AI agents will be able to consume these tools directly.
🍴
BEFORE

Traditional Restaurant

Standard HTML. No registered tools. AI agents must visually scan and guess at page structure to book a table.

Open Traditional Restaurant →
⚡
AFTER

WebMCP Restaurant

Same restaurant with 10 registered tools via navigator.modelContext.registerTool(). Agents call functions directly.

Open WebMCP Restaurant →

Feature Comparison

CapabilityTraditionalWebMCP
Agent discovers available actions✖ Scan DOM manually✔ registerTool() exposes them
Agent reads the menu⚠ Parse visible text✔ Calls get_menu tool
Agent checks table availability✖ No way to check✔ Calls get_availability tool
Agent fills reservation form⚠ Guess which field is which✔ Calls fill_reservation_form
Agent validates before submitting✖ Submit and hope✔ Calls validate_reservation
Agent searches by dietary needs✖ No metadata✔ Calls search_menu tool
Standard W3C API✖ N/A✔ navigator.modelContext

Suggested Demo Script

Open the Traditional Restaurant

Click "Run AI Agent" (bottom-left). Watch the agent struggle: scanning 62 DOM nodes, guessing field purposes, filling forms one field at a time, and clicking time slots by text match. Takes ~38 seconds.

Traditional page — ~38s

Open the WebMCP Restaurant — same task

Click "Run AI Agent". The agent discovers 10 registered tools, then fires crisp calls: get_availability, fill_reservation_form, confirm_reservation. Same result in ~8 seconds.

WebMCP page — ~8s

Inspect the registered tools

On the WebMCP page, click "Show Registered Tools" (bottom-right) to see all 10 tools the page exposes via navigator.modelContext.registerTool(). This is what any WebMCP-compatible agent would discover automatically.

WebMCP page

Talk about the "Why"

The implementation cost is minimal — registerTool() calls wrapping existing JS functions. The payoff: any WebMCP-compatible AI agent can interact with your app reliably. It's the difference between "AI can kinda use our site" and "our site is AI-native".