Skip to main content

​
Key Components

W3C Web Model Context API

Standard browser API (navigator.modelContext) for registering tools - the WebMCP specification

MCP-B Polyfill & Bridge

Implements navigator.modelContext for current browsers and translates between WebMCP and MCP protocols

Transport Layer

Communication between browser contexts (tabs, extensions, pages)

MCP-B Extension

Development and testing tool that collects WebMCP servers from tabs and supports userscript injection

​
High-Level Architecture

​
Component Interaction Flow

​
Data Flow

Understanding how data flows through WebMCP when AI agents interact with your website tools.

​
Tool Execution Flow

The following diagram shows how the extension maintains a fresh tool list and handles AI requests:

​
How It All Works Together

  1. Your website registers tools using navigator.modelContext.registerTool()
  2. The MCP-B polyfill implements the WebMCP API and translates to MCP protocol
  3. Transport layers handle communication between different browser contexts
  4. The MCP-B extension aggregates tools from all tabs and exposes them to AI agents
  5. AI agents discover available tools and execute them on behalf of users

Tool Registration

Learn how to register and manage tools

Transports

Understanding transport layers and communication

Extension Architecture

Deep dive into the MCP-B extension

Security Model

How WebMCP maintains security