WebMCP

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

WebMCP 允许网站与 LLMs（大型语言模型）共享工具、资源、提示等。换句话说，WebMCP 使网站能够成为一个 MCP 服务器。无需共享 API 密钥。您可以使用任何您想要的模型。

这是一个我构建的简单网站，它支持 WebMCP

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

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

最终用户可以同时连接到任意数量的网站 - 并且工具是“按域划分”的（通过名称），以简化组织。

超快速演示 (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 客户端，请提交一个问题。

使用 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 客户端与网站之间的桥梁是一个仅限本地主机（不允许来自您计算机外部的请求）的 websocket 服务器。因为它被配置为允许来自您的本地 Web 浏览器的请求，所以需要进行身份验证/令牌交换，以防您访问试图滥用此功能的网站。

理想情况下，Web 浏览器本身应对此有一个明确的权限，比如使用网络摄像头或麦克风那样。

1. MCP 客户端使用从 .env 文件中获取的服务器令牌连接到 /mcp 路径（自动生成）
2. 服务器生成一个注册令牌（通过内置的 mcp 工具由模型发起或通过 --new 命令）
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 作为演示用途。

如果在 mcp 客户端配置中同时提供了 --docker 和 --mcp，它将假设服务器正在运行。这将允许您将主进程（websocket 服务器）容器化，并且您的 mcp 客户端将通过 websocket 连接到您的 docker 容器。同样地，网站也将与您的 docker 容器通信。