Webmcp Browser Tools

WebMCP Browser Tools

WebMCP is a browser API specification — published as a W3C Community Group Draft by contributors from Google and Microsoft (February 2026) — that enables web applications to expose their own UI functionality as MCP tools to AI agents.

Direction of data flow: Web App → exposes tools → AI Agent calls them.

This is the reverse of web scraping. The web app author decides what functions agents can call. The agent doesn't read the page — it calls structured tools the page registered.

Critical Distinction

WebMCP is not a web scraper, crawler, or search engine. It is a tool registration protocol for web apps that want to be first-class AI-callable services.

Status (as of 2026-02-22)

• Spec: W3C Community Group Draft — <https://github.com/webmachinelearning/webmcp>
• Browser support: Early preview in Chrome 146 Canary (shipped February 2026) behind the Experimental Web Platform Features flag. Stable rollout expected mid–late 2026.
• Installable packages: YES — the @mcp-b/ ecosystem provides working npm packages today (polyfill + React integration)

Available npm packages

Install:

npm install @mcp-b/react-webmcp
# or for raw usage:
npm install @mcp-b/transports @modelcontextprotocol/sdk zod

How WebMCP Works

A web app registers tools with the browser. An AI agent (that has been granted access) can call those tools. The handler runs as client-side JavaScript with full access to the page's state.

// Web app registers tools for AI agents to call
if ('modelContext' in window.navigator) {
  window.navigator.modelContext.provideContext({
    tools: [
      {
        name: 'filterProducts',
        description: 'Filter the product list by a natural language query',
        inputSchema: {
          type: 'object',
          properties: {
            query: { type: 'string', description: 'Natural language filter' },
          },
          required: ['query'],
        },
        execute({ query }, agent) {
          // Runs in-browser, has access to current UI state
          const results = productService.filter(query);
          return { content: [{ type: 'text', text: JSON.stringify(results) }] };
        },
      },
    ],
  });
}

React integration (via @mcp-b/react-webmcp)

import { useTool } from '@mcp-b/react-webmcp';

