webmcp-browser-tools

Dieser Auszug wurde bei der Prüfung gespeichert. Die externe Quelle enthält die vollständige und aktuelle Version.

---
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)        |
| `@mcp-b/webmcp-ts-sdk`     | Adapts the official MCP TypeScript SDK for browsers    |
| `@mcp-b/create-webmcp-app` | Scaffolding tool for new WebMCP apps                   |

Install:

```bash
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.

```javascript
// 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: {