WebMCP

ウェブMCP

クライアント側LLMをサポートするためのウェブサイトの提案とコード

WebMCPを使用すると、ウェブサイトはツール、リソース、プロンプトなどをLLMと共有できます。つまり、WebMCPはウェブサイトをMCPサーバーとして機能させることを意味します。APIキーの共有は不要です。お好きなモデルを自由にご利用いただけます。

これは私が構築したWebMCP対応のシンプルなウェブサイトです

これはウィジェットの形式で提供され、Web サイトの所有者はこれを自分のサイトに配置してツールを公開し、ユーザーやエージェントに優れた UX を提供するために必要なものをクライアント側の LLM に提供できます。

外観、操作性、使用方法、セキュリティなど、あらゆる面で貢献や建設的な批判を歓迎します。MCPクライアントがWebMCPの機能を直接構築することが理想的な成果と言えるでしょう。

エンドユーザーは一度に任意の数の Web サイトに接続でき、ツールはドメインに基づいて (名前によって)「スコープ」され、整理が簡素化されます。

超クイックデモ（20秒、サウンドオン🔊）

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

はじめに（WebMCP を使用した Web サイトで LLM を使用する）

インストール

MCP クライアント ( claude 、 cursor 、 cline 、 windsurf 、または json へのパス) を指定するだけです。

手動で設定する場合は、コマンドnpx -y @jason.today/webmcp@latest --mcpを使用します。

自動インストールはSmitheryにヒントを得たものですが、彼らのコードはAGPLなので、自分で書きました。もしうまく動作しない、またはmcpクライアントが表示されない場合は、問題を報告してください。

WebMCPの使用

ウェブサイトに接続する準備ができたら、モデルに mcp トークンを生成するように依頼できます。

トークンをコピーして、ウェブサイトの入力欄に貼り付けてください。ウェブサイトがトークンを使用して登録すると、トークンは破棄され、以降の登録やその他の用途には使用できません。ウェブサイトはリクエストを行うために独自のセッショントークンを受け取ります。

モデル/サービスにトークンが表示されないようにしたい場合は、代わりにnpx @jason.today/webmcp --new手動で実行できます。

Claude Desktop を含む一部の MCP クライアントでは、新しいツールにアクセスするために再起動する必要があります。(少なくとも執筆時点では)

切断するには、ブラウザタブを閉じるか、「切断」をクリックするか、 npx @jason.today/webmcp -qを使用してサーバーをシャットダウンします。

すべての設定ファイルは~/.webmcpディレクトリに保存されます。

はじめに（WebMCP を Web サイトに追加する）

WebMCP を使用するには、ページにwebmcp.jsを組み込むだけです (src 経由または直接)。

WebMCPウィジェットは自動的に初期化され、ページの右下に表示されます。ウィジェットをクリックすると、エンドユーザーが生成するWebMCPトークンの入力を求められます。

フルデモ（3分）

https://github.com/user-attachments/assets/43ad160a-846d-48ad-9af9-f6d537e78473

仕組みに関する詳細情報

MCPクライアントとウェブサイト間のブリッジは、ローカルホスト専用の（コンピュータ外部からのリクエストにはアクセスできない）WebSocketサーバーです。ローカルウェブブラウザからのリクエストを許可するように設定されているため、これを悪用しようとするウェブサイトにアクセスした場合に備えて、認証/トークンの交換が必要です。

理想的には、Web ブラウザ自体に、Web カメラやマイクの使用などに対する明示的な許可が与えられます。

1. MCPクライアントは、 .envからのサーバートークン（自動生成）を使用して/mcpパスに接続します。
2. サーバーは登録トークンを生成します（モデルまたは--newコマンドによって組み込みの mcp ツール経由で実行されます）。
3. Web クライアントは、このトークンとそのドメインを使用して/registerエンドポイントに接続します。
4. Web ページは、ドメインに基づいて割り当てられたチャネルに接続します。
5. LLM がツール / リソース / プロンプトを使用する場合、リクエストは次のようになります。
   • MCPクライアント → MCPサーバー → WebSocketサーバー → ツール/リソース/プロンプトを含むWebページ
   • （ツール/リソース/プロンプトのリストをリクエストする場合も同様）
6. ウェブページはリクエスト（例えばツールの呼び出し）を実行し、同じパスを通じて結果を送り返します。
7. 複数のウェブページを同時に接続することができ、それぞれに独自のツールとトークンのセットが用意されています。
8. MCPクライアントは、名前の衝突を避けるためにチャネルプレフィックスが付いた統合リストとしてすべてのツールを認識します。

安全

これはまだ初期段階のプロジェクトです。悪意のある拡張機能などによるプロンプトインジェクション攻撃などを防ぐためのセキュリティ強化に非常に興味を持っています。建設的なアイデアをお持ちの方は、ぜひご連絡いただくか、イシューを作成してください。

組み込みツール

• トークンジェネレーター（WebMCP Webサイトに接続するためのもの）
• MCP ツール定義者 (MCP で使用するツールのスキーマの構築を簡素化)
  • WebMCPで使用するためのJavaScript（該当する場合）をフォローアップメッセージで要求できます。

ドッカー

Smithery デプロイメント専用のDockerfileがあります。

docker を使用して websocket サーバーを実行する場合は、デモ用にdocker-compose.ymlを追加しました。

mcpクライアント設定に--mcpと共に--dockerが指定されている場合、サーバーが実行中であると想定されます。これにより、メインプロセス（Websocketサーバー）をDocker化できるようになり、mcpクライアントはWebsocket経由でDockerコンテナに接続します。同様に、ウェブサイトもDockerコンテナと通信できるようになります。