WebMCP代理
通过以下方式宣传您现有的MCP服务器工具 WebMCP 在您的网站上，以便任何浏览代理都可以使用它们。
WebMCP代理连接到远程MCP服务器，发现其工具，并将其注册到浏览器的 navigator.modelContext API当浏览代理调用工具时，调用会被代理到您的MCP服务器，结果会被转发回来。
安装
npm install webmcp-proxy用法
香草JS
import { createWebMcpProxy } from "webmcp-proxy";
const proxy = await createWebMcpProxy({
url: "https://mcp.example.com/mcp",
});
console.log("Registered tools:", proxy.tools);
// Later, to clean up:
await proxy.disconnect();反应
import { WebMCPProxy } from "webmcp-proxy/react";
export default function App() {
return (
<>
{/* Your app content */}
);
}Vue
import { WebMCPProxy } from "webmcp-proxy/vue";
选项
所有变体都接受相同的核心选项：
| 选项 | 类型 | 必填 | 描述 |
|---|---|---|---|
url | string | 是 | 远程MCP服务器的URL |
headers | Record | 否 | 每次请求都会发送额外的标头（例如。 Authorization) |
运作原理
sequenceDiagram
participant Page as Your Page
participant Proxy as webmcp-proxy
participant MCP as Remote MCP Server
participant Agent as Browsing Agent
Page->>Proxy: createWebMcpProxy({ url })
rect rgb(240, 240, 240)
note right of Proxy: Streamable HTTP, fallback to SSE
Proxy->>MCP: initialize
MCP-->>Proxy: capabilities
Proxy->>MCP: tools/list
MCP-->>Proxy: available tools
end
loop For each tool
Proxy->>Page: navigator.modelContext.registerTool()
end
Agent->>Page: Discovers tools via WebMCP
Agent->>Page: Calls a tool
Page->>Proxy: execute(args)
Proxy->>MCP: tools/call
MCP-->>Proxy: result
Proxy-->>Page: result
Page-->>Agent: result与页面特定工具共存
WebMCP代理使用 registerTool 而不是 provideContext 管理工具。这意味着 不会 覆盖页面自己注册的其他工具——只要这些工具也使用 registerTool。代理工具和页面本地工具安全地并存。
刀具注销通过以下方式处理 AbortSignal （从Chrome 148开始推荐的方法）。为了与旧浏览器向后兼容， unregisterTool() 在可用时也会被调用。
演示
现场演示在 Webmcp.netlify.app.
这 demo/ 该文件夹包含一个独立的React+Vite应用程序，允许您输入MCP服务器URL，连接到它，并查看它公开的工具——所有这些都是通过浏览器中的WebMCP注册的。
要在本地运行演示：
pnpm run demo这将使用内置的CORS代理启动Vite-dev服务器，这样您就可以连接到任何MCP服务器，而不会出现跨源问题。
需求
- 远程MCP服务器必须支持 可流式传输的HTTP 或 上海证券交易所 运输
- MCP服务器必须允许来自浏览器源的CORS请求
- 浏览器必须支持 WebMCP API (
navigator.modelContext)--如果不可用，代理会记录一条警告并变为禁止操作
许可证
ISC