document.modelContext
├── .registerTool(tool, { signal }) Register a tool for AI agents
├── .getTools() Discover registered tools
└── .executeTool(tool, inputObject) Execute a discovered tool
MCP-b polyfills that API in browsers without native support (Chrome and Firefox 126+, Safari 18+), and bridges it to the full Model Context Protocol — turning that tool source into a complete MCP server with prompts, resources, and browser transports.
Built by MCP-b. Not an official W3C or MCP project.
Use upstream webmcp-types for core browser
contracts and input schema inference. MCP-B adapter extensions and schema helpers live in
@mcp-b/webmcp-ts-sdk.
if (!document.modelContext) throw new Error('WebMCP is unavailable');
await document.modelContext.registerTool({
name: 'add_todo',
description: 'Add a new todo item',
inputSchema: {
type: 'object',
properties: { title: { type: 'string' }, done: { type: 'boolean' } },
required: ['title'],
} as const, // ← args inferred: { title: string; done?: boolean }
execute: async (args) => ({ id: Date.now(), title: args.title }),
});
2. Polyfill it
Want it to work without the Chrome flag, including in Firefox and Safari? Add the polyfill — same API, same code:
import { installWebMCP } from '@mcp-b/webmcp-polyfill'; // pnpm add @mcp-b/webmcp-polyfill
installWebMCP(); // keeps native support when present
if (!document.modelContext) throw new Error('WebMCP is unavailable');
await document.modelContext.registerTool({
name: 'get_page_title',
description: 'Returns the current page title',
inputSchema: { type: 'object', properties: {} },
execute: async () => ({
content: [{ type: 'text', text: document.title }],
}),
});
Or with React: pnpm add usewebmcp
'use client';
import { useWebMCP } from 'usewebmcp';
function PageTitle() {
useWebMCP({
name: 'get_page_title',
description: 'Returns the current page title',
execute: async () => ({ title: document.title }),
});
// ...
}
3. Full MCP server
Need the full Model Context Protocol — prompts, resources, transports, and interop with Claude Desktop, Cursor, or another MCP client? Use @mcp-b/global:
import '@mcp-b/global'; // pnpm add @mcp-b/global
if (!document.modelContext) throw new Error('WebMCP is unavailable');
// Same registerTool API — now backed by a full MCP server
await document.modelContext.registerTool({
name: 'add_todo',
description: 'Add a new todo item',
inputSchema: {
type: 'object',
properties: {
title: { type: 'string', description: 'Todo title' },
},
required: ['title'],
},
execute: async (args) => {
const todo = { id: Date.now(), ...args };
return { content: [{ type: 'text', text: JSON.stringify(todo) }] };
},
});
Or as a script tag (zero build step):
<script src="https://unpkg.com/@mcp-b/global@6/dist/index.iife.js"></script>
<script type="module">
if (!document.modelContext) throw new Error('WebMCP is unavailable');
await document.modelContext.registerTool({
/* ... */
});
</script>
Or with React: pnpm add @mcp-b/global @mcp-b/react-webmcp
Noch keine Tool-Liste. Remote-Server erhalten eine nach dem ersten Health-Check.
FAQ
Fragen
Wie installiere ich @mcp B/react Webmcp?
Kopieren Sie auf dieser Seite die stdio-Konfiguration für Cursor, Claude Desktop, Claude Code oder VS Code. Sie nutzt die Installation des Herausgebers, keinen PlugMCP-Proxy.
Benötigt @mcp B/react Webmcp einen API-Schlüssel?
In diesem Eintrag ist keine erforderliche Umgebungsvariable aufgeführt.
Welchen Transport verwendet @mcp B/react Webmcp?
@mcp B/react Webmcp läuft lokal über stdio.
Wann wurde @mcp B/react Webmcp zuletzt geprüft?
Zuletzt geprüft: 2026-11-14. React hooks for Model Context Protocol (MCP) - expose React components as AI tools for Claude, ChatGPT, Cursor, and Copilot