What is WebMCP, and should you add it to your website?

What problem it solves

A browser agent normally works out a page from its HTML, accessibility tree and screenshots, then clicks and types like a person. That is slow and can go wrong. With WebMCP the page tells the agent what it can do and how. The tools run in the page, in the user’s session, with the user’s sign-in, so nothing new has to be hosted.

Status

Chrome’s documentation describes WebMCP as a proposed web standard, with an origin trial that began in Chrome 149 and a local testing flag at chrome://flags/#enable-webmcp-testing (Chrome for Developers). The API has already changed during the trial: the entry point is now document.modelContext, and older examples that use navigator.modelContext are out of date. Expect more changes.

The imperative API

Register a tool from JavaScript with a name, a description, an input schema and a function to run:

if ('modelContext' in document) {
  await document.modelContext.registerTool({
    name: 'search_products',
    description: 'Search the catalog by keyword. Returns matching products with name, price and availability.',
    inputSchema: {
      type: 'object',
      properties: { query: { type: 'string' }, inStockOnly: { type: 'boolean' } },
      required: ['query'],
    },
    annotations: { readOnlyHint: true },
    execute: async ({ query, inStockOnly }) => {
      const results = await searchCatalog(query, { inStockOnly }); // your existing function
      return JSON.stringify(results.slice(0, 10));
    },
  });
}

Feature-detect before calling, as above, so the page works unchanged in browsers without the API. Use annotations to tell the agent whether a tool only reads or has consequences.

The declarative API

An existing HTML form becomes a tool by adding attributes. No JavaScript is needed:

<form toolname="request_quote"
      tooldescription="Request a price quote for a product and quantity."
      action="/quote" method="post">

  <label for="sku">Product code</label>
  <input id="sku" name="sku" required>

  <label for="qty">Quantity</label>
  <input id="qty" name="qty" type="number" min="1" required
         toolparamdescription="Number of units, in the product's selling unit.">

  <button type="submit">Request quote</button>
</form>

By default the agent fills in the form and the user presses submit. Adding toolautosubmit lets the agent submit it. Leave that off for anything that spends money or sends a message in the user’s name.

WebMCP or an MCP server?

They are complementary. Start with the page itself, add an MCP server if you have an API, and try WebMCP on one high-value form to learn how agents use it.

Should you add it now?

• Yes, as a small experiment, if you have a form-driven task such as search, booking or a quote request, and developers to maintain it while the API changes.
• Not yet, if agents are still blocked or cannot read your pages. Fix the basics first. They help every agent in every browser.

Frequently asked questions