Webmcp

🚀 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 交互。

🔧 技術細節

🌟 核心流程

1. 初始化連接：MCP 客戶端使用內部令牌連接到 MCP 服務器。
2. 獲取註冊令牌：用戶請求並獲得用於網站註冊的令牌。
3. 網站註冊：用戶在網站中輸入令牌，完成與 WebSocket 服務器的連接和會話令牌分配。
4. 工具交互：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 容器中運行，並通過容器連接進行通信。