WebMCP: Make Your Website AI-Agent-Ready in Chrome 149

Your website is already broken for AI agents. It just hasn’t mattered yet. Agents that try to book a flight, file a support ticket, or add an item to a cart are left scraping DOM elements, guessing at form fields, and hoping the CSS selectors don’t change between requests. Google’s answer is WebMCP — a proposed W3C browser standard, co-developed with Microsoft, now in a public origin trial in Chrome 149. Official Chrome docs are live, Shopify, Expedia, and Target are already testing it, and the tooling to get started takes about 10 minutes. Here’s what it does and how to implement it.

What WebMCP Is #

WebMCP extends the browser’s Navigator interface with a new navigator.modelContext

object. Instead of making an agent reverse-engineer your UI, you declare the actions it’s allowed to take — as structured, callable tools — directly in your HTML or JavaScript. The agent discovers them, calls them with typed inputs, and gets structured outputs back.

The standard is available as an origin trial in Chrome 149 through Chrome 156, announced at Google I/O 2026. Before that, it was testable behind a Chrome flag. It requires HTTPS. It’s Chrome-only for now, with Microsoft involved in the W3C incubation — Edge support is the logical next step, though no timeline has been announced.

Two Ways to Implement It #

WebMCP offers two implementation paths. The declarative API requires no new JavaScript. The imperative API handles everything else.

Declarative: HTML Form Attributes

Add toolname

and tooldescription

to an existing HTML form. That’s it. The browser handles tool registration automatically.

<form
  toolname="searchProducts"
  tooldescription="Search the product catalog by keyword and category. Returns matching products with name, price, and availability."
>
  <input
    name="query"
    type="text"
    toolparamdescription="The search keyword or phrase"
  />
  <select
    name="category"
    toolparamdescription="Product category to filter by"
  >
    <option value="all">All</option>
    <option value="electronics">Electronics</option>
    <option value="clothing">Clothing</option>
  </select>
  <button type="submit">Search</button>
</form>

Optional: add toolautosubmit

to let an agent submit the form without a user click. Use this only for read-only tools like search — not for anything that writes data or processes a payment.

Imperative: JavaScript API

For React or Vue components, AJAX-backed actions, or anything that isn’t a traditional HTML form, use navigator.modelContext.registerTool()

. Always guard the call — the API only exists in Chrome 146+.

if (navigator.modelContext) {
  navigator.modelContext.registerTool({
    name: "addToCart",
    description: "Add a product to the shopping cart by SKU and quantity.",
    inputSchema: {
      type: "object",
      properties: {
        sku: { type: "string", description: "The product SKU identifier" },
        quantity: { type: "integer", minimum: 1, default: 1 }
      },
      required: ["sku"]
    },
    execute: async ({ sku, quantity }) => {
      const res = await fetch("/api/cart", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ sku, quantity })
      });
      return res.ok
        ? { success: true }
        : { success: false, error: "Cart update failed" };
    }
  });
}

The inputSchema

follows JSON Schema. Descriptions matter — they’re what agents use to decide whether to call your tool and how to fill its parameters. Vague descriptions lead to incorrect tool calls.

WebMCP vs. Anthropic MCP: Different Problems #

The naming is confusing, and the confusion is worth clearing up. Anthropic’s Model Context Protocol connects an AI platform to your server — think Claude accessing your database through a VS Code extension, or a custom agent reading files via an MCP server you deploy. WebMCP connects a browser agent to your website UI during an active user session.

They’re not competing. A well-built AI-ready product uses both: MCP for backend data access, WebMCP for in-browser actions. The overlap is minimal; the combined capability is significant.

Who’s Already in the Trial #

Google announced early WebMCP partners at I/O 2026: Expedia, Booking.com, Shopify, Etsy, Instacart, Redfin, Target, TurboTax, and Credit Karma. American Express launched Agentic Commerce Experiences with Delta, Expedia, and Hilton as flagship partners. Walmart, Sephora, Best Buy, Home Depot, and Wayfair are also in early testing.

These aren’t exploratory bets. When every major e-commerce and travel platform is building this in parallel, the question stops being whether to implement WebMCP and starts being when. For smaller teams, the opportunity is the same — and the implementation cost is lower than most expect.

One Security Issue to Know Before You Ship #

Security researchers published a paper on “Tool Surface Poisoning” — malicious tool definitions that embed hidden instructions designed to hijack agent behavior. The most dangerous variant is Mid-Session Tool Injection (MSTI), where a third-party script injects rogue tools into a page during an active session.

For site owners: audit which third-party scripts load on pages where you register WebMCP tools. For agent developers: validate tool origins before calling them — don’t trust all registered tools blindly. Google’s agent security documentation covers mitigations in detail.

What to Do Now #

The origin trial is open. Here’s the minimum path to get started:

• Enable WebMCP locally: open chrome://flags/#enable-webmcp-testing

in Chrome, set it to Enabled, relaunch. - Install Google’s Model Context Tool Inspector extension to test your tools against Gemini without building a full agent.

• Pick one existing form on your site and add toolname

andtooldescription

attributes. - Register for the Chrome 149 origin trialto enable WebMCP for real users without requiring them to change browser settings.

WebMCP won’t replace your REST API. It won’t replace your MCP server. What it will do is give every browser-based agent that visits your site a clean, typed interface instead of a DOM to scrape. That’s a meaningful upgrade — for agents, and for the users who send them.