The Pizza Analogy — Explained to Anyone
Imagine you have a super-smart AI assistant. You tell it: "Go to Pizza.com and order a large pepperoni."
The AI puts on glasses, looks at the screen, hunts for the pizza image, moves a fake cursor, and hopes it clicks the right button. If the website moves the Order button, the AI gets confused. Fragile, slow, expensive — wastes thousands of tokens just reading pixels.
Pizza.com gives the AI a direct phone number: "Just call add_to_cart and checkout. I handle the rest." Instant, reliable, 89% cheaper. No clicking, no guessing, no broken automations.
The one-line summary: MCP connects AI to your data (backend plumbing). WebMCP connects AI to your website's actions (the light switch in the room). You need both for the house to work.
Google's WebMCP in Chrome 146: The Complete Developer Guide
A deep dive into WebMCP — what it is, why it matters, how it works under the hood, real code examples for both the declarative and imperative APIs, live testing results from Chrome Canary 146, and what Agent SEO (AEO) means for your business. The most complete WebMCP guide on the internet.
How WebMCP Works — Two Modes
Google is building WebMCP directly into the browser. Two implementation modes — choose based on your use case.
Declarative Mode — HTML Attributes
The easy path. Add webmcp-* attributes to your existing HTML. No JavaScript required.
<!-- WebMCP Declarative: expose a flight search form to AI agents -->
<form webmcp-action="search_flights"
webmcp-param-destination="to"
webmcp-param-date="departure">
<input name="to" placeholder="Destination">
<input name="departure" type="date">
<button type="submit">Search</button>
</form>The browser reads these attributes and tells the AI: this form searches flights, it needs destination and date, you can call it without rendering the page.
Imperative Mode — JavaScript API
Full power. Use navigator.modelContext to expose complex functions directly to AI agents.
// WebMCP Imperative: expose checkout function to AI agents
if (navigator.modelContext) {
navigator.modelContext.registerTool({
name: "checkoutCart",
description: "Completes purchase of items in cart",
handler: async (params) => {
// your existing checkout logic
return { success: true, orderId: "ORD-123" };
}
});
}The AI can now directly invoke checkoutCart() as if it were a function — no clicking, no scraping, no guessing.
Security Model — Why Enterprises Will Adopt It
WebMCP is secure by design. The biggest enterprise fear — AI going rogue on their site — is solved at the protocol level.
The AI acts within the user's logged-in browser session. It cannot do anything the user could not do themselves.
Actions are authorised with temporary tokens, preventing replay attacks. Each action is a fresh authorisation.
Unlike traditional APIs, the website does not need to give out secret keys. The browser handles authentication.
You decide exactly what agents can do. Search products: yes. Change prices: never. You write the rules.
MCP vs WebMCP — The Full Breakdown
They are complementary, not competing. MCP is the backend plumbing. WebMCP is the light switch. You need both.
| Aspect | MCP | WebMCP |
|---|---|---|
| Full name | Model Context Protocol | Web Model Context Protocol |
| Created by | Anthropic (open-sourced) | Google + Microsoft (W3C Community Group) |
| Layer | Backend / Server-side | Frontend / Browser-native |
| Best analogy | Plumbing behind the walls | Light switch in the room |
| What it connects | AI to databases, APIs, files | AI to website UI actions |
| Implementation | Run an MCP server process | Add HTML attributes or JS API |
| Auth model | API keys / OAuth | User's browser session + one-time tokens |
| Cost reduction | Eliminates custom integrations | Up to 89% fewer tokens vs scraping |
| Status | Production-ready, widely adopted | Chrome Canary 146 — flag-gated preview, stable rollout ahead |
The MCP / WebMCP Story So Far
Anthropic open-sources MCP (Model Context Protocol) — the USB-C of AI
Jason McGhee releases community WebMCP NPM package — proving developer demand before Google steps in
Google announces WebMCP — W3C Community Group Report published, Google + Microsoft backed
Forbes covers WebMCP: "The Browser-Based Backbone for the Agentic Web"
Patrick Brosset (Google) publishes clarifications and next steps on the spec
Chrome 146 hits Stable — WebMCP code confirmed in the stable build (CVE-2026-3918). Feature remains flag-gated in Canary pending full stable rollout.
WebMCP flags expected to be enabled by default — no manual flag activation required
Agent Experience (AX) becomes a ranking factor — sites without WebMCP lose agent traffic
4 Unsolved Problems in the WebMCP Ecosystem
These are the gaps MCPHubz is positioned to fill. Each one is a revenue opportunity.
Gap 1 — Discovery
WE SOLVE THISHow does an AI know which websites have WebMCP tools? There is no directory yet. MCPHubz is building the first WebMCP Verified registry.
Gap 2 — Analytics
COMING SOONBusinesses will want to know: how many AI agents used my tools? What did they do? No analytics standard exists yet.
Gap 3 — Governance
MARKET GAPEnterprises need to log and audit every agent action. MCP gateways are emerging, but WebMCP logging is completely unsolved.
Gap 4 — Education
OUR MISSIONMost developers and businesses have never heard of WebMCP. Your tutorials and explainers fill that void and capture organic search traffic.
Where This Is Going — The 5-Year View
Near Term (6 months)
- Early adopters — tech-savvy e-commerce, SaaS, travel — implement WebMCP
- MCP server ecosystem grows rapidly as enterprises standardise on it
- MCPHubz directory becomes the go-to list for developers and businesses
Mid Term (1-2 years)
- Stable Chrome ships WebMCP — 75%+ of browsers support it natively
- Google starts surfacing WebMCP-enabled sites in AI Overviews and search results
- Agent-friendly becomes a ranking factor — the new mobile-friendly moment
Long Term (3-5 years)
- The web splits: human web (visual) and agent web (tool-based)
- Businesses pay to get WebMCP-certified and listed on authoritative directories
- MCPHubz is the bridge — curator, educator, and certifier of the agent economy