WebMCP

一个支持网站使用客户端 LLM 的提案和代码

WebMCP 允许网站共享工具、资源、提示等给 LLM。换句话说，WebMCP 允许网站成为一个 MCP 服务器。无需共享 API 密钥。可以使用任何你想要的模型。

这是一个我构建的启用了 WebMCP 的简单网站

它以小部件的形式出现，网站所有者可以将其放置在他们的网站上，并公开工具，以便为客户端 LLM 提供用户或代理所需的出色用户体验。

外观、感觉、使用方式和安全性都完全开放，欢迎贡献/建设性批评。MCP 客户端直接构建 WebMCP 功能似乎是一个理想的结果。

最终用户可以一次连接到任意数量的网站 - 并且工具根据域名进行“作用域”（按名称），以简化组织。

超快速演示（20 秒，开启声音 🔊）

https://github.com/user-attachments/assets/61229470-1242-401e-a7d9-c0d762d7b519

开始使用（将你的 LLM 与使用 WebMCP 的网站一起使用）

安装

只需指定你的 MCP 客户端（claude、cursor、cline、windsurf 或 json 路径）

npx -y @jason.today/webmcp@latest --config claude

如果你有兴趣手动设置，请使用命令 npx -y @jason.today/webmcp@latest --mcp。

自动安装的灵感来自 Smithery，但他们的代码是 AGPL，所以我自己编写了这个。如果它不适合你，或者你没有看到你的 mcp 客户端，请提交一个 issue。

使用 WebMCP

当你准备好连接到网站时，你可以要求你的模型为你生成一个 mcp 令牌。

复制令牌并将其粘贴到网站的输入框中。一旦网站注册成功，它就会被丢弃，不能用于后续注册或任何其他用途。网站将收到自己的会话令牌以进行请求。

如果你希望你的模型/服务永远看不到令牌，你可以手动执行 npx @jason.today/webmcp --new 代替。

一些 MCP 客户端，包括 Claude Desktop，需要重新启动才能访问新工具。（至少在撰写本文时是这样）

要断开连接，你可以关闭浏览器选项卡，单击“断开连接”，或使用 npx @jason.today/webmcp -q 关闭服务器。

所有配置文件都存储在 ~/.webmcp 目录中。

开始使用（将 WebMCP 添加到你的网站）

要使用 WebMCP，只需在你的页面上包含 webmcp.js（通过 src 或直接）：

<script src="webmcp.js"></script>

WebMCP 小部件将自动初始化并显示在页面右下角。单击它将要求最终用户生成一个 webmcp 令牌。

完整演示（3 分钟）

https://github.com/user-attachments/assets/43ad160a-846d-48ad-9af9-f6d537e78473

更多关于其工作原理的信息

MCP 客户端和网站之间的桥梁是一个仅限 localhost 的（无法从你的计算机外部访问请求）websocket 服务器。因为它被配置为允许来自你的本地 Web 浏览器的请求，因此需要进行身份验证/令牌交换，以防你访问试图滥用此功能的网站。

理想情况下，Web 浏览器本身应该对此具有明确的权限，例如摄像头或麦克风的使用。

1. MCP 客户端使用来自 .env（自动生成）的服务器令牌连接到 /mcp 路径。
2. 服务器生成一个注册令牌（通过模型或 --new 命令通过内置的 mcp 工具启动）。
3. Web 客户端使用此令牌及其域名连接到 /register 端点。
4. Web 页面根据其域名连接到其分配的通道。
5. 当 LLM 想要使用工具/资源/提示时，请求从以下位置流动：
   • MCP 客户端 → MCP 服务器 → WebSocket 服务器 → 具有工具/资源/提示的 Web 页面
   • （类似于请求工具/资源/提示列表）
6. Web 页面执行请求（例如，调用工具）并通过相同的路径将结果发送回去
7. 可以同时连接多个 Web 页面，每个页面都有自己的一组工具和令牌
8. MCP 客户端将所有工具视为一个统一的列表，带有通道前缀以避免名称冲突

sequenceDiagram
    participant User
    participant MCP as MCP Client
    participant Server as MCP Server
    participant WS as WebSocket Server
    participant Web as Website
    
    %% Initial connection
    MCP->>Server: Connect to /mcp with internal server token
    
    %% Website registration token
    User->>MCP: Request registration token
    MCP->>Server: Request registration token
    Server-->>MCP: Return registration token
    MCP-->>User: Display registration token
    
    %% Website registration
    User->>Web: Paste registration token
    Web->>WS: Connect to /register with token & domain (registration token deleted)
    WS-->>Web: Assign channel & session token
    Web->>WS: Connect to assigned channel
    
    %% Tool interaction
    MCP->>Server: Request tools list
    Server->>WS: Forward request
    WS->>Web: Request tools
    Web-->>WS: Return tools list
    WS-->>Server: Forward tools list
    Server-->>MCP: Return tools list
    
    %% Tool execution
    MCP->>Server: Tool request
    Server->>WS: Forward request
    WS->>Web: Execute tool
    Web-->>WS: Return result
    WS-->>Server: Forward result
    Server-->>MCP: Return result
    
    %% Disconnection
    User->>Web: Disconnect
    Web->>WS: Close connection

安全

这是一个非常早期的项目。我非常有兴趣加强安全性，以防止恶意扩展等执行提示注入攻击和类似攻击。如果你有建设性的想法，请联系或提出问题。

内置工具

• 令牌生成器（用于连接到 WebMCP 网站）
• MCP 工具定义器（简化构建用于 MCP 的工具的模式）
  • 你可以在后续消息中请求 javascript（如果相关），以便与 WebMCP 一起使用

Docker

有一个专门用于 Smithery 部署的 Dockerfile。

如果你想使用 docker 运行 websocket 服务器，我添加了一个 docker-compose.yml 用于演示目的。

如果 --docker 与 --mcp 一起提供给 mcp 客户端配置，它将假定服务器正在运行。这将允许你 docker 化主进程（websocket 服务器），并且你的 mcp 客户端将通过 websocket 连接到你的 docker 容器。同样，网站将与你的 docker 容器通信。