> ## Documentation Index > Fetch the complete documentation index at: https://docs.mcp-b.ai/llms.txt > Use this file to discover all available pages before exploring further. # WebMCP Documentation > Start with the WebMCP proposal draft for browser tools, then move to MCP-B when you need runtime extensions, tooling, and transport. export const LiveLandingTool = () => { const {useState, useEffect} = React; const [isRegistered, setIsRegistered] = useState(false); const [callCount, setCallCount] = useState(0); useEffect(() => { const TOOL_NAME = 'get_docs_info'; const register = () => { if (!document.modelContext) return; try { document.modelContext.unregisterTool(TOOL_NAME); } catch (e) {} document.modelContext.registerTool({ name: TOOL_NAME, description: 'Returns information about the current WebMCP documentation page: title, URL, headings, link count, and navigation structure.', inputSchema: { type: 'object', properties: { include_headings: { type: 'boolean', description: 'Include the list of section headings (default: true)' }, include_links: { type: 'boolean', description: 'Include outbound link URLs (default: false)' } } }, execute: args => { setCallCount(c => c + 1); const includeHeadings = args.include_headings !== false; const includeLinks = args.include_links === true; const info = { title: document.title, url: location.href, description: document.querySelector('meta[name="description"]')?.getAttribute('content') || null, headingCount: document.querySelectorAll('h1, h2, h3').length, linkCount: document.querySelectorAll('a[href]').length }; if (includeHeadings) { info.headings = Array.from(document.querySelectorAll('h1, h2, h3')).map(h => ({ level: Number.parseInt(h.tagName[1]), text: h.textContent.trim() })); } if (includeLinks) { const seen = new Set(); info.links = Array.from(document.querySelectorAll('a[href]')).map(a => a.href).filter(href => { if (seen.has(href)) return false; seen.add(href); return true; }).slice(0, 50); } return { content: [{ type: 'text', text: JSON.stringify(info, null, 2) }] }; } }); setIsRegistered(true); }; if (document.modelContext) { register(); } else { window.addEventListener('webmcp-loaded', register); } return () => { window.removeEventListener('webmcp-loaded', register); try { document.modelContext?.unregisterTool(TOOL_NAME); } catch (e) {} }; }, []); return {isRegistered ? `get_docs_info is live${callCount > 0 ? ` (${callCount} call${callCount === 1 ? '' : 's'})` : ''}` : 'Loading...'} ; };

Browser tools, protocol, and runtime

WebMCP + MCP = MCP-B

MCP-B combines the WebMCP page API with MCP-style transport and extensions in one browser runtime. Use WebMCP for page-level tool registration. Use MCP-B for resources, prompts, relay, React hooks, and browser tooling. You can start with WebMCP and add MCP-B later.

Read What is WebMCP?, WebMCP vs MCP, and Choose a runtime.

Live on this page

This page has a real WebMCP tool. Try calling it.

The tool below is registered right now using document.modelContext.registerTool(). Use the MCP-B extension or Chrome's native WebMCP support to call it from an AI agent.

Tool registration (live)

```javascript theme={null} document.modelContext.registerTool({ name: "get_docs_info", description: "Returns info about the current docs page", inputSchema: { type: "object", properties: { include_headings: { type: "boolean" }, include_links: { type: "boolean" }, }, }, execute: (args) => { const info = { title: document.title, url: location.href, headingCount: document.querySelectorAll("h1,h2,h3").length, linkCount: document.querySelectorAll("a[href]").length, }; return { content: [{ type: "text", text: JSON.stringify(info) }] }; } }); ```

Resource registration (MCP-B)

```typescript resource.ts theme={null} document.modelContext.registerResource({ uri: 'app://config', name: 'App Configuration', mimeType: 'application/json', read: async () => ({ contents: [{ uri: 'app://config', text: JSON.stringify(config) }] }) }); ```

Continue with the [first tool tutorial](/tutorials/first-tool), the [`@mcp-b/webmcp-polyfill` reference](/packages/webmcp-polyfill/reference), or the [`@mcp-b/webmcp-ts-sdk` reference](/packages/webmcp-ts-sdk/reference).

Packages

Browse the package set in one place.

These are the main packages in the workspace, grouped by the standard boundary.

Core WebMCP

Package Description
Polyfills document.modelContext for browsers without native support
TypeScript types for the WebMCP standard surface
React hook for tool registration with automatic lifecycle

MCP-B

Package Description
Entry point — sets up polyfill + MCP server in one import
BrowserMcpServer with prompts, resources, sampling, elicitation
PostMessage and WebSocket transports for cross-context communication
Bridges tools across iframes via PostMessage
React provider and hooks for MCP-B extensions

Calling tools

Package Description
Bridges browser tools to desktop MCP clients via WebSocket + stdio
Chrome extension tools for reading and interacting with pages
MCP server that connects to Chrome DevTools Protocol

Source of truth

This site documents MCP-B and keeps quick-look pages for the WebMCP proposal draft. For proposal details and browser behavior, use: W3C WebMCP spec, Chrome preview post, AI on Chrome, Model Context Protocol, and Model Context Tool Inspector.