Skip to main content

​
Start Here

Use this page when you want help choosing the right docs path. If you want the overview first, start on the homepage.
Start with the smallest layer that fits the job. If you are unsure, read Choose a runtime.

​
Pick a starting point by role

Web developer

You build websites and want to expose tools to AI agents.Start here:

React developer

You build React apps and want hook-based registration with automatic cleanup.Start here:

AI agent builder

You build AI agents or MCP clients and want to call tools from websites.Start here:

​
Pick a page by goal

Build your first tool

Start with strict WebMCP tool registration in the browser.

Build your first React tool

Register tools from React components with lifecycle-aware hooks.

Preview native WebMCP

Test the browser proposal draft in Chrome and inspect tools with Chrome tooling.

Choose a runtime

Decide between native support, the strict polyfill, and the full MCP-B runtime.

Add tools to an existing app

Expose existing application behavior without rebuilding your app around WebMCP.

Connect desktop agents

Bridge browser tools to desktop clients such as Claude Desktop or Cursor.

Understand WebMCP

Read the high-level explanation of the proposal and where it fits in the browser.

Browse packages

Start with package overviews and package references before diving into the standard-only reference pages.

​
Choose a package layer

Pick the smallest layer that fits the job. For more background on the boundary, read Native vs Polyfill vs Global and Strict Core vs MCP-B Extensions.
1

Types only: @mcp-b/webmcp-types

Use zero-runtime TypeScript types for navigator.modelContext. Install this as a dev dependency when you only need compile-time safety.
npm install --save-dev @mcp-b/webmcp-types
Reference
2

Strict core polyfill: @mcp-b/webmcp-polyfill

Install the WebMCP surface on navigator.modelContext without MCP-B extensions. Use this when you want the browser proposal draft in browsers today.
npm install @mcp-b/webmcp-polyfill
Reference
3

Full runtime: @mcp-b/global

Add the MCP-B runtime layer on top of the core. Use this when you need transport, listTools(), callTool(), prompts, resources, or browser-to-desktop connectivity.
npm install @mcp-b/global
Reference | Choose a runtime
4

React hooks: @mcp-b/react-webmcp or usewebmcp

@mcp-b/react-webmcp provides hooks for the full MCP-B runtime, including provider and client patterns, Zod schema support, and execution state tracking.usewebmcp provides a single hook for strict core navigator.modelContext tool registration.
# Full MCP-B hooks
npm install @mcp-b/react-webmcp

# Strict core hooks
npm install usewebmcp
react-webmcp reference | usewebmcp reference | Framework guide
Not sure which package to pick? Read Choose a runtime for the detailed comparison.

​
Use the main docs tabs

This documentation uses package-first navigation for product docs and the Diataxis framework for content types. Use each tab for a different kind of question:

Packages

Start here when you know which package you are evaluating and need its overview or API surface.

Tutorials

Use step-by-step learning exercises when you are new and want guided practice.

How-To Guides

Use goal-oriented directions when you know the basics and need to finish a task.

Packages

Browse package overviews and API reference for every published package.

Explanation

Use explanation pages when you want background, design context, or tradeoffs.