Google announced WebMCP at Google I/O 2026 on May 19. The Chrome 149 origin trial opened the same week. If you haven’t looked at this yet, the short version is: WebMCP lets a web page declare its own capabilities as structured tools that in-browser AI agents can call — no backend MCP server, no screen-scraping, no per-site prompt engineering.

The slightly longer version: only Gemini in Chrome currently consumes those tools. Before you start annotating your HTML, that limitation needs to be in your decision framework.

This guide covers the two implementation paths, the origin trial registration process, how to audit what you shipped, and the honest answer to “should I build this now.”

For a full explainer of what WebMCP is and how it compares to server-side MCP, see our WebMCP review.


The 8–12x Benchmark, Put in Context

Google’s origin trial announcement cited early data showing WebMCP-enabled sites completing agent tasks 8–12x faster than vision-based agents on the same pages. That number is real, and the reason is straightforward: vision-based agents parse rendered pixels, infer structure from visual layout, and guess at affordances. A registered WebMCP tool gives the agent a typed schema with explicit parameter names, types, and descriptions. There is nothing to infer.

The benchmark compares WebMCP against vision-based agents on tasks where both approaches work. It does not tell you how often a WebMCP-capable agent reaches your page versus a vision-based one. With Gemini in Chrome as the only active consumer, your implementation reaches approximately the set of users who have Gemini in Chrome enabled and interact with Gemini during a session on your page. That is a small minority of browsing sessions today.

This context matters for deciding how much engineering time to spend, not for deciding whether the standard is sound. The standard is sound. The adoption trajectory is what requires judgment.


Two Implementation Paths

WebMCP provides a Declarative API and an Imperative API. They can be used together on the same page.

Declarative API — HTML Form Annotations

The Declarative API works by adding attributes to existing <form> elements. The browser reads those attributes and generates a JSON schema automatically. No JavaScript required.

<form tool-name="searchProducts"
      tool-description="Search the product catalog by keyword and optional category"
      tool-response="json">
  <input name="query"
         type="text"
         tool-description="Search keyword or phrase"
         required>
  <select name="category"
          tool-description="Optional product category filter">
    <option value="">All categories</option>
    <option value="electronics">Electronics</option>
    <option value="clothing">Clothing</option>
  </select>
  <button type="submit">Search</button>
</form>

When an agent calls the searchProducts tool, the browser submits the form programmatically using the registered inputs. tool-response="json" tells the browser to parse the response as JSON and return it to the agent as the tool result.

When to use the Declarative API: Whenever you have an existing form that already encodes the right behavior. Adding tool-name, tool-description, and tool-response to a working form takes about five minutes. For search forms, filter forms, checkout flows, booking widgets — the Declarative API is the right starting point.

What it cannot do: Dynamic behaviors that aren’t backed by a <form> — JavaScript-only interactions, multi-step flows without a form per step, anything that requires stateful manipulation before a tool call. That is what the Imperative API handles.


Imperative API — navigator.modelContext

The Imperative API exposes navigator.modelContext.registerTool(), which lets you register any JavaScript function as a tool with a full JSON Schema definition.

// Feature-detect before registering
if ('modelContext' in navigator) {
  navigator.modelContext.registerTool({
    name: 'addToCart',
    description: 'Add a product to the user\'s shopping cart',
    inputSchema: {
      type: 'object',
      properties: {
        productId: {
          type: 'string',
          description: 'The unique identifier of the product'
        },
        quantity: {
          type: 'integer',
          description: 'Number of units to add',
          minimum: 1,
          default: 1
        }
      },
      required: ['productId']
    },
    execute: async ({ productId, quantity = 1 }) => {
      const result = await cart.add(productId, quantity);
      return {
        content: [{
          type: 'text',
          text: `Added ${quantity}× ${result.productName} to cart. Cart total: ${result.cartTotal}`
        }]
      };
    }
  });
}

The execute function receives parsed, validated inputs matching your schema. It returns a standard MCP content array — the same shape as server-side MCP tool responses, which is intentional. The browser passes that result to the agent as the tool’s return value.

