local-only server
The server can only run on the client’s local machine because it depends on local resources.
Integrations
Enables websites to expose JavaScript-based tools to the MCP client, with a tool that helps define schemas for MCP tools and can generate JavaScript code for WebMCP
WebMCP
支持客户端法学硕士 (LLM) 的网站提案和代码
WebMCP 允许网站向 LLM 共享工具、资源、提示等。换句话说,WebMCP 允许网站成为 MCP 服务器。无需共享 API 密钥。您可以使用任何您想要的模式。
它以小部件的形式出现,网站所有者可以将其放置在他们的网站上,并提供工具来为客户端 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 --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 或直接):
WebMCP 小部件将自动初始化并显示在页面右下角。点击它会要求终端用户输入一个 webmcp 令牌,该令牌由终端用户生成。
完整演示(3分钟)
https://github.com/user-attachments/assets/43ad160a-846d-48ad-9af9-f6d537e78473
关于其工作原理的更多信息
MCP 客户端与网站之间的桥梁是一个仅本地主机(无法被您计算机外部的请求访问)的 WebSocket 服务器。由于该服务器配置为允许来自您本地 Web 浏览器的请求,因此需要进行身份验证/令牌交换,以防您访问试图滥用此功能的网站。
理想情况下,网络浏览器本身应该具有明确的权限,例如网络摄像头或麦克风的使用。
- MCP 客户端使用
.env
中的服务器令牌(自动生成)连接到/mcp
路径 - 服务器生成注册令牌(通过模型内置的 mcp 工具或
--new
命令发起) - Web 客户端使用此令牌及其域连接到
/register
端点。 - 网页根据其域名连接到其指定的频道。
- 当法学硕士 (LLM) 想要使用工具/资源/提示时,请求来自:
- MCP 客户端 → MCP 服务器 → WebSocket 服务器 → 带有工具/资源/提示的网页
- (类似于请求工具/资源/提示列表)
- 网页执行请求(例如调用工具)并通过相同路径将结果发回
- 可以同时连接多个网页,每个网页都有自己的一套工具和令牌
- MCP 客户端将所有工具视为一个统一列表,并使用频道前缀来避免名称冲突
安全
这是一个非常早期的项目。我非常希望加强安全性,以防止恶意扩展程序等执行即时注入攻击或类似攻击。如果您有任何建设性的想法,请与我们联系或提交问题。
内置工具
- 令牌生成器(用于连接 WebMCP 网站)
- MCP 工具定义器(简化构建用于 MCP 的工具模式)
- 您可以在后续消息中请求获取用于 WebMCP 的 JavaScript(如果相关)
Docker
有一个专门用于 Smithery 部署的Dockerfile
。
如果您想使用 docker 来运行 websocket 服务器,我添加了docker-compose.yml
用于演示目的。
如果在 mcp 客户端配置中同时指定了--docker
和--mcp
选项,它将假定服务器正在运行。这将允许您将主进程(websocket 服务器)docker 化,并且您的 mcp 客户端将通过 websocket 连接到您的 docker 容器。同样,网站也将与您的 docker 容器进行通信。
This server cannot be installed
该框架使网站能够与客户端 LLM 共享工具、资源和提示,而无需 API 密钥,从而允许用户使用他们喜欢的模型与 Web 服务进行交互。
- Super Quick Demo (20 seconds, Sound on 🔊)
- Getting started (using your LLM with websites using WebMCP)
- Getting started (adding WebMCP to your website)
- More Info About How It Works
- Security
- Built in tools
- Docker