What Is WebMCP? How to Make Your Site Ready for AI Agents

WebMCP is a new browser interface that lets a website offer tools to AI agents, like ChatGPT and Chrome. Each tool has a name, a description of what it does and when to use it, and defined inputs, like a product name or a maximum price.

The tool itself runs inside the website's page, in the site's own JavaScript, with the user's session. So if the customer is signed in to the store, the agent uses the tool with the same account, without you building a separate API.

Back to the customer's request: let's see what the agent does in each case. Pick a case, click "Next step", and watch which part of the page the agent touches at each step.

The difference isn't only the number of steps. Without WebMCP, every step rests on the agent's guess about the page, and any design change can break it. With WebMCP, the site defines the tool and its inputs, and the agent carries it out.

Before you write any code, ask one question: what do customers actually do on my site? On our coffee store, the answer is probably four things: search for a product, check whether it's in stock, add it to the cart, and track the order after buying. Each of those can be a tool:

The last column matters most. Read-only tools are safe to leave to the agent, but any tool that changes something, like the cart or payment, has to stay visible to the user and under their control. That's exactly what we'll apply in the code.

The easiest place to start is the search form, because you already have it. All you do is give the form a name and a description, and each field an optional description. Chrome's documentation calls this the declarative API:

<form toolname="search_products"
      tooldescription="Search the store's products by name, with an optional maximum price in USD."
      action="/search">
  <input name="q" toolparamdescription="Product name or type, like manual coffee grinder">
  <input name="max_price" type="number" toolparamdescription="Highest price in USD">
  <button>Search</button>
</form>

The form is now a tool called search_products. When an agent calls it, the browser focuses the form and fills in both fields in front of the customer, and the customer clicks "Search", as you saw in the simulation.

Remove toolname or tooldescription and the tool disappears. toolautosubmit suits a search form, because searching changes nothing, but not a payment or delete form.

Not everything is a form. A product's stock level, for example, comes from your API, and there's no form the customer fills in for it. Here you register the tool in code, the way Chrome's docs call the imperative API:

document.modelContext.registerTool({
  name: "check_stock",
  description: "Returns how many units of a product are in stock.",
  inputSchema: {
    type: "object",
    properties: { sku: { type: "string" } },
    required: ["sku"],
  },
  annotations: { readOnlyHint: true },
  execute: async ({ sku }) => {
    const res = await fetch(`/api/stock?sku=${encodeURIComponent(sku)}`);
    return res.json();
  },
});

This code defines the tool with what a form has, and more. name and description work just like the form's. inputSchema defines the inputs as JSON Schema: the tool needs an sku, and it's a string. execute is the code that actually runs, and what it returns goes back to the agent. And readOnlyHint tells the agent the tool only reads, and changes nothing.

If a tool does change something, like add_to_cart, use consequentialHint instead, to mark it as doing something significant or irreversible.

And if you find articles or examples that write navigator.modelContext, that's the old name. The current spec moved it to document.modelContext, so write the new one.

WebMCP gets mixed up with two things: MCP, because the name comes from it, and Schema, because both describe a site to a machine. This table separates the three:

The spec itself describes a page that uses WebMCP as something like an MCP server, with its tools written in the page's code instead of on a server. And WebMCP doesn't replace Schema: Schema describes the product, while WebMCP lets the agent do something with it, like find it or add it to the cart.

WebMCP is in Chrome, but it isn't on for everyone yet. To try it on your computer:

1. Open Chrome, type chrome://flags/#enable-webmcp-testing in the address bar, set it to Enabled, and relaunch Chrome.
2. Install the Model Context Tool Inspector extension that Chrome recommends, and add a Gemini API key, which it uses to try the tools in plain language.
3. Open a page that has WebMCP tools, like the demos Chrome points to, or any page on our site, since every one of them has a search_courses tool for searching the courses. The extension lists each tool with its name, description and inputs.
4. Ask for something in plain words, like "find me a manual grinder under $60", and watch how the tool is called and what fills in the form.

To see whether a page on your site is ready without turning anything on in your browser, run it through the WebMCP checker: it tells you whether the page offers tools, whether agents can reach it, and what's missing and how to fix it.

When you're ready for your real visitors to use it, Chrome runs an origin trial from Chrome 149: you register your site and put the token you get in your page. Leave Third-party matching off when you register, because Chrome ignores that kind of token in the page itself. And remember that WebMCP only works over HTTPS.

In ChatGPT, open the built-in browser in the desktop app and go to the page. If it has tools, an arrow shows in the address bar, gray when tools are available and blue while ChatGPT is using them. We walk through that feature in Advanced ChatGPT Features and How to Use Them.

To be clear from the start: there's no evidence that WebMCP affects your rankings in Google, and Chrome's own documentation doesn't mention search at all. If someone tells you it's a new ranking factor, that claim has no source behind it.

What is changing is how people use websites. Some people now ask ChatGPT, or a browser with an agent, to search or book for them, and the agent visits the site. If the site isn't clear to the agent, the task can fail, even when your page is the first result in Google.

The part that concerns you as an SEO writer is writing the tools themselves, because a tool's name and description are what the agent chooses by, just as a title and description are what a searcher chooses by. Here is Chrome's advice for writing tools, with examples from the store:

Start with the forms you already have: site search, quote requests, bookings, order tracking. That's the easiest step, because it's attributes on HTML you already have, and it usually doesn't need a developer. After that, keep these in mind:

• For any tool that does something you can't undo, like paying or deleting, leave the submit to the user, don't use toolautosubmit, and in JavaScript mark it with consequentialHint.
• Make error messages say why, like "this product is out of stock" or "that order number is wrong", so the agent understands and retries with the right data.
• WebMCP is still a draft and its details change; the interface's own name moved from navigator to document, so check the docs before you launch anything.
• So far, the documented support is in Chrome, and in ChatGPT through Site Tools, so don't rely on it alone for anything essential on your site.
• When you're done, run the page through the WebMCP checker to make sure the form is now a tool and every field in it is described.