WebMCP Chrome 149: Expose JS Functions as Agent Tools
On June 2, 2026, the WebMCP origin trial went live in Chrome 149. For the first time, site owners can ship the API to real users — not just Chrome developers with a flag flipped. If you build anything that users interact with in a browser, this standard is worth understanding now.
What WebMCP Actually Is (and Isn't)
WebMCP stands for Web Model Context Protocol. Despite the name overlap with Anthropic/the MCP ecosystem, it's a separate W3C standard proposal — developed by Google and Microsoft inside the W3C Web Machine Learning Community Group — that solves a different problem.
Desktop MCP connects an AI agent (Claude, Gemini, Cursor) to local tools and services via a stdio or SSE server you run outside the browser. WebMCP connects a browser-resident AI agent to the tools a website itself decides to expose — directly, inside the page, as JavaScript functions and HTML form actions.
The problem it replaces: today, browser agents like Gemini in Chrome have to read pixels and DOM nodes, guess what the UI means, plan a click sequence, and hope the correct form submits. That breaks whenever a designer renames a class, moves a button, or A/B tests a layout. WebMCP gives agents a stable, structured channel — bypassing visual scraping entirely.
From the site developer's perspective, you register named tools with input schemas. An agent calls them by name with a valid JSON payload. Your code runs. The agent gets the result. No DOM scraping, no coordinate guessing.
The Origin Trial: What Changed on June 2
Before June 2, WebMCP was available only behind chrome://flags/#enable-webmcp-testing. Developers could experiment, but no real users were exposed to the API unless they manually toggled a flag.
The Chrome 149 origin trial changes that. Site owners who register a trial token can enable WebMCP for visitors using Chrome 149+ — without those visitors changing any browser setting. This is how Google rolls out experimental APIs to measure real-world use before finalizing the spec.
Google announced the trial during the Google I/O 2026 Developer keynote on May 19, with the trial itself starting with Chrome 149's stable release on June 2.
How to register for the trial:
- Go to
chrome.google.com/origintrials(the Chrome Origin Trials dashboard) - Search for "WebMCP"
- Register your origin (your domain), accept the terms
- Copy the generated token
- Add it to your page's
<head>:
<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">
Origin trial tokens are scoped to your origin. They expire when the trial ends (typically aligned with a future Chrome major version). Keep watching for the GA announcement; you'll need to remove the token once the feature ships unconditionally.
For local development only:
Navigate to chrome://flags/#enable-webmcp-testing, set it to Enabled, and relaunch Chrome. No token needed for local testing.
The Two APIs Side by Side
WebMCP offers two implementation paths. They're not mutually exclusive — you can use both on the same page.
Imperative API: Define Tools in JavaScript
The Imperative API is for tools that go beyond form submission: navigation, state mutations, multi-step actions, calls to your internal APIs. You call document.modelContext.registerTool() with a name, a description, a JSON Schema for inputs, and an execute function.
document.modelContext.registerTool({
name: 'search_products',
description: 'Searches the product catalog. Returns matching items with price and availability.',
inputSchema: {
type: 'object',
properties: {
query: {
type: 'string',
description: 'Search keywords or product name'
},
max_results: {
type: 'number',
description: 'Maximum items to return (default 10)'
}
},
required: ['query']
},
execute: async ({ query, max_results = 10 }) => {
const res = await fetch(`/api/products/search?q=${encodeURIComponent(query)}&limit=${max_results}`);
const data = await res.json();
return data.items.map(item => ({
id: item.id,
name: item.name,
price: item.price,
in_stock: item.inventory > 0
}));
}
});
A few things to note:
- The
executefunction is async and can call your own APIs, read from state, or trigger navigation - The return value goes back to the agent as structured data
descriptionandinputSchema.properties[*].descriptionare read by the agent to understand when and how to call this tool — write them as if explaining to a careful but literal robot
Note on API naming: Early Chrome previews (145–149) used navigator.modelContext. That spelling is deprecated in Chrome 150 in favour of document.modelContext. Use document.modelContext for anything you're implementing now.
Declarative API: Annotate Your Existing HTML Forms
If you already have HTML forms that users fill out and submit, you can turn them into WebMCP tools by adding four attributes. No JavaScript required.
<form
toolname="book_appointment"
tooldescription="Books a service appointment. Returns a confirmation number."
toolautosubmit
action="/appointments/new"
method="POST"
>
<label>
Service type
<select name="service" toolparamdescription="Type of service requested (oil_change, tire_rotation, brake_inspection)">
<option value="oil_change">Oil Change</option>
<option value="tire_rotation">Tire Rotation</option>
<option value="brake_inspection">Brake Inspection</option>
</select>
</label>
<label>
Preferred date
<input
type="date"
name="date"
toolparamdescription="Requested appointment date in YYYY-MM-DD format"
/>
</label>
<button type="submit">Book Now</button>
</form>
The four attributes:
| Attribute | Required | Purpose |
|---|---|---|
toolname |
Yes | Machine-readable tool identifier (camelCase or snake_case) |
tooldescription |
Yes | Natural-language purpose — what the agent reads to decide if this tool fits |
toolautosubmit |
No | If present, agent auto-submits after filling; absent = user still clicks submit |
toolparamdescription |
No | Per-field description, embedded into the generated JSON Schema |
The browser converts the annotated form into the same JSON Schema format that the Imperative API uses. From the agent's perspective, both APIs look identical.
When to Use Which API
The declarative API is right for actions where form submission is the intended outcome and the current HTML structure already expresses the semantics — a checkout form, a support ticket, a booking request. You're retrofitting existing forms rather than building something new.
The imperative API fits anything else: actions that don't map to a single form submission (multi-step flows, navigation commands, data queries that return results without a redirect), situations where you want to compute the return value yourself, or tools that call your backend directly without a page reload.
- Zero JavaScript — retrofit existing HTML forms in minutes
- Browser handles JSON Schema generation automatically
- Works even if JS fails to load
- Full control over inputs, outputs, and async logic
- Register tools that have no DOM counterpart
- Return rich structured data rather than a page redirect
Browser Support: Where Things Stand
Chrome isn't the only browser in this story.
Microsoft co-authored the WebMCP spec (Brandon Walderman from Microsoft is one of the three listed spec editors alongside Google's Khushal Sagar and Dominic Farolino) and shipped Edge 147 support in March 2026 — before the Chrome origin trial even started. Edge and Chrome share the same Blink rendering engine, so the same code runs across both.
Firefox has committed to supporting WebMCP in Q3 2026. Mozilla's engineers raised concerns during the early drafting process, but the team has since aligned on the spec direction.
Safari has not made a public commitment. Apple engineers have raised objections to parts of the spec. There is no confirmed timeline. For developers targeting Apple's browser market, this is the primary blocker.
Practical implication: If your users are mostly on Chrome or Edge (common for B2B SaaS, enterprise tools, and developer-facing products), implementing WebMCP now against the origin trial is reasonable. If you serve a consumer audience where Safari represents 20–30% of traffic, hold off on making WebMCP a critical path.
What the Gemini Connection Means
Gemini in Chrome is the first AI agent to consume WebMCP tools on day one. Google confirmed at I/O 2026 that Gemini in Chrome will support WebMCP APIs. This means a site that registers tools today will be discoverable to Gemini users browsing in Chrome — no additional integration required.
The Gemini in Chrome Android release (including AutoBrowse) is expected in late June 2026, initially on devices with 4GB+ RAM running English-US.
This is meaningfully different from the desktop MCP ecosystem, where every new agent needs a new server, a new install, and often a new authentication flow. With WebMCP, the site publishes once and any compliant browser agent can discover and call those tools.
Inspecting Your Tools Before They Go Live
Chrome ships a Model Context Tool Inspector extension alongside WebMCP. Install it, open DevTools, and you'll see a new panel that lists every registered WebMCP tool on the current page — the same tool list an agent would see. Use it to verify tool names, descriptions, and schemas before registering for the origin trial.
The Lighthouse extension also gained a "Registered WebMCP Tools" audit category that checks for common mistakes: tools with empty descriptions, required fields missing from schema, and toolname values containing spaces (which agents may handle inconsistently).
Security Considerations Worth Noting
WebMCP gives agents a direct call path into your site's JavaScript. That's the feature — but it's also a surface to reason carefully about.
toolautosubmit and side-effect forms: If you add toolautosubmit to a form that has side effects (placing an order, deleting a record, sending a message), the agent can trigger those effects without a human seeing the filled-in form. For low-risk actions this is convenient. For high-stakes ones, omit toolautosubmit and leave the submit click to the user.
Tool descriptions as untrusted input context: Agents rely on tooldescription and toolparamdescription to decide when to invoke a tool. Overly broad descriptions ("does anything with the user account") can lead agents to invoke tools in unintended contexts. Write descriptions that narrow scope: "Cancels the current active order. Does not affect past orders or subscription status."
No authentication at the WebMCP layer: WebMCP doesn't define auth between the agent and your tool. The tool runs in the page context of the user who is logged in. If your site's existing session cookies and CSRF tokens protect the underlying form submission or API call, those protections remain in place. WebMCP doesn't bypass them — but it also doesn't add anything on top.
Common Mistakes
Registering tools before the DOM is ready. Call registerTool after DOMContentLoaded or inside a deferred module — not in a synchronous <script> in <head>.
Reusing navigator.modelContext. The older navigator.modelContext namespace still works in Chrome 149 but is deprecated. Chrome 150 will show console warnings. Switch to document.modelContext now.
Empty or vague descriptions. tooldescription: 'Tool for the checkout page' tells an agent nothing useful. Write: 'Submits the current cart for purchase. Requires a shipping address and payment method to already be set. Returns an order confirmation number.'
Registering tools on every page unconditionally. If a tool is only meaningful on specific pages, guard the registration: check the URL, verify user state, or use lazy module loading. An agent discovering a delete_account tool on your landing page is not useful.
Ignoring the JSON Schema required array. If your tool's execute function assumes a field exists, mark it required in the schema. Agents use the schema to decide what to fill in; missing required constraints mean agents may call your tool with partial data.
Q: Does WebMCP replace desktop MCP servers?
No. They're complementary. Desktop MCP connects an AI coding agent (Claude Code, Cursor) to your local filesystem, database, or services from outside the browser. WebMCP connects a browser AI agent to the tools a website exposes inside a tab. Different agents, different contexts, different security models.
Q: Can I use WebMCP with frameworks like React or Vue?
Yes. The document.modelContext API is framework-agnostic. Register tools in a useEffect (React) or onMounted (Vue) lifecycle hook, the same way you'd set up any browser-native API. For single-page apps, re-register tools when the relevant component mounts and deregister when it unmounts.
Q: Does the origin trial cost anything?
No. Origin trial registration is free. You get a token tied to your domain and a Chrome version range. You'll need to re-register when the trial extends or when the feature graduates to stable.
Q: What happens if a user's browser doesn't support WebMCP?
Nothing breaks. document.modelContext is undefined in non-supporting browsers. Wrap tool registration in a feature check:
if (document.modelContext) {
document.modelContext.registerTool({ /* ... */ });
}
Your site functions normally for non-supporting users. Only agents running in Chrome 149+ (or Edge 147+) discover the tools.
Q: Is WebMCP the same as the chrome://flags/#enable-webmcp-testing flag?
The flag is the developer-only toggle for local testing, available since Chrome 145. The origin trial is the production mechanism that enables the API for real visitors without any flag. The flag stays available for testing; the origin trial token is what you need for production deployment.
Key Takeaways
WebMCP's Chrome 149 origin trial marks the transition from "experimental flag" to "real users can see this." The mechanics are straightforward: two APIs (declarative HTML annotations for forms, imperative JS for everything else), a brief origin trial registration, and feature detection for cross-browser safety.
The spec has genuine momentum — Google and Microsoft co-authored it, Edge already ships it, and Firefox has committed for Q3. Safari remains the open question for consumer-facing products.
For developers building in the Chrome/Edge ecosystem — B2B tools, developer dashboards, internal apps — the implementation cost is low and the origin trial is the right time to start learning the API surface. For consumer sites where Safari share matters, track the spec but wait for broader support before making WebMCP a production dependency.
WebMCP's Chrome 149 origin trial is the first chance to put the API in front of real users. Two clean implementation paths, a free registration process, and Chrome's own Gemini as the first consumer — it's worth spending an afternoon to register a tool on your most-used form. Just guard with feature detection, leave toolautosubmit off high-stakes actions, and watch the Safari story before making it load-bearing.
Need content like this
for your blog?
We run AI-powered technical blogs. Start with a free 3-article pilot.