AI导哈

客户端LLM支持工具

WebMCP是一个允许网站在客户端支持大型语言模型（LLM）的工具，通过共享工具、资源和提示等，无需共享API密钥。

  • by jasonjmcghee
  • JavaScript
  • 本地部署
  • 918 星标
  • 更新于
在 GitHub 查看 jasonjmcghee/WebMCP

使用说明

为澄清而添加：2026年2月12日

你可能想要官方的W3C repo+规范：https://github.com/webmachinelearning/webmcp

这是早期的WebMCP提案/实现。我只是一个有梦想的人。

WebMCP的想法已经发展，并且正在由开发网络的更有能力的人进行研究。

此实现是 不 符合W3C规范。

尽管如此，请随时尝试，因为它展示了WebMCP的价值。

WebMCP

支持客户端LLM的网站提案和代码

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

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

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

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

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

超快速演示（20秒，打开声音🔊)

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

入门（在使用WebMCP的网站上使用LLM）

安装

只需指定您的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浏览器的请求，所以需要进行身份验证/令牌交换，以防您访问试图滥用此功能的网站。

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

  1. MCP客户端连接到 /mcp 使用来自的服务器令牌的路径 .env （自动生成）
  2. 服务器生成一个注册令牌（由模型或 --new 命令）
  3. Web客户端连接到 /register 带有此令牌及其域的端点。
  4. 网页根据其域连接到其分配的频道。
  5. 当LLM想要使用工具/资源/提示符时，请求来自：
    • MCP客户端→ MCP服务器→ WebSocket 服务器→ 带有工具/资源/提示的网页
    • （类似于请求工具/资源/提示列表）
  6. 网页执行请求（例如调用工具），并通过相同的路径发回结果
  7. 多个网页可以同时连接，每个网页都有自己的工具和令牌集
  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一起使用

码头工人

有一个 Dockerfile 特别是Smithery部署。

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

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

相关 MCP