What is WebMCP?

Registering a tool

A tool needs a name, a description an agent can choose it from, a JSON Schema for its input, and a function that does the work. Annotations such as readOnlyHint and consequentialHint tell the agent whether a tool only reads data or changes something important.

if (document.modelContext) {
  await document.modelContext.registerTool({
    name: "search_products",
    description: "Search the catalog by keyword. Returns name, price, stock and URL for up to 10 products.",
    inputSchema: {
      type: "object",
      properties: { query: { type: "string" }, maxPrice: { type: "number" } },
      required: ["query"],
    },
    annotations: { readOnlyHint: true },
    execute: async ({ query, maxPrice }) => {
      const res = await fetch(`/api/search?q=${encodeURIComponent(query)}&max=${maxPrice ?? ""}`);
      return JSON.stringify(await res.json());
    },
  });
}

WebMCP vs a remote MCP server

1. Where it runs

   WebMCP runs in the browser tab, with the user's cookies and session. A remote MCP server runs on your infrastructure behind OAuth.

2. Who can use it

   WebMCP serves agents working in a browser that supports it. A remote MCP server works from Claude, ChatGPT, Cursor and any other MCP client, with no browser involved.

3. What to build first

   For a SaaS product or API, a remote MCP server reaches more agents today. WebMCP suits flows that live in the page: search and filters, carts, booking forms, support.

When to add it

1. Pick the clicks agents get wrong

   Multi-step filters, date pickers, configurators and carts are where screenshot-and-click agents struggle most.

2. Keep tools small and read-only first

   Start with search and lookup tools. Add tools that change things once you've seen how agents use them.

3. Confirm consequential actions

   Mark purchases and deletions with consequentialHint and ask the user to confirm; web.dev notes tools can request confirmation through a dialog.

4. Fix the basics anyway

   Most agents don't use WebMCP yet. Semantic HTML, named buttons and labelled fields are still how they operate your page.

5. Feature-detect

   It's an origin trial and the API is still changing, so check that document.modelContext exists before calling it, and follow Chrome's docs for the current shape.

Questions