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
अभी टूल सूची नहीं है। रिमोट सर्वर को पहले हेल्थ चेक के बाद सूची मिलती है।
FAQ
सवाल
@mcp B/react Webmcp कैसे इंस्टॉल करें?
इस पेज पर Cursor, Claude Desktop, Claude Code या VS Code के लिए stdio कॉन्फ़िग कॉपी करें। यह पब्लिशर का इंस्टॉल इस्तेमाल करता है, PlugMCP प्रॉक्सी नहीं।
क्या @mcp B/react Webmcp के लिए API key चाहिए?
इस रिकॉर्ड में कोई ज़रूरी एनवायरनमेंट वेरिएबल दर्ज नहीं है।
@mcp B/react Webmcp कौन सा ट्रांसपोर्ट इस्तेमाल करता है?
@mcp B/react Webmcp stdio पर लोकल चलता है।
@mcp B/react Webmcp की पिछली जाँच कब हुई थी?
पिछली जाँच 2026-11-14 को हुई। React hooks for Model Context Protocol (MCP) - expose React components as AI tools for Claude, ChatGPT, Cursor, and Copilot