webmcp-browser-tools

WebMCP — browser-side API that lets web applications expose their own functionality as MCP tools TO AI agents. Use when designing or integrating with web apps that surface UI actions (forms, buttons, data queries) as callable agent tools. NOT for web scraping or fetching external pages.

Jump to install

Repository: oimiragieo/agent-studio
Last source activity: April 21, 2026 at 23:45
Detected SKILL.md language: English
Stars: 36
Forks: 6

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

Back to search Back to installation

name	webmcp-browser-tools
description	WebMCP — browser-side API that lets web applications expose their own functionality as MCP tools TO AI agents. Use when designing or integrating with web apps that surface UI actions (forms, buttons, data queries) as callable agent tools. NOT for web scraping or fetching external pages.
version	1.2.0
model	sonnet
invoked_by	agent
user_invocable	false
tools	["Read","WebFetch","WebSearch"]
agents	["frontend-pro","developer","researcher"]
category	Web Development
tags	["webmcp","browser","mcp","w3c","ai-agents","web-development","chrome"]
verified	true
lastVerifiedAt	2026-03-01T06:07:51.950Z
source	builtin
trust_score	100
provenance_sha	f35ab7b318c94a5c

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

Scenario	Correct Tool
Agent fetches content from an external website (BLS, Ongig, news sites)	`WebFetch` or `mcp__Exa__web_search_exa`
Web app exposes its own actions (add to cart, filter results, submit form) to an AI agent	WebMCP
Agent automates a browser (click, fill, navigate)	`mcp__chrome-devtools__*` or Playwright

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

Package	Purpose
`@mcp-b/react-webmcp`	React hooks to expose components as MCP tools (v1.1.1)
`@mcp-b/webmcp-polyfill`	Strict WebMCP core polyfill for any framework
`@mcp-b/webmcp-types`	TypeScript type definitions
`@mcp-b/transports`	Browser transport layer (WebSocket/postMessage)

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

// 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) }] };
        },
      },
    ],
  });
}

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>
  );
}

Aspect	Standard MCP Server	WebMCP
Location	Separate server process	Browser client-side JS
Context access	Isolated from UI	Shares live UI state, DOM, user session
Status	Production-ready	Chrome Canary preview (stable ~mid-2026)
Installation	npm server package	`@mcp-b/` npm packages (polyfill) or native browser API
Setup	Separate process, stdio/SSE	In-page script, browser transport
Auth	Server-level	Browser security model + page context

Agent	Role
`frontend-pro`	Primary — designing and implementing WebMCP tool registration in web apps
`developer`	Supporting — integration architecture, polyfill setup, TypeScript types
`researcher`	Supporting — tracking spec evolution, browser support status

Anti-Pattern	Why It Fails	Correct Approach
No feature detection guard	Crashes in non-WebMCP browsers	Always check `'modelContext' in window.navigator`
Using WebMCP for external URL fetching	Wrong direction of data flow	Use `WebFetch` or Exa for external content
Skipping JSON Schema for tool inputs	Ambiguous contracts, runtime errors	Define schema for all tool inputs before handler
Registering backend-equivalent tools	Duplicates MCP server, ignores page state	Tools should expose UI-specific actions and state
Relying on native API in production now	Chrome stable ships ~mid-2026	Use `@mcp-b/webmcp-polyfill` until native is stable