Skip to main content
This page explains the core concepts you’ll encounter when working with WebMCP. For a high-level introduction, see the Introduction.

​
The Core API

WebMCP centers around one key method: navigator.modelContext.registerTool(). This browser API lets you expose JavaScript functions as structured tools that AI agents can discover and call. 
navigator.modelContext.registerTool({
  name: 'add_to_cart',
  description: 'Add a product to the shopping cart',
  inputSchema: { /* ... */ },
  async execute({ productId, quantity }) {
    // Your existing logic
  }
});

​
WebMCP vs MCP

WebMCP is inspired by Anthropic’s Model Context Protocol (MCP) but adapted for web browsers:
AspectMCPWebMCP
EnvironmentBackend serversBrowser
Use caseServer-to-agentHuman-in-the-loop
AuthenticationOAuth 2.1Inherits user session
APIMCP SDKnavigator.modelContext
Both protocols are complementary:
  • Use MCP for backend services and server-to-agent communication
  • Use WebMCP for browser-based tools where users are present

​
MCP-B: The Reference Implementation

Since browsers don’t yet natively support navigator.modelContext, MCP-B provides a polyfill that:
  1. Implements the W3C API - Adds navigator.modelContext to any browser
  2. Bridges to MCP - Translates WebMCP tools to MCP format for compatibility with existing AI frameworks

​
Next Steps

Architecture

Explore the technical architecture and component interactions

Tool Registration

Learn how to register tools with navigator.modelContext

Quick Start

Get started with WebMCP in minutes

Glossary

Key terminology and definitions