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/webm- cp@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服务器。因为它被配置为允许来自本地网络浏览器的请求，所以需要身份验证/令牌交换，以防您访问试图滥用此功能的网站。

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

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

sequenceDiagram
    participant 用户
    participant MCP as MCP客户端
    participant 服务器 as MCP服务器
    participant WS as WebSocket服务器
    participant 网站 as 网站
    
    %% 初始连接
    MCP->>服务器: 使用内部服务器令牌连接到/mcp
    
    %% 网站注册令牌
    用户->>MCP: 请求注册令牌
    MCP->>服务器: 请求注册令牌
    服务器-->>MCP: 返回注册令牌
    MCP-->>用户: 显示注册令牌
    
    %% 网站注册
    用户->>网站: 粘贴注册令牌
    网站->>WS: 使用令牌和域名连接到/register（注册令牌删除）
    WS-->>网站: 分配频道和会话令牌
    网站->>WS: 连接到分配的频道
    
    %% 工具交互
    MCP->>服务器: 请求工具列表
    服务器->>WS: 转发请求
    WS->>网站: 请求工具
    网站-->>WS: 返回工具列表
    WS-->>服务器: 转发工具列表
    服务器-->>MCP: 返回工具列表
    
    %% 工具执行
    MCP->>服务器: 工具请求
    服务器->>WS: 转发请求
    WS->>网站: 执行工具
    网站-->>WS: 返回结果
    WS-->>服务器: 转发结果
    服务器-->>MCP: 返回结果
    
    %% 断开连接
    用户->>网站: 断开连接
    网站->>WS: 关闭连接

安全性

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

内置工具

• 令牌生成器（用于连接到WebMCP网站）
• MCP工具定义器（简化构建用于MCP的工具模式）
  • 您可以在后续消息中请求JavaScript（如适用）以供WebMCP使用

Docker

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

如果您想使用Docker运行WebSocket服务器，我已经添加了一个docker-compose.yml作为示例。

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