WebMCP: Teaching Your Website to Talk to AI Agents

TL;DR Highlight

Let sites declare tools and agents call them without guessing at the DOM

Who Should Read

Frontend or full-stack developer whose browser agents keep breaking when scraping their web app's buttons and forms

Core Mechanics

Declare tools instead of scraping
- Today agents read HTML, guess buttons, click, and break when layouts change.
- WebMCP lets a site register tools like book_table with a name and input schema.
- Redesigns don't break it as long as the tool name and schema stay the same.
A draft standard from Chrome and Edge
- It is a W3C Web Machine Learning Community Group draft, not a finished standard.
- It is an origin trial from Chrome 149 and can be enabled locally via chrome://flags/#enable-webmcp-testing.
- Chrome's docs say it is subject to change.
Registering a tool is one call
- Pass name, description, inputSchema (JSON Schema), and execute to document.modelContext.registerTool.
- execute just calls functions your site already has, like addTodoToPage.
- A declarative option annotates HTML forms instead.
Runs in the logged-in tab
- execute runs visibly in the user's open page with their own JS and session.

Community Reactions

Why not plain APIs or server-side MCP
- Some argue a robust server-side MCP is better for new services.
- Others say WebMCP helps with cross-site tasks and client-side UI actions like filtering.
- Another view is that it suits big legacy web SaaS that can layer it over existing UI.
Tying it to the browser is a weakness
- Some say listing and calling tools needs a JS environment, limiting it to in-browser agents.
- Others prefer publishing options under .well-known so any client can use them.
Worry about humans and agents diverging
- One view is that maintaining separate info for humans and agents will drift apart.
- Another skeptical view is that only about 0.1% of sites adopt such features properly.
Simpler alternatives people tried
- One commenter exposed an AI summary of actions per HTMX component with a short-lived token prompt and said even small models navigated well.
- Another said an accessibility engineer called WebMCP accessibility tech disguised as an AI thing.

How to Apply

List 3 candidate actions on your site
- In 30 minutes, write down 3 things you want agents to do, like search, filter, or create a ticket.
- Classify each as read, reversible change, or risky action.
- Check whether a JS function for each already exists.
Enable the flag and register one tool
- Turn on chrome://flags/#enable-webmcp-testing.
- Register one read-only tool with registerTool.
- Confirm it appears in DevTools under Application → WebMCP.
Put a human gate before risky actions
- Route irreversible tools like payments or submissions through a confirmation dialog.
- Add readOnlyHint to read-only tools.
- Add untrustedContentHint to tools that return third-party content.
Add a shim for the API rename
- Support both document.modelContext and navigator.modelContext with a one-line shim.

Try It

copy & run

// Enable chrome://flags/#enable-webmcp-testing in Chrome 149+, then paste into your page's console or script

const mc = document.modelContext || navigator.modelContext;

await mc.registerTool({
  name: 'add_todo',
  description: 'Add an item to the to-do list',
  inputSchema: {
    type: 'object',
    properties: { text: { type: 'string' } },
    required: ['text']
  },
  execute: async ({ text }) => {
    addTodoToPage(text); // {{replace with an existing function on your site}}
    return `Added to-do: ${text}`;
  }
});

// Next: check DevTools → Application → WebMCP for the tool, then register one more read-only tool

Terminology

WebMCPA proposed standard that lets a web page register its features as tools for AI agents. Think of it as a menu a site hands to agents.

origin trialA Chrome program that lets specific sites try not-yet-final features early.

JSON SchemaA spec describing the fields and types of input data. It works like an order form telling the agent what to pass.

Permissions PolicyA setting restricting which browser features a page or iframe may use. Here it stops other origins from registering tools.

readOnlyHintA flag saying a tool only reads and never changes data. It helps agents and browsers know which calls are safe to make freely.