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
Chưa có danh sách công cụ. Máy chủ từ xa sẽ có danh sách sau lần kiểm tra tình trạng đầu tiên.
Câu hỏi thường gặp
Câu hỏi
Làm thế nào để cài đặt @mcp B/react Webmcp?
Sao chép cấu hình stdio cho Cursor, Claude Desktop, Claude Code hoặc VS Code trên trang này. Cấu hình dùng bản cài đặt của nhà phát hành, không phải proxy của PlugMCP.
@mcp B/react Webmcp có cần khóa API không?
Bản ghi này không liệt kê biến môi trường bắt buộc nào.
@mcp B/react Webmcp dùng giao thức truyền tải nào?
@mcp B/react Webmcp chạy cục bộ qua stdio.
@mcp B/react Webmcp được kiểm tra lần cuối khi nào?
Kiểm tra lần cuối: 2026-11-14. React hooks for Model Context Protocol (MCP) - expose React components as AI tools for Claude, ChatGPT, Cursor, and Copilot