Webmcp

WebMCPは、ウェブサイトがクライアントLLMとのやり取りをサポートするプロジェクトで、ローカルWebSocketサーバーを通じて安全な通信を実現します。

人工知能チャットボット開発者ツール #LLMインタラクション #ローカルセキュリティ #ウェブサイトツール .JavaScript

スコア : 2.5ポイント

ダウンロード数 : 6.4K

更新時間 : 2025-04-28

サイトを開く

WebMCPとは？

WebMCP（Web Model Context Protocol）は、ウェブサイトがMCPサーバーになり、クライアントLLM（大規模言語モデル）がそのツールとリソースにアクセスできるようにするオープンソースプロジェクトです。ローカルWebSocket接続を通じて安全な通信を実現し、ユーザーのプライバシーを保護します。

WebMCPの使い方は？

ウェブサイトに1行のスクリプトを追加するだけで、WebMCP機能を有効にできます。ユーザーは生成されたトークンを使ってウェブサイトに接続し、提供されているツールとサービスを利用できます。

適用シナリオ

WebMCPは、ユーザー体験を向上させたいウェブサイト開発者、特にAIアシスタントやスマートツールを統合する必要があるプラットフォームに適しています。

主な機能

複数サイトサポート

複数のウェブサイトが同時に接続でき、各サイトには独立したツールとリソースがあります。

APIキー不要

ローカル通信によりAPIキーの直接公開を避け、セキュリティを確保します。

柔軟な拡張性

開発者は新しいツールとサービスを簡単に定義でき、さまざまなニーズに対応できます。

利点

APIキーが不要で、ユーザーのプライバシーを保護する

ローカル通信の方がセキュリティが高い

既存のウェブサイトに簡単に統合できる

複数のMCPクライアントをサポートする

制限

現在のバージョンはまだ開発段階で、バグが存在する可能性がある

ユーザーがクライアントツールを手動でインストールし、設定する必要がある

WebMCPの使い方

WebMCPクライアントをインストールする

以下のコマンドを実行してWebMCPクライアントをインストールし、設定を選択します。 ```bash npx -y @jason.today/webmcp@latest --config claude ```

登録トークンを生成する

クライアントで一意の登録トークンを生成し、対象のウェブサイトに提供します。

ウェブサイトでWebMCPを有効にする

ウェブページに以下のスクリプトを追加します。 ```html <script src="webmcp.js"></script> ```

使用例

ケース1：カスタマーサポートチャットボット

ECサイトにカスタマーサポートチャットボットを統合し、ユーザーは直接AIアシスタントとやり取りできます。

ケース2：コードアシスタント

開発者にリアルタイムのコード補完とデバッグのアドバイスを提供します。

よくある質問

WebMCPは無料で使えますか？

接続を切断するにはどうすればいいですか？

WebMCPはカスタムツールをサポートしていますか？

🚀 WebMCP プロジェクト紹介

WebMCP は、大規模言語モデル (LLM) とウェブサイトを接続することを目的としたオープンソースプロジェクトです。このプロジェクトを通じて、ウェブサイトは自身の機能をツールとして登録し、WebSocket プロトコルを介して MCP クライアントとやり取りすることができます。MCP クライアントはこれらのツールを統一的に管理および呼び出し、ユーザーはターミナルや他のインターフェースを通じてこれらのツールを利用できます。

🚀 クイックスタート

📦 インストール（ユーザー向け）

# webmcp ツールのインストール
npm install -g @webmcp/cli

# MCP サーバーの起動
webmcp server

# または Docker でのデプロイを指定
webmcp server --docker

🔗 サンプルリンク

🔌 ウェブサイト所有者向けの統合方法

ウェブサイトを WebMCP エコシステムに統合するには、2 つの手順があります。

コンソールで以下のコマンドを入力して登録トークンを取得します。
```
webmcp token
```
生成されたトークンをウェブサイトに貼り付け、ドキュメントの指示に従って設定を完了します。

🔧 技術詳細

🧩 コアコンポーネント

MCP クライアント：WebSocket サーバーに接続し、ツールを管理します。
WebSocket サーバー：MCP クライアントとウェブサイトの間の通信の橋渡しをします。
ウェブサイト：具体的なツール機能を提供し、WebSocket プロトコルを介してサーバーとやり取りします。

⚙️ リクエストフロー

sequenceDiagram
    participant 用户
    participant MCP 作为 MCP 客户端
    participant Server 作为 MCP 服务器
    participant WS 作为 WebSocket 服务器
    participant Web 作为 网站
    
    %% 初始连接
    MCP->>Server: 连接到 /mcp 使用内部服务器令牌
    
    %% 网站注册令牌
    用户->>MCP: 请求注册令牌
    MCP->>Server: 请求注册令牌
    Server-->>MCP: 返回注册令牌
    MCP-->>用户: 显示注册令牌
    
    %% 网站注册
    用户->>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: 返回结果
    
    %% 断开连接
    用户->>Web: 断开连接
    Web->>WS: 关闭连接

⚠️ セキュリティに関する考慮事項

このプロジェクトは非常に初期の段階です。悪意のある拡張機能によるプロンプトインジェクション攻撃などを防ぐため、セキュリティの強化に非常に重きを置いています。もし建設的な意見があれば、問題を提出するか、議題を開いて連絡してください。

✨ 組み込みツール

トークン生成ツール：WebMCP ウェブサイトに接続するために使用します。
MCP ツール定義ツール：MCP で使用するツールスキーマの構築を簡素化します。
- 必要な場合は、WebMCP で使用する JavaScript のサンプルを提供できます。後続の情報でお知らせください。

🐳 Docker デプロイ

このプロジェクトには、Smithery デプロイ用の Dockerfile が用意されています。

Docker で WebSocket サーバーを実行する場合は、サンプルの docker-compose.yml ファイルが追加されています。

MCP クライアントを設定する際に --docker パラメーターを --mcp とともに提供すると、サーバーが動作していることを前提とします。これにより、メインプロセス（WebSocket サーバー）を Docker 化でき、MCP クライアントは WebSocket を介して Docker コンテナに接続します。同様に、ウェブサイトも Docker コンテナと通信します。