Feature detection is not optional. navigator.modelContext is undefined in every browser except Chrome 149+ with the origin trial token present (or behind the chrome://flags flag). The if ('modelContext' in navigator) check prevents errors in Firefox, Safari, and Chrome versions below 149. Your page should render and function identically when navigator.modelContext is unavailable.

Tool naming: Tool names must be unique within a page. Keep names concise and action-oriented (searchFlights, filterResults, submitBooking). The agent uses the name and description to decide when to call the tool, so both should be unambiguous about what the tool does and what it returns.


Origin Trial Registration

To ship WebMCP tools to real users on Chrome 149, you need an origin trial token from Google’s origin trial portal. Without the token, navigator.modelContext is undefined and HTML annotations are ignored — even on Chrome 149.

Steps:

  1. Visit googlechrome.github.io/OriginTrials and search for “WebMCP.”
  2. Register your origin (domain). Tokens are scoped to a specific origin — https://example.com gets its own token, separate from https://app.example.com.
  3. Add the token to your pages via an HTTP response header or a <meta> tag:
<!-- Meta tag approach (works for all pages on the origin) -->
<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

Or as an HTTP header:

Origin-Trial: YOUR_TOKEN_HERE
  1. Verify the token is active by opening Chrome DevTools → Application → Origin Trials. You should see WebMCP listed as an active trial.

Token expiry: Origin trial tokens expire. Google typically issues them in 6-week windows. When the trial ends or you need to renew, requests made while the token is expired will silently stop working — navigator.modelContext becomes undefined again. Build token expiry into your deploy process.


Testing Without Real Users

You do not need Gemini in Chrome to test your WebMCP implementation. Two tools cover this:

WebMCP Inspector extension: Install the “WebMCP — Model Context Tool Inspector” extension from the Chrome Web Store. It detects registered tools on any page with an active origin trial and displays them in a panel, including the resolved JSON schema for each tool. This lets you verify that your annotations and registerTool() calls are producing the schemas you expect.

Lighthouse audit: Chrome DevTools Lighthouse now includes a “Registered WebMCP tools” audit category (listed under Agentic Browsing in the Lighthouse report). It checks for:

  • Tools registered correctly (schema present, name non-empty)
  • tool-response attribute present on Declarative forms
  • No duplicate tool names
  • Feature-detection guard present on Imperative API calls

Run Lighthouse locally before shipping. A passing audit does not guarantee agents will use your tools well, but a failing audit guarantees they will have problems.


What to Build Now vs. What to Wait On

Build now if:

  • You have existing search or filter forms — the Declarative API upgrade is trivially low effort and will work automatically when agent adoption grows.
  • Your product has a checkout, booking, or submission flow where being callable by agents is genuinely useful to users.
  • You want to be early and establish tool naming conventions before the standard finalizes.

Wait if:

  • Your interaction model is highly stateful and session-dependent in ways that are hard to expose as discrete tools. Modeling a complex multi-step wizard as a sequence of navigator.modelContext tools is possible but brittle until the standard adds session state primitives.
  • You’re building for a B2B SaaS audience. Enterprise browsers are almost never on the bleeding edge of origin trials, and your users are unlikely to have Gemini in Chrome enabled.
  • Your engineering capacity is constrained. WebMCP is not a performance or SEO factor yet, and there is no penalty for waiting.

Skip entirely for now:

  • Mobile web. WebMCP is a Chrome Desktop feature at this stage. Chrome for Android does not yet participate in the origin trial.
  • Server-rendered pages with no JavaScript capability surface. The Declarative API covers forms, but if your forms exist only in server-side markup with no client-side interactivity, the origin trial token won’t get you much.

The Multi-Agent Future This Is Building Toward

The current limitation — Gemini in Chrome only — reflects where the standard is, not where it’s going. WebMCP is a W3C proposal co-developed by Google and Microsoft. The spec lives in the W3C Web Machine Learning Community Group. Microsoft’s Edge team has commented publicly on implementation interest. If the standard progresses to the W3C Standards Track, every major browser and every browser-embedded agent would have a consistent surface to call.

The server-side MCP ecosystem took roughly six months from spec to meaningful third-party adoption. WebMCP is on a similar trajectory, except the client surface — the browser — already exists for a billion users. The question is not whether agents will call web page tools. It is which tools you will have registered when they start.


Builder Action Checklist

  • Audit your existing forms for Declarative API eligibility: search, filter, booking, contact, checkout
  • Add tool-name, tool-description, tool-response to eligible forms
  • Identify any JavaScript-only interactions worth exposing as Imperative API tools
  • Implement registerTool() calls behind if ('modelContext' in navigator) guards
  • Register for an origin trial token at the Chrome Origin Trials portal
  • Add the token via <meta http-equiv="origin-trial"> or HTTP header
  • Install the WebMCP Inspector extension and verify your tool schemas
  • Run the Lighthouse Agentic Browsing audit
  • Build a token expiry reminder into your deploy calendar
  • Monitor the W3C WebMCP spec repo for status changes