JinDaGe - webmcp MCP Details

article

README

🚀 WebMCP - 网站客户端大型语言模型支持工具

WebMCP 是一款创新工具，它能让网站支持客户端侧的大型语言模型（LLMs）。借助 npm 包，它极大简化了前端集成与管理 LLMs 的流程。尽管项目尚处早期，但已展现出强大功能与潜力。

🚀 快速开始

📦 安装指南

安装 WebMCP 只需一行命令：

npm install webmcp

🔧 初始化配置

初始化 MCP 服务器并运行以下命令：

npx webmcp --init

若需要 Docker 支持，请添加 --docker 参数。

💻 使用示例

🌐 网站集成指南

引入 WebMCP 脚本

在您的网站中引入 WebMCP 脚本以支持 MCP 功能：

// index.html
<script src="https://cdn.jsdelivr.net/npm/webmcp/dist/webmcp.min.js"></script>

自动显示小部件

WebMCP 提供了一个易于使用的控制台小部件，方便用户与 MCP 交互。

🔧 技术细节

🌟 核心流程

初始化连接：MCP 客户端使用内部令牌连接到 MCP 服务器。
获取注册令牌：用户请求并获得用于网站注册的令牌。
网站注册：用户在网站中输入令牌，完成与 WebSocket 服务器的连接和会话令牌分配。
工具交互：MCP 客户端通过服务器与网站进行通信，执行工具请求并返回结果。

🖥️ 网络架构

sequenceDiagram
    参与者 用户
    参与者 MCP（MCP 客户端）
    参与者 服务器（MCP 服务器）
    参与者 WS（WebSocket 服务器）
    参与者 Web（网站）

    %% 初始连接
    MCP->>Server: 连接到 /mcp 使用内部令牌

    %% 网站注册令牌
    User->>MCP: 请求注册令牌
    MCP->>Server: 请求注册令牌
    Server-->>MCP: 返回注册令牌
    MCP-->>User: 显示注册令牌

    %% 网站注册
    User->>Web: 输入注册令牌
    Web->>WS: 连接到 /register 使用令牌和域名（令牌被删除）
    WS-->>Web: 分配通道和会话令牌
    Web->>WS: 连接到指定通道

    %% 工具交互
    MCP->>Server: 请求工具列表
    Server->>WS: 转发请求
    WS->>Web: 请求工具列表
    Web-->>WS: 返回工具列表
    WS-->>Server: 转发工具列表
    Server-->>MCP: 返回工具列表

    %% 工具执行
    MCP->>Server: 工具请求
    Server->>WS: 转发请求
    WS->>Web: 执行工具操作
    Web-->>WS: 返回结果
    WS-->>Server: 转发结果
    Server-->>MCP: 返回结果

    %% 断开连接
    User->>Web: 请求断开连接
    Web->>WS: 关闭连接

⚠️ 重要提示

本项目仍处于早期阶段，我们非常重视安全性。为了防止恶意扩展和提示注入攻击，请积极提供安全改进建议。

✨ 主要特性

🛠️ 内置工具

令牌生成器：用于网站的注册流程。
MCP 工具定义器：简化工具 schema 的构建过程。

如果您需要特定工具的 JavaScript 代码，可以进一步询问。

🐳 Docker 支持

项目中提供了专门针对 Smithery 部署设计的 Dockerfile。如需使用 Docker 运行 WebSocket 服务器，请参考提供的 docker-compose.yml 示例文件。

当 MCP 客户端配置包含 --docker 参数且与 --mcp 结合时，客户端将假设 WebSocket 服务器正在 Docker 容器中运行，并通过容器连接进行通信。

webmcp