WebMCP Standard Proposal for Agentic Web Actuation Now Available in Chrome (Origin Trials)
Quick Answer
Google's WebMCP standard, now in Chrome 149 origin trials, enables web tools for in-browser AI agents, enhancing task automation with precision and reliability.
Quick Take
Google's WebMCP standard, now in Chrome 149 origin trials, enables web tools for in-browser AI agents, enhancing task automation with precision and reliability. This allows agents to directly interact with backend APIs, improving user experience in complex scenarios like trip planning.
Key Points
- WebMCP allows sites to expose tools for AI agents, improving automation reliability.
- Agents can now call machine-friendly functions for complex tasks in seconds.
- Declarative and Imperative APIs enable developers to annotate HTML forms and register tools.
- WebMCP eliminates the need for DOM scraping, reducing latency and token consumption.
- The standard is designed specifically for client-side operations in web browsers.
📖 Reader Mode
~8 min read<p>Google <a href="https://developer.chrome.com/docs/ai/webmcp">recently announced that WebMCP</a> is entering origin trials in <a href="https://developer.chrome.com/release-notes/149">Chrome 149</a>. The new WebMCP standard proposal lets sites expose tools (e.g., JavaScript functions and HTML forms) to in-browser AI agents, which can thus reliably simulate user actions instead of resorting to possibly expensive (e.g., on-screen reading) and often unreliable guesswork (e.g., DOM scraping).</p>
<p>Google explained the motivation as follows:</p>
<blockquote>
<p>By defining these tools, you can instruct agents exactly how and where to interact with your site. The result? An agent can now call machine-friendly functions to complete complex tasks in seconds with greater reliability, precision, and personalization. Imagine a user is planning a multi-city vacation. Instead of watching an agent click through travel forms, they can authorize it to query backend APIs directly to instantly build a personalized, weather-optimized itinerary for their approval.</p>
</blockquote>
<p>Without WebMCP, an AI agent wanting to act on behalf of the user would download the DOM for relevant web pages, understand the roles of the buttons on the page, take and analyze some screenshots, and deduce the coordinates for a simulated mouse click on the relevant button. As <a href="https://www.scalekit.com/blog/webmcp-the-missing-bridge-between-ai-agents-and-the-web">often noted</a>, the process can be non-deterministic and token-expensive: a CSS layout shift or a delayed ad load can break the entire automation loop; image processing, even for low-resolution images, is the source of added latency and token consumption.</p>
<p>As with the standard backend-focused <a href="https://modelcontextprotocol.io/docs/getting-started/intro">Model Context Protocol (MCP)</a>, web authors can provide an explicit API for AI agents to perform personalized tasks on behalf of human users. WebMCP, however, operates entirely on the client side. WebMCP is purpose-built for the browser and omits various server-side concepts, such as <a href="https://modelcontextprotocol.io/specification/2025-06-18/server/resources#resources">resources</a>. Essentially, WebMCP helps agents reliably understand Web UI by defining APIs that provide agents with a menu of named, typed, and described actions they can call directly.</p>
<p>The specification defines two API surfaces. The <a href="https://github.com/webmachinelearning/webmcp#declarative-api">Declarative API</a> <a href="https://github.com/webmachinelearning/webmcp/blob/main/declarative-api-explainer.md">allows developers to annotate existing HTML forms</a> with custom attributes:</p>
<pre class=" language-html"><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span>
<span class="token attr-name">toolname</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Search flights<span class="token punctuation">"</span></span>
<span class="token attr-name">tooldescription</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>This form searches flights and displays [...]<span class="token punctuation">"</span></span>
<span class="token attr-name">toolautosubmit</span><span class="token punctuation">></span></span>
</code></pre>
<p>The Imperative API uses the <code>modelContext</code> interface to register tools. Tool registration requires a name, a description, and an input schema with relevant properties:</p>
<pre class=" language-js"><code class="prism language-js">document<span class="token punctuation">.</span>modelContext<span class="token punctuation">.</span><span class="token function">registerTool</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'toggle_layer'</span><span class="token punctuation">,</span>
description<span class="token punctuation">:</span> <span class="token string">'Control pizza layers (sauce, cheese). Use "add", "remove", or "toggle".'</span><span class="token punctuation">,</span>
inputSchema<span class="token punctuation">:</span> <span class="token punctuation">{</span>
type<span class="token punctuation">:</span> <span class="token string">'object'</span><span class="token punctuation">,</span>
properties<span class="token punctuation">:</span> <span class="token punctuation">{</span>
layer<span class="token punctuation">:</span> <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'string'</span><span class="token punctuation">,</span> <span class="token keyword">enum</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'sauce-layer'</span><span class="token punctuation">,</span> <span class="token string">'cheese-layer'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
action<span class="token punctuation">:</span> <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'string'</span><span class="token punctuation">,</span> <span class="token keyword">enum</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'add'</span><span class="token punctuation">,</span> <span class="token string">'remove'</span><span class="token punctuation">,</span> <span class="token string">'toggle'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
required<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'layer'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
execute<span class="token punctuation">:</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> layer<span class="token punctuation">,</span> action <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">await</span> <span class="token function">toggleLayer</span><span class="token punctuation">(</span>layer<span class="token punctuation">,</span> action<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token template-string"><span class="token string">`Performed </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>action <span class="token operator">||</span> <span class="token string">'toggle'</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> on layer: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>layer<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>The registered tool executes UI logic, handles state management, and <a href="https://developer.chrome.com/docs/ai/webmcp/imperative-api#execute_tool">returns direct payloads to the agent</a>.</p>
<p>One early implementer who built a WebMCP polyfill for Chrome DevTools <a href="https://news.ycombinator.com/item?id=46223714">reported up to a 90% reduction in LLM token usage</a>:</p>
<blockquote>
<p>Playwright and Chrome DevTools MCP servers are the standard for agent-driven web app testing, but their token efficiency is terrible: the screenshot-action-screenshot loop quickly explodes context windows.</p>
<p>I’ve been using browser automation instead of TDD (agents over-mock tests), but needed to solve the token bloat. So I forked the Chrome DevTools MCP server to execute WebMCP tools from client-side JavaScript.</p>
<p>[…] Initial benchmarks show a roughly ~90% decrease in token usage, but other benefits which are harder to measure are speed and determinism (both of which are significantly improved).</p>
</blockquote>
<p>The proposal authors remind developers that LLMs are susceptible to <a href="https://www.crowdstrike.com/en-us/blog/indirect-prompt-injection-attacks-hidden-ai-risks/">indirect prompt injection</a> and that exposing native site APIs introduces security risks that have to be understood and managed. The authors <a href="https://developer.chrome.com/docs/ai/webmcp/secure-tools">recommend that developers use explicit annotation hints</a> within their tools. Data payloads sourced externally must include an <code>untrustedContentHint</code>, signaling to the agent that the input requires strict security scrutiny. Conversely, non-mutating operations can utilize a <code>readOnlyHint</code> to help the agent decide when explicit human confirmation can be safely bypassed.</p>
<p>There are also operational risks to consider. If a refund workflow is callable but the refund policy is stale, the agent can execute the wrong action cleanly. If a user has access to a page but not to the downstream business rule, a browser agent can expose a permission gap that human judgment previously masked. Developers are <a href="https://developer.chrome.com/docs/ai/webmcp/evals">encouraged to use AI evals on targeted user journeys</a>.</p>
<p>Early adopters noticed that while WebMCP <a href="https://www.humandelta.ai/blog/google-webmcp-knowledge-layer-ai-agents">gives the agent a better interface to the site</a>, the agent still needs “accurate information about policies, customer state, product rules, eligibility, exceptions, and escalation paths.”</p>
<p>Developers are additionally encouraged to write succinct tool descriptions and outputs that fit within predefined character budgets: 500 characters per tool description, 150 characters per parameter description, 30 characters per tool name and parameter name, and a 1,500-character limit per individual tool output.</p>
<p>Google’s Chrome team <a href="https://developer.chrome.com/blog/chrome-at-io26">announced WebMCP alongside broader browser AI work at I/O 2026</a>, including agentic browsing, built-in AI APIs, and developer tooling for AI agents in Chrome.</p>
About the Author
Bruno Couriol
Show moreShow less
— Originally published at infoq.com
Want this in your inbox every morning?
Daily brief at your local 8am — bilingual EN/中文, free.
More from InfoQ AI, ML & Data Engineering
See more →
Anthropic Explains How Claude Builds Its Own Execution Harnesses
Anthropic's Claude Code introduces Dynamic Workflows, enabling AI agents to execute complex tasks through custom JavaScript harnesses. This orchestration system addresses challenges like 'agentic laziness' and 'goal drift' by utilizing multiple independent agents and dynamic model selection, enhancing efficiency in software engineering projects.