function ProductList({ products }) {
  useTool({
    name: 'filterProducts',
    description: 'Filter products visible on screen',
    inputSchema: {
      /* ... */
    },
    execute({ query }) {
      return products.filter(p => p.name.includes(query));
    },
  });
  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

Key Differences from Standard MCP

When to Use This Skill

Use Skill({ skill: 'webmcp-browser-tools' }) when:

• Designing a web app that should expose UI actions to AI agents (e.g., a dashboard that agents can query, a form workflow agents can submit)
• Integrating an existing web app with Claude via browser-side tools rather than building a backend MCP server
• Planning agent-to-web-app collaboration where the agent and user share the same browser interface (human-in-the-loop workflows)
• Evaluating whether to use WebMCP vs. backend MCP for a new product feature

Do NOT use this skill when:

• You need to fetch or scrape content from external sites → use WebFetch or mcp__Exa__web_search_exa
• You need browser automation (click, fill, navigate) → use mcp__chrome-devtools__*
• The web app does not support WebMCP → build a standard backend MCP server instead

Real-World Use Cases

• E-commerce agent: Product page registers searchInventory, addToCart, applyPromoCode — agent calls them without scraping
• Analytics dashboard: Dashboard registers runQuery(metric, timeRange) — agent can answer data questions without screen-reading
• Browser IDE: Code editor registers insertSnippet, runTests, openFile — agent assists without Playwright automation
• Figma/design tool: Registers createComponent, applyTheme — agent can directly modify designs

agent-studio Integration Path

Today (Chrome Canary + @mcp-b polyfill)

1. Install @mcp-b/webmcp-polyfill or @mcp-b/react-webmcp in the target web app 2. Register tools using window.navigator.modelContext.provideContext() 3. Claude Code (with the mcp__chrome-devtools__* tools available) can discover and call registered tools on the page

When Chrome Stable Ships (~mid-2026)

1. No polyfill needed — native browser API available 2. Update this skill's examples to reflect the stable API surface 3. Consider creating a dedicated webmcp-integration workflow for onboarding web apps as agent-callable services

Monitoring

Watch: <https://github.com/webmachinelearning/webmcp> for:

• Chrome intent-to-ship / origin trial announcements
• Firefox and Safari implementation signals
• Breaking changes in the window.navigator.modelContext API surface
• @mcp-b/ package releases for updated polyfill patterns

Anti-Patterns

• Do NOT use WebMCP to scrape or read content from sites you don't control — that's WebFetch / Exa
• Do NOT confuse with Anthropic's MCP (Model Context Protocol) — same underlying protocol, different surface: WebMCP is the browser-side extension of MCP
• Do NOT build production systems that require Chrome stable WebMCP until the API ships; use the @mcp-b/webmcp-polyfill for progressive enhancement today
• Do NOT register tools that require server-side data access — those belong in a backend MCP server, not a browser tool

Assigned Agents

Iron Laws

1. ALWAYS gate WebMCP usage behind if ('modelContext' in window.navigator) feature detection 2. NEVER use WebMCP for external page fetching or web scraping — use WebFetch or Exa instead 3. ALWAYS define JSON Schema for tool inputs before writing the handler (schema-first design) 4. NEVER register WebMCP tools that replicate backend requests — exploit current page state instead 5. ALWAYS use the polyfill (@mcp-b/webmcp-polyfill) for development until Chrome stable ships the native API

Anti-Patterns

Memory Protocol (MANDATORY)

Before starting: Read .claude/context/memory/learnings.md

After completing:

• New WebMCP pattern or API update → .claude/context/memory/learnings.md
• Browser support change (Chrome flag, origin trial) → .claude/context/memory/learnings.md
• Architecture decision for agent-browser integration → .claude/context/memory/decisions.md
• Breaking change in @mcp-b/ packages → .claude/context/memory/issues.md

ASSUME INTERRUPTION: If it's not in memory, it didn't happen.

Invoke the webmcp-browser-tools skill and follow it exactly as presented to you

WebMCP Browser Tools — Research Requirements

<!-- Agent: skill-creator | Task: webmcp-browser-tools | Session: 2026-02-22 -->

Research Summary

Date: 2026-02-22 (updated) Query intent: WebMCP W3C proposal, browser-side MCP tools, Chrome Canary status, available npm packages

Prior Art (VoltAgent/awesome-agent-skills)

Searched VoltAgent/awesome-agent-skills for 'webmcp', 'browser-mcp', 'web-agent-tools' — no matching skill found.

Primary Sources

1. W3C WebMCP Repository: https://github.com/webmachinelearning/webmcp

• W3C Community Group Draft published 2026-02-12
• Editors: Brandon Walderman (Microsoft), Khushal Sagar (Google), Dominic Farolino (Google)
• 1.6k stars, 60 open issues, active development
• NOT on the W3C Standards Track — Community Group proposal

2. Chrome 146 Canary (February 2026)

• Early preview shipped in Chrome 146 Canary
• Flag: Experimental Web Platform Features
• API: window.navigator.modelContext.provideContext({ tools: [...] })
• Stable rollout expected mid–late 2026

3. @mcp-b npm ecosystem (working packages today):

• @mcp-b/react-webmcp v1.1.1 — React hooks for WebMCP tool registration
• @mcp-b/webmcp-polyfill — Strict WebMCP polyfill for any framework
• @mcp-b/webmcp-types — TypeScript type definitions
• @mcp-b/transports — Browser transport layer
• @mcp-b/webmcp-ts-sdk — Adapts official MCP TS SDK for browsers
• @mcp-b/create-webmcp-app — Scaffolding tool

4. Distinction from Anthropic MCP: https://modelcontextprotocol.io/

• Anthropic's MCP is a separate standard (different organization)
• WebMCP is the W3C browser-native extension — same underlying protocol, different surface
• They are complementary, not competing

Design Constraints (Actionable)

1. Direction of data flow — WebMCP exposes web app functionality TO agents. It is NOT for reading/scraping external sites. All skill guidance must make this distinction explicit. Use WebFetch for external fetching.

2. Feature detection required — The API is not universally available. Always gate behind if ('modelContext' in window.navigator). The polyfill (@mcp-b/webmcp-polyfill) enables this pattern cross-browser today.

3. State sharing is the key differentiator — WebMCP's primary advantage over a backend MCP server is access to live DOM state, user authentication context, and active session data. Tool designs should exploit this rather than replicating what a backend MCP server already provides.

Non-Goals

• Do NOT implement a WebMCP polyfill from scratch — @mcp-b/webmcp-polyfill already exists
• Do NOT create browser extension workarounds — use the polyfill instead
• Do NOT conflate with Playwright-based browser automation (that's mcp__chrome-devtools__*)
• Do NOT guide users to use WebMCP for scraping/fetching external sites

Status Monitoring

• GitHub: https://github.com/webmachinelearning/webmcp
• Chrome Platform Status: search 'webmcp' or 'modelContext'
• npm: @mcp-b/react-webmcp (watch for version updates)
• MDN Web Docs (when proposal advances to Working Draft)

WebMCP Browser Tools Rules

Core Rules

Direction of Data Flow (CRITICAL)

WebMCP flows web app → exposes tools → AI agent calls them.

This is NOT:

• Web scraping (WebFetch is for that)
• External page fetching (mcp__Exa__web_search_exa is for that)
• Browser automation (Playwright / mcp__chrome-devtools__* is for that)

Feature Detection (MANDATORY)

Always gate WebMCP usage behind a feature check. The API is not available in all browsers:

if ('modelContext' in window.navigator) {
  window.navigator.modelContext.provideContext({ tools: [...] });
} else {
  // Fallback: standard MCP server or no agent integration
}

Polyfill for Today's Work

Use @mcp-b/webmcp-polyfill or @mcp-b/react-webmcp for development and early testing. Do NOT rely on native browser API in production until Chrome stable ships the API (~mid-2026).

Tool Design Principles

1. Exploit state access — WebMCP's advantage is live DOM/session access. Tools should leverage current page state, not replicate what a backend MCP server can already do. 2. Schema first — Define JSON Schema for all tool inputs before writing the handler. 3. Idempotent where possible — Agents may call tools repeatedly; side effects should be intentional and documented. 4. Single responsibility — One tool, one action. Avoid multi-purpose tools.

When to Use

• Designing a web app that should expose UI actions to AI agents
• Integrating an existing React/Vue/Svelte app with Claude via browser-side tools
• Planning human-in-the-loop agent workflows where agent and user share a browser interface
• Evaluating WebMCP vs. backend MCP server for a product feature

When NOT to Use

• Fetching/reading content from external websites → use WebFetch or Exa
• Browser automation (clicking, navigating) → use mcp__chrome-devtools__*
• The target web app does not support WebMCP → build a standard backend MCP server

Anti-Patterns

• Registering tools that fetch external URLs from the browser (defeats the purpose; use backend MCP)
• Building production systems on the native browser API before it ships in Chrome stable
• Confusing WebMCP (W3C Community Group proposal) with Anthropic's MCP (separate standard)

Related Skills

• webmcp-browser-tools — this skill
• mcp__chrome-devtools__* — browser automation (different direction)
• ripgrep — code search (unrelated, but useful for integrating into codebases)

WebMCP Tool Registration — Implementation Template

Use this template when adding WebMCP tool registration to a web application.

Vanilla JavaScript

// webmcp-tools.js — register this at app initialization

const WEBMCP_TOOLS = [
  {
    name: '<tool-name>',
    description: '<What this tool does and when an agent should call it>',
    inputSchema: {
      type: 'object',
      properties: {
        '<param>': {
          type: 'string',
          description: '<What this parameter means>',
        },
      },
      required: ['<param>'],
    },
    execute({ '<param>' }, agent) {
      // agent object: { id, name } — identifies which agent is calling
      // Return MCP-compatible content array
      const result = /* call your existing app function */;
      return {
        content: [{ type: 'text', text: JSON.stringify(result) }],
      };
    },
  },
];

export function registerWebMCPTools() {
  if (!('modelContext' in window.navigator)) {
    console.warn('WebMCP not supported in this browser — skipping tool registration');
    return;
  }
  window.navigator.modelContext.provideContext({ tools: WEBMCP_TOOLS });
  console.log(`[WebMCP] Registered ${WEBMCP_TOOLS.length} tools`);
}

React (via @mcp-b/react-webmcp)

npm install @mcp-b/react-webmcp

import { useTool } from '@mcp-b/react-webmcp';

function MyComponent({ data }) {
  useTool({
    name: '<tool-name>',
    description: '<What this tool does>',
    inputSchema: {
      type: 'object',
      properties: {
        query: { type: 'string' },
      },
    },
    execute({ query }) {
      // Has access to component props and state
      const result = data.filter(item => item.matches(query));
      return { content: [{ type: 'text', text: JSON.stringify(result) }] };
    },
  });

  return <div>{/* your component UI */}</div>;
}

Polyfill-first (for today, before native browser support)

npm install @mcp-b/webmcp-polyfill

import '@mcp-b/webmcp-polyfill';
// Now window.navigator.modelContext is available in all browsers
// Use the same Vanilla JS pattern above

Checklist

• [ ] Tools have clear, agent-readable descriptions
• [ ] All inputs have JSON Schema definitions
• [ ] Handlers are wrapped in try/catch with error content returns
• [ ] Feature-detected behind if ('modelContext' in window.navigator)
• [ ] Polyfill installed for cross-browser support (@mcp-b/webmcp-polyfill)
• [ ] Tools registered at app initialization (not lazy)
• [ ] Tested in Chrome 146 Canary with Experimental Web Platform Features enabled