# Browser Tax: instrument your site with WebMCP > A live workshop deck delivered at Vibe Coding Nights #39 on 2026-07-01 at Frontier Tower Floor 9, San Francisco. Agents pay a tax to use the web: they scrape DOM, infer affordances from labels, click div-onClick controls that never surface in the accessibility tree, and retry on errors humans never see. WebMCP inverts that. You instrument the page once with `navigator.modelContext`, and the same DOM has two callers. The human sees a button, the agent sees a tool. Four runnable labs and a clone-and-go take-home starter ship with the deck. ## The thesis Instrument your own site. No agent SDK in the page, just `navigator.modelContext` and semantic HTML. A page calls `navigator.modelContext.registerTool({ name, description, parameters, invoke })`. Same DOM, two callers. Calls inherit the browser session with no separate auth. This deck is itself WebMCP-instrumented: an agent that supports the API can drive the slides and read the labs by calling the registered tools. Recursive proof of the workshop thesis. ## Site map - `/` the deck (40 slides, deep-linkable via /#1 through /#40) - `/lab/` the four hands-on labs (landing page) - `/lab/01-hello` Lab 1: feature-detect and register one tool, invoke from the console (the 15-line vanilla path) - `/lab/02-cart` Lab 2: the cart-counter, register `add_to_cart`, invoke it from the Chrome WebMCP Tool Inspector - `/lab/03-byo-tools` Lab 3: instrument your own product page with three tools, live - `/lab/04-hitl` Lab 4: a delete-style tool behind a consent gate (the HITL trap) - `/takehome/` the clone-and-go starter: a real product page pre-wired with a WebMCP scaffold and three TODO tools - `/.well-known/ai-agent.json` agent manifest (this deck's machine-readable card) - `/.well-known/mcp.json` MCP discovery card describing the in-page tools - `/.well-known/agent-card.json` A2A agent card - `/sitemap.xml` sitemap - `/robots.txt` agent-aware crawl policy - `/llms.txt` this file - `/assets/og.svg` 1200x630 typographic social card ## The in-page tools (WebMCP) This deck registers these tools via `navigator.modelContext.registerTool({ name, description, inputSchema, execute })` when the browser supports the API (stable Chrome 149+ relaunched with `--enable-blink-features=WebMCP`, or Chrome Canary). They no-op silently everywhere else. - `next_slide`: advance the deck to the next slide. - `goto_slide`: jump the deck to a specific 1-based slide. Parameter: `{ index: integer }`. - `list_labs`: return the four labs with their names and `/lab/` URLs. - `get_takehome`: return the take-home starter description and its `/takehome/` URL. - `submit_feedback`: file agent-to-agent feedback about the workshop or deck. POSTs `/api/feedback` (anonymous, CORS-open). Parameters: `{ message, from? }`. ## The WebMCP facts (from the dossier) - WebMCP is a W3C-track proposal at github.com/webmachinelearning/webmcp, first published 2025-08-13, co-developed by Google and Microsoft. - Chrome 146 Canary shipped an early preview in February 2026. Stable Chrome 149 carries the full implementation compiled in, off by default (verified live 2026-07-02). Do NOT use chrome://flags on stable, the entry silently prunes on restart. Enable via launch switch: `--enable-blink-features=WebMCP` (add `--enable-features=DevToolsWebMCPSupport` for the DevTools Application-panel WebMCP inspector). The API is https-only (secure contexts). Firefox and Safari are in discussion with no timelines. Edge follows Chrome since both run Blink. - As of mid 2026 the API is experimental, not broadly shipped. Single-digit percent browser adoption. Ship server-side MCP first, WebMCP as a progressive enhancement. - NLWeb (github.com/microsoft/NLWeb, Microsoft) is the sibling proposal: natural-language queries over Schema.org structured data. Every NLWeb instance also acts as an MCP server. It composes with WebMCP rather than competing. - The Chrome WebMCP Tool Inspector extension is the cleanest demo surface: load a page, see the registered tools live, invoke one by name. - No extension needed on stable 149: DevTools ships a WebMCP view under the Application panel (Available Tools plus live Tool Activity, edit and run) when Chrome launches with `--enable-features=DevToolsWebMCPSupport`. ## Builder traps (what not to do) - Treating WebMCP as production today. Adoption is single-digit percent. Server-side MCP first. - High-impact tools with no human in the loop. `delete_account` is not a one-shot WebMCP tool. Consent before destructive action. - Duplicating server-side MCP in the page. Backend actions stay backend. WebMCP is for in-page actions only. - Skipping the feature detect. Always check `'modelContext' in navigator` before relying on it. - A pure SPA with no server rendering. Agents see a blank page until JS loads. Server-render critical content. - `
` instead of `