What Is WebMCP? The Complete Guide to the Web Model Context Protocol

The Problem WebMCP Solves

Before WebMCP, AI agents interacting with websites had to rely on brittle, unreliable techniques: taking screenshots and parsing pixels, scraping the DOM, or simulating mouse clicks and keystrokes. These approaches are slow, error-prone, and break whenever a website changes its layout.

WebMCP (Web Model Context Protocol) inverts this model entirely. Instead of the AI agent trying to figure out what a website can do, the website explicitly declares its capabilities as structured tools that any AI agent can discover and invoke.

How WebMCP Works

At its core, WebMCP introduces the navigator.modelContext API on the Navigator interface in secure (HTTPS-only) contexts. Web pages that implement WebMCP can be thought of as MCP servers running in client-side script rather than on a backend.

The Core API

The API exposes four primary methods:

• registerTool() — Registers a single tool with a name, description, JSON Schema for parameters, and an execute handler.
• unregisterTool() — Removes a tool by name.
• provideContext() — Replaces all existing tools with a new set (bulk registration).
• clearContext() — Unregisters every tool on the page.

Registering a Tool

Here is a basic example of registering a flight search tool:

navigator.modelContext.registerTool({
  name: "search_flights",
  description: "Search for available flights between two cities",
  inputSchema: {
    type: "object",
    properties: {
      origin: { type: "string", description: "Departure airport code" },
      destination: { type: "string", description: "Arrival airport code" },
      date: { type: "string", format: "date" },
      passengers: { type: "integer", minimum: 1, maximum: 9 }
    },
    required: ["origin", "destination", "date"]
  },
  execute: async (params) => {
    const results = await fetchFlights(params);
    return { flights: results };
  }
});

Two Integration Approaches

1. Declarative API (Zero JavaScript)

For simple form-based interactions, WebMCP offers a purely HTML-based approach. Add attributes directly to your existing <form> elements:

<form toolname="product_search"
      tooldescription="Search products by keyword and category"
      toolautosubmit="true">
  <input name="query" type="text" />
  <select name="category">
    <option value="electronics">Electronics</option>
    <option value="books">Books</option>
  </select>
</form>

The browser automatically translates form fields into a structured tool schema. When invoked, the browser pre-fills fields visually and waits for user confirmation (unless toolautosubmit is enabled).

2. Imperative API (JavaScript)

For complex, multi-step workflows or actions that do not map to forms, the JavaScript API provides full control. This is the approach used for operations like logout flows, multi-step wizards, or custom filtering interfaces.

Architecture Deep Dive

WebMCP follows a clear separation of concerns:

• Model Context Provider: The browsing context (browser tab) running the page that registers tools.
• Agent: The application consuming the tools — a browser built-in AI assistant, a Chrome extension, or a desktop app.
• Browser: The mediator that maintains the tool registry, validates inputs against schemas, routes invocations, and enforces security boundaries.

Tools are scoped to a single tab and persist only for the page's lifetime. Navigation clears all registered tools automatically.

WebMCP vs. Anthropic's MCP

While they share conceptual lineage, WebMCP and Anthropic's MCP are architecturally distinct and complementary:

Aspect	Anthropic MCP	WebMCP
Transport	JSON-RPC over stdio/HTTP	Browser-native postMessage
Execution	Backend server	Client-side in browser tab
Auth model	OAuth 2.1	Browser session (cookies)
Scope	Tools, resources, prompts	Tools only
Governance	Linux Foundation (AAIF)	W3C Community Group

A product might use both: Anthropic's MCP for server-side agent integrations, and WebMCP for when an agent is browsing the site in a user's browser.

Security Model

WebMCP inherits the browser's battle-tested security infrastructure:

• Same-Origin Policy: Tools are isolated to their hosting origin.
• HTTPS Required: The API is only available in secure contexts.
• CSP Integration: Respects Content Security Policy directives.
• Human-in-the-Loop: The browser prompts users before executing sensitive operations.
• Explicit Capability Exposure: Agents can only see registered tools, not arbitrary DOM.

Browser Support

As of February 2026, WebMCP is available in Chrome 146 Canary behind the "WebMCP for testing" flag. Edge support is expected given Microsoft's co-authorship of the specification. Firefox and Safari are participating in the W3C working group but have not announced implementation timelines.

What This Means for Developers

WebMCP represents a paradigm shift. Making your website "AI-agent friendly" is becoming as important as making it search-engine friendly was two decades ago. Start by identifying your site's core user workflows, express them as WebMCP tools, and you will be ahead of the curve when browser support goes mainstream.