AI导哈

MCP服务器浏览器桥接工具

连接MCP服务器到Chrome的WebMCP API，使浏览器能够访问和使用MCP服务器工具。

  • by hemanth
  • JavaScript
  • 本地部署
  • 12 星标
  • 更新于
在 GitHub 查看 hemanth/webmcp-bridge

使用说明

mcp网络桥

将任何MCP服务器连接到Chrome的WebMCP API。

您有MCP服务器。你希望它们在浏览器中。此模块连接到远程MCP服务器，发现其工具，并将其注册到 navigator.modelContext.

npm install mcp-web-bridge

用法

import { WebMCPBridge } from 'mcp-web-bridge';

const bridge = new WebMCPBridge('https://mcp.example.com');
await bridge.connect();
bridge.register();

就是这样。Chrome的AI代理现在可以使用工具了。

随着上下文的丰富

const bridge = new WebMCPBridge('https://mcp.example.com', {
  enrichContext: (toolName, args) => ({
    ...args,
    user_locale: navigator.language,
    user_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
  }),
  onResponse: (toolName, result) => {
    console.log(`[${toolName}]`, result);
    return result;
  },
});

await bridge.connect();
bridge.register();

使用auth

const bridge = new WebMCPBridge('https://mcp.example.com');
bridge.setAuth({ type: 'bearer', token: 'sk-...' });
await bridge.connect();

支持 bearer, apikey，以及 basic auth。带有PKCE的OAuth由 MCPAuth 类。

自定义头

const bridge = new WebMCPBridge('https://mcp.example.com', {
  headers: {
    'X-Custom-Header': 'value',
    'Authorization': 'Bearer sk-...',
  },
});

自定义标头将合并到每个请求中。来自的身份验证标头 setAuth() 首先应用，然后覆盖您的自定义标头。

添加页面本地工具

bridge.register([
  {
    name: 'get_selection',
    description: 'Get the currently selected text on the page',
    inputSchema: { type: 'object', properties: {} },
    execute: async () => ({
      content: [{ type: 'text', text: window.getSelection().toString() }],
    }),
  },
]);

将远程MCP工具与本地浏览器功能相结合。

API

new WebMCPBridge(serverUrl, options?)

选项 类型 描述
headers object 自定义标头合并到每个请求中
enrichContext (name, args) => args 在代理之前丰富工具参数
onToolCall (name, args) => void 在每次工具调用之前调用
onResponse (name, result) => result 转换响应
onError (name, error) => void 错误处理程序
logger object 自定义记录器（默认值： console)

方法

方法 返回 描述
connect() { tools, prompts, resources } 初始化+发现
register(extraTools?) tool[] 注册WebMCP
callTool(name, args) result 调用工具
getPrompt(name, args) result 获得提示
readResource(uri) result 阅读资源
setAuth({ type, token }) -- 连接前设置身份验证
disconnect() -- 清除上下文+注销

浏览器要求

  • Chrome 146+ chrome://flags/#enable-webmcp-testing
  • 没有WebMCP， connect() 和 callTool() 仍然工作——你就是做不到 register()

许可证

麻省理工学院

相关 MCP