WebMCP: A New Standard for AI Agent Interaction on the Web |

Translate: 🇫🇷 French 🇸🇦 Arabic 🇨🇳 Chinese 🇪🇸 Spanish

Google recently released an interesting concept for Chrome called WebMCP.

I want to quickly explain what it is, why it’s cool, and how you can start playing with it today.

The Core Problem: Deterministic Agent Behavior

At its core, WebMCP tries to solve one major problem.

It aims to allow AI agents to have deterministic behavior on every single website.

Imagine you own an e-commerce website.

Your goal is to let any AI agent use your site effectively.

In a future with millions of agents taking action for humans, you currently have two options without WebMCP.

Option 1: The Custom MCP Server

First, you could build your own MCP server.

You’d hope the agent is equipped with your specific MCP.

This is unlikely to happen.

Your website isn’t going to be used by every agent, every day.

Loading up a custom MCP in every agent all the time just doesn’t make sense.

This approach generally fails for most websites.

Option 2: Relying on Browser Automation

The other option is relying on the agent’s browser-use capabilities.

More and more agents, like Amanuensis, can open a browser and perform tasks.

The problem here is that this capability is generally non-deterministic.

These browser agents extract raw, gigantic HTML, clean it up, and feed it to a large language model.

Sometimes they take screenshots with annotated UI elements.

They try to create a translation layer, looking at HTML or screenshots to interpret what core actions the agent needs to take.

As we know, most websites are not built for agents.

They are designed for human consumption.

This means a huge amount of noise is sent to the LLM, leading to non-deterministic behavior.

The agent will likely fail to complete tasks on your website.

In an era where AI agents are the main consumers of web content, this is a problem.

If your website is easier for an agent to use, more people will likely adopt it.

This is why the WebMCP concept is so interesting.

The WebMCP Solution: Declarative Tools

The way it works is you still build an MCP, but you declare it in your code or HTML.

The agent operating the browser doesn’t need a self-made translation layer.

Instead, it just looks at the actions and MCP tools you register for each page.

For your e-commerce homepage, you might register actions like:

searchProducts
getCategories
getFilters

For a product detail page, actions could include:

addToShoppingCart
getSimilarProducts

The agent can execute these actions just like calling a normal MCP tool.

But these tools are loaded the moment the agent lands on a specific page.

You still get the benefit of truly deterministic actions.

How It Works: Two Implementation Methods

WebMCP exposes two ways you can set things up.

One is declarative, and the other is imperative.

1. The Declarative Method: HTML Attributes

The declarative method means you can add certain HTML attributes to your elements.

Let’s look at a demo from the Chrome team.

Here’s a basic reservation page made with simple HTML.

<form>
  <label for="party-size">Party Size:</label>
  <input type="number" id="party-size" name="party-size">
  <label for="reservation-time">Time:</label>
  <input type="time" id="reservation-time" name="reservation-time">
  <button type="submit">Book</button>
</form>

In this HTML, for elements like a <form>, you can start adding attributes like tool-name and tool-description.

For each input the agent can customize, you add a tool-param-description.

Here is how the code evolves:

- <form>
+ <form tool-name="bookTable" tool-description="Books a table at the restaurant">
  <label for="party-size">Party Size:</label>
- <input type="number" id="party-size" name="party-size">
+ <input type="number" id="party-size" name="party-size" tool-param-description="The number of people in the party">
  <label for="reservation-time">Time:</label>
- <input type="time" id="reservation-time" name="reservation-time">
+ <input type="time" id="reservation-time" name="reservation-time" tool-param-description="The desired time for the reservation">
  <button type="submit">Book</button>
</form>

Once you set up these attributes, the latest Chrome version exposes a bookTable tool.

This tool has a description and an input schema, automatically transformed from your attributes.

Any agent supporting the WebMCP format is now automatically equipped with this tool.

When the agent calls the tool, it automatically fills the form content.

After the call, special UI elements can pop up, like a “Please review and confirm” floating tooltip.

This is also part of the WebMCP upgrades, using special CSS classes triggered when an agent fills a form.

This is how easily you can make your static website agent-ready.

