![Alexandra Klepper](https://web.dev/images/authors/alexandraklepper.jpg) Alexandra Klepper [GitHub](https://github.com/alexandrascript) [Bluesky](https://bsky.app/profile/alexandrascript.com) ![François Beaufort](https://web.dev/images/authors/beaufortfrancois.jpg) François Beaufort [GitHub](https://github.com/beaufortfrancois) ![Kasper Kulikowski](https://web.dev/images/authors/kaskulikowski.jpg) Kasper Kulikowski [X](https://twitter.com/i_am_kaspa) [GitHub](https://github.com/Kulikowski) [LinkedIn](https://www.linkedin.com/in/kasper-kulikowski)

<br />


Published: May 18, 2026, Last updated: October 7, 2026

<br />

[WebMCP](https://github.com/webmachinelearning/webmcp?tab=readme-ov-file) is a
proposed web standard to help you build and expose structured tools for AI
[agents](https://web.dev/articles/ai-agents). WebMCP provides JavaScript and
annotates HTML form elements so that agents know exactly how to interact with
page features, to support a user's experience. This can significantly improve
the performance and reliability of agent actuation.

> [!IMPORTANT]
> **Key Term:** *Actuation* is the act of an agent simulating manual mouse clicks and text input, as though it were the human user engaging with your website. These can be single tasks, such as clicking a link or inputting content into a form, or complex tasks, such as completing a purchase.

AI agents are a newer technology. They can help human users better complete
tasks which are highly complex and technical. WebMCP offers higher accuracy for
agentic task completion, and it can be added as a progressive enhancement.

| Explainer | Web | Extensions | Chrome Status | Intent |
|---|---|---|---|---|
| [GitHub](https://github.com/webmachinelearning/webmcp) | [![Origin trial](https://developer.chrome.com/static/images/experiment.svg) Origin trial](https://developer.chrome.com/origintrials/#/register_trial/4163014905550602241) |   | [View](https://chromestatus.com/feature/5117755740913664) | [Intent to Experiment](https://groups.google.com/a/chromium.org/g/blink-dev/c/gmYffo5WOE8/m/OJxuQRP3AAAJ) |

## Why WebMCP?

WebMCP provides rules for interaction that bridge the gap between web
applications and agents, improving efficiency, reliability, and task completion.
Instead of an agent reviewing the element, such as a button or a field, to
understand its purpose, the website declares the element's purpose, so it's
used as intended.

This is more reliable than actuation, which may have numerous steps and leaves
each step open to interpretation by the agent.
[Video](https://www.youtube.com/watch?v=CD67L_SIMDk) On the left, the agent scrapes the DOM. On the right, the agent calls a tool. Try it yourself on our [appointment booking demo](https://googlechromelabs.github.io/webmcp-tools/demos/explainer/#compare).

Websites can share explicit purpose, such as search or purchasing, by defining
a `tool`. Tools execute on your webpage visibly, so users gain trust
that tasks are completed as expected. This also keeps your brand and
human-centered design choices intact.

WebMCP supports:

- **Discovery** : A standard way for pages to register tools with agents, such as `checkout` or `filter_results`.
- [**JSON Schemas**](https://json-schema.org/understanding-json-schema/reference): Explicit definitions of inputs and expected outputs, to reduce hallucination or misunderstanding.
- **State**: A shared understanding of the current page context, so the agent knows what resources are available to act on in real time.

Our goal is to build APIs that any browser with agentic capabilities can
implement and benefit from, so your users can more easily complete tasks. You
can follow along this process on
[GitHub](https://github.com/webmachinelearning/webmcp).

### Use cases

There are many ways you could [use WebMCP](https://developer.chrome.com/docs/ai/webmcp/use-cases).
For example:

- **Help your customers get support**. If you provide a software to customers, you may have a complex support flow to address many different questions. You can use WebMCP to help an agent more quickly navigate to the right form and fill in fields with user-provided information.
- **Improve travel booking**. Help agents book complex, multi-city and multi-passenger trips with fewer steps.

Some actions may be sensitive, such as making a purchase. You can include a
command to request user interaction with a confirmation dialog.

In a practical sense, your tools could accomplish the following tasks:

- **Fill in structured forms** : Build a `submit_application` tool to help agents map data collected from the conversation with the user to form fields correctly. For example, you can differentiate if a field requires a full name versus a separate first and last name.
- **Support agent interactions in human-first interfaces** : Certain fields are designed for human users, but may not be understood by agents. You could build a `date_pick` tool that allows for a complex date and time selection in a reservation or event booking.
- **Quicker application debugging** : You can build a `run_diagnostics` tool on a developer settings page, so an agent can trigger fixes that are otherwise hidden behind nested menus.

Is your use case missing? Or do you have an idea you're excited to share for
WebMCP? [Raise questions and participate in discussion on GitHub](https://github.com/webmachinelearning/webmcp?tab=readme-ov-file).

## Get started

Join the [WebMCP origin trial](https://developer.chrome.com/origintrials/#/register_trial/4163014905550602241)
from Chrome 149. Learn more about how to
[get started with origin trials](https://developer.chrome.com/docs/web-platform/origin-trials).

### Local WebMCP

WebMCP is available as a Chrome flag for local development:

1. Open Chrome and navigate to `chrome://flags/#enable-webmcp-testing`
2. Set the flag to **Enabled**.
3. Relaunch Chrome to apply the changes.

## Use WebMCP APIs

There are two APIs you can use to set up your website tools:

- [Imperative API](https://developer.chrome.com/docs/ai/webmcp/imperative-api): Define different types of tools with standard JavaScript, such as form input, navigation tools, state management, or other functions.
- [Declarative API](https://developer.chrome.com/docs/ai/webmcp/declarative-api): Add annotations to a standard HTML forms to create a WebMCP tool.

> [!NOTE]
> **Note:** Several major frameworks have experimental support for WebMCP, including [React](https://www.npmjs.com/package/use-webmcp-tool), [Angular](https://angular.dev/ai/webmcp), and [Vue](https://vuejs.org/guide/components/web-machine-learning.html).

You can [debug WebMCP tools](https://developer.chrome.com/docs/devtools/application/webmcp) and validate
how the browser parses the JSON Schema, with Chrome DevTools.

### Limitations

While WebMCP aims to make complex tasks simpler for agents and humans, there are
limitations:

- **Headless browsing**: While it may be possible to run WebMCP tools in headless environments, this API is primarily designed for local browser workflows with a human in the loop.
- **Overhead for complex interfaces**: If your site is highly complex, you likely need to refactor or add JavaScript to handle application and interface state.
- **Tool discoverability**: Clients and browsers must visit a site directly to know if it has callable tools.

### Permissions policy

Both APIs are gated by the `tools`
[Permissions Policy](https://developer.chrome.com/docs/privacy-security/permissions-policy).
The policy defaults to `self`, which allows tool registration in top-level and
same-origin contexts, and disables it for cross-origin iframes.

To allow WebMCP tools in a cross-origin iframe, add the `allow="tools"`
attribute to the iframe.

## Demo

Examples of demos covering both imperative and declarative implementations are
available:

- [WebMCP zaMaker](https://github.com/GoogleChromeLabs/webmcp-tools/tree/main/demos/pizza-maker) uses the WebMCP Imperative API.
- [Travel demo (React)](https://github.com/GoogleChromeLabs/webmcp-tools/tree/main/demos/react-flightsearch) uses the WebMCP Imperative API.
- [Le Petit Bistro demo](https://github.com/GoogleChromeLabs/webmcp-tools/tree/main/demos/french-bistro) uses the WebMCP Declarative API.

You can also review and explore the demo source code on
[GitHub](https://github.com/GoogleChromeLabs/webmcp-tools/tree/main/demos).

## Imitate an agent to test your tools

> [!CAUTION]
> **Caution:** Chrome Extensions can query and execute WebMCP tools with [content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts). Read more about [building secure tools](https://developer.chrome.com/docs/ai/webmcp/secure-tools) and [agent safety considerations](https://developer.chrome.com/docs/agents/security).

We've built two Chrome Extensions to help you see how WebMCP tools work in our
demos and your applications.

[Install the **Example Agentic Chrome Extension**](https://github.com/GoogleChromeLabs/webmcp-extension/)
to inspect, monitor, and execute WebMCP tools with natural language prompts. In
particular, this extension always trusts WebMCP *annotations*, which can alert
the agent to sensitive actions. This demonstrates how a tool may perform
differently with annotations.

By default, this extension uses a small Node server with an AI SDK. API keys are
required and stay on the local server. Your prompts are sent to the
`gemini-3.6-flash` model by default, but you can modify the model choice and API
provider in the extension's `.env` file. There are fields for OpenAI, Google,
and Anthropic or, alternatively, you can customize the extension to use a model
from another provider.

Alternatively, you can use a client-side model with the Prompt API. This doesn't
require API keys and data stays on your device. To do so, enable
`chrome://flags/#prompt-api-tool-use`.

[Install the **Model Context Tool Inspector Extension**](https://chromewebstore.google.com/detail/model-context-tool-inspec/gbpdfapgefenggkahomfgkhfehlcenpd)
to experiment with an agent and see how WebMCP tools work in live demos or your
own applications. Use natural language prompts to determine if the agent
interacts with WebMCP tools as expected.

To use Gemini to call your tools, you must have an API key, which you provide in
the extension's interface. Your prompts are sent by default to the
`gemini-3.6-flash` model. You can select a different Gemini model to
experiment with or customize the extension code to use another provider's model.

> [!NOTE]
> **Note:** These extensions are separate from [Gemini in Chrome](https://blog.google/products-and-platforms/products/chrome/gemini-3-auto-browse/).

## Engage and share feedback

WebMCP is under active discussion and subject to change in the future. If you
try these APIs and have feedback, we'd love to hear it.

- Join the [WebMCP origin trial](https://developer.chrome.com/origintrials/#/register_trial/4163014905550602241), and follow the implementation for Chrome on [Chrome Status](https://chromestatus.com/feature/5117755740913664).
- [Read the WebMCP explainer](https://github.com/webmachinelearning/webmcp?tab=readme-ov-file), raise questions and participate in discussion.
- Read [WebMCP best practices](https://developer.chrome.com/docs/ai/webmcp/best-practices).
- Read our [WebMCP tool security guidance](https://developer.chrome.com/docs/ai/webmcp/secure-tools) and [best practices](https://developer.chrome.com/docs/ai/webmcp/best-practices).
- If you have feedback on Chrome's implementation, file a [Chromium bug](https://crbug.com/new?component=2021259).