WebMCP — Browser-Native AI Agent Tools

What it unlocks

Before WebMCP, browser AI agents had to simulate user interactions — clicking buttons, reading pixels, guessing at DOM structure. WebMCP replaces all of that with a clean contract: your page publishes named tools with typed schemas, agents discover and call them with structured arguments, and get structured JSON back.

• →No separate backend: Tools reuse your existing frontend JS — no new API surface or server framework required.
• →Schema-driven accuracy: Agents get typed schemas instead of guessing at the page structure — ~98% task accuracy vs fragile DOM automation.
• →Browser-enforced security: Same-Origin Policy, CSP, and HTTPS enforced by the browser. Sensitive operations can require user confirmation.
• →Session-aware context: Tools run in the user's live browser session — they have access to the user's auth state, cookies, and local data.

Two ways to register tools

1. Declarative — HTML attributes

Add a few attributes to existing form elements. If your forms are already semantic, you're mostly done.

<form
  toolname="searchProducts"
  tooldescription="Search the product catalog by keyword"
>
  <input
    name="query"
    toolparamdescription="The search term to look for"
    type="text"
  />
  <button type="submit">Search</button>
</form>

2. Imperative — navigator.modelContext

For dynamic or complex interactions, register tools in JavaScript with a full JSON Schema and an async handler.

navigator.modelContext.registerTool({
  name: "searchFlights",
  description: "Search available flights by route and date",
  inputSchema: {
    type: "object",
    properties: {
      origin:      { type: "string", description: "IATA airport code" },
      destination: { type: "string", description: "IATA airport code" },
      date:        { type: "string", description: "ISO 8601 date" },
    },
    required: ["origin", "destination", "date"],
  },

  execute: async ({ origin, destination, date }) => {
    // Reuse your existing frontend JS — no new backend needed
    return await flightSearchAPI({ origin, destination, date });
  },
});

Lifecycle methods

// Register a single tool
navigator.modelContext.registerTool({ name, description, inputSchema, handler });

// Remove a tool by name
navigator.modelContext.unregisterTool("searchFlights");

// Replace the full toolset at once (e.g. on route change)
navigator.modelContext.provideContext([tool1, tool2]);

// Remove all tools
navigator.modelContext.clearContext();

Live demo

5 tools are registered via navigator.modelContext.registerTool() when this page loads. Each requires a non-trivial browser API — permissions, async I/O, hardware sensors, or multi-source data. Select a tool, read its schema, see the registration code, fill in inputs, and run it exactly as a browser AI agent would.

{
  "type": "object",
  "properties": {
    "count": {
      "type": "string",
      "description": "Badge number (0 to clear)"
    }
  },
  "required": [
    "count"
  ]
}

How to enable

1. Download Chrome Canary 146.0.7672.0 or later.
2. Navigate to chrome://flags/#enable-webmcp-testing, set to Enabled, and relaunch.
3. Install the Model Context Tool Inspector extension — a new DevTools panel appears showing all registered tools with schemas and a run button.
4. Reload this page — the green badge in the demo above will show 5 tools registered.

Ways to test WebMCP tools on any site

This site registers tools on every page via SiteMCP — getSiteInfo, getWritings, searchWritings, getWritingById, and getLabExperiments. Here's how to call them.

• Model Context Tool InspectorChrome 146 · Official
• MCP-B ExtensionNo Canary needed · Cross-browser
• webmcp-bridgeCLI · Claude / Cursor / Windsurf
• OpenClawAI Agent · WebMCP Skill
• webmcp.sh playgroundOnline · No install

WebMCP vs. Anthropic MCP

These operate at different layers and complement each other. A company might run a backend MCP server for ChatGPT/Claude API integrations while also implementing WebMCP on their consumer website for browser agents in the user's active session.