2. The Imperative Method: JavaScript Registration

The more likely approach for a real application is the imperative mode.

This allows you to register tools from JavaScript or bind MCP tools when a React component renders.

The new version of the Chrome browser supports navigator.registerTool() and navigator.unregisterTool().

Imagine a React app for booking flights.

When the user is on the search page, an MCP tool for searchFlights can be exposed.

The agent can fill in the form and take action, redirecting to the search results page.

What’s really cool is that the exposed MCP tool changes as you navigate.

On the search results page, you now have relevant tools like:

setFilter
searchFlights
resetFilter
listFlights

This is the coolest part of WebMCP.

Each web page has a special list of exposed MCP tools loaded contextually.

You use the new navigator.register() and unregister() functions.

The rest is the same as building any MCP tool, defining schemas for the name, description, inputs, and outputs.

Then, for each component, you can register and unregister tools.

Whenever the relevant UI component shows up, the MCP tools load accordingly.

The Power of Contextual MCPs

This WebMCP concept introduces contextual MCP methods, which is an awesome idea.

Let’s look at how things have evolved.

graph TD
    A[Initial MCP] --> B{Problem: Too Much Context};
    B --> C[Skill Concept];
    C --> D{Problem: No Strict Schema};
    D --> E[WebMCP: Contextual Tools];
    A --> E;

Initial MCP: Great for extending agent capabilities with guaranteed schema validation. The problem? It takes too much context, relevant or not.
Skill Concept: A more recent idea. It only loads the title and description, with the full details loaded contextually when needed. This is better for long-tail use cases, but it lacks strict schema guarantees.
WebMCP (Contextual MCP): This creates an interesting pattern where different MCP tools are loaded depending on the context—in this case, the web page the agent is on.

This is the future.

Ideally, we should always strive for a contextual MCP setup.

How to Get Started with WebMCP

To get started, you need the latest version of Chrome.

[!TIP] Setup Instructions:

Install the Chrome Beta version.

Go to chrome://flags and search for web-mcp.

Enable the WebMCP flag.

Install the Chrome extension called Model Context Tool Inspector.

This will equip you with the WebMCP tools portal.

Declarative Example: Contact Us Form

Let’s say I have a static “Contact Us” page.

Currently, no tools are registered for it.

The page is a single HTML file.

First, we add tool-name and tool-description attributes to the <form> element.

This allows WebMCP to automatically pick it up as a tool.

Then, we add tool-param-description for every single input the agent needs to fill.

Just by doing that and refreshing the page, the WebMCP tool is now recognized by the agent.

To make a full loop, we need to ensure a proper tool response is returned.

We can customize the event listener for the form’s submit action.

We check for the agent.invoked event to know if an agent is executing the action.

If so, we can send an error message back or a success response.

Now, when the agent fills out the form, the logs will show the tool call, response, and result.

Finally, we can add special styling for when the agent is active using classes like tool-form-active and tool-submit-active.

Imperative Example: React Kanban Board

Next, let’s set up WebMCP for a React or Next.js project.

I have a functional Kanban board app.

Currently, no tools are registered for it.

We’ll use navigator.registerTool and navigator.unregisterTool to bind MCP tools to React components.

First, create a file to contain all the WebMCP logic.

project/
└── lib/
    └── web-mcp.ts

In web-mcp.ts, we declare our register and unregister tool functions.

We’ll also need a patchAndFetch function to generate request IDs for tracking events.

Then, we start defining the actual MCP tools and functions:

listColumns
addCard
moveCard
deleteCard
deleteColumn

Each function is wrapped under an MCP tool schema.

Finally, we wire up these WebMCP tools into our actual UI components.

And that’s pretty much it.

Now, if I refresh the page, all the WebMCP tools show up.

I can ask the agent: “Help me plan all the tasks for preparing a dinner for three people. Each column should be a category of tasks.”

You can see it starts creating different columns in real-time.

For each category, it starts adding tasks autonomously.

I’ve suddenly turned a general agent into one that is fluent with my web app.

It will make absolutely zero errors because every action is taken through a deterministic MCP tool.

This is a wrap on WebMCP. I hope you enjoyed this article.