WebMCP: LLMとの対話をウェブサイトに直接統合

WebMCPとは？

WebMCPは、従来のウェブアプリケーションと高度な大規模言語モデル（LLM）またはAIエージェントとの間のギャップを埋めるために設計された、革新的なオープンソースのJavaScriptライブラリであり、モデルコンテキストプロトコル（MCP）を介して接続します。単にスクリプトタグを含めるだけで、開発者はウェブページの右下に小さく目立たない青いウィジェットを埋め込むことができます。このウィジェットは、エンドユーザーが設定済みのMCPクライアント（例：Claude Desktop）をウェブサイトのライブコンテキストに直接接続するためのゲートウェイとして機能し、洗練されたコンテキスト認識型の対話を可能にします。

WebMCPの核となる価値提案は、LLMがアクションを実行したり、特定のページデータにアクセスしたり、ウェブページのリアルタイムの状態に基づいて構造化された会話に従事したりできるようにすることにあります。これにより、静的なコンテンツ消費が動的なエージェント支援型エクスペリエンスに変わり、クライアント側のトークン認証を介して接続に対するユーザー制御を維持します。

主な機能

WebMCPは、MCPクライアントとの深い統合のための堅牢なAPIを提供し、いくつかの強力な機能を提供します。

• LLMツールの登録: 開発者はカスタムJavaScript関数を呼び出し可能なツールとして登録できます。その後、LLMクライアントは構造化された引数を渡すことでこれらのツール（例：weather、calculate）を呼び出し、エージェントがサイトに代わって直接アクションを実行できるようにします。
• 事前定義されたプロンプトテンプレート: 登録されたプロンプトにより、一般的なユーザーインタラクションを標準化します。これらのテンプレートにより、クライアントは定義済みの構造と動的引数を使用して、複雑なクエリ（Gitコミットメッセージの生成やテキストの要約など）を開始できます。
• コンテキストリソースの公開: 動的または静的なウェブサイトデータをURIで識別される読み取り可能なリソースとして公開します。これにより、LLMは現在のページHTML（page://current）や特定のDOM要素からのコンテンツ（例：element://my-id）を応答のコンテキストとしてアクセスできます。
• 安全なサンプリングメカニズム: システムプロンプトとコンテキストに基づいて完了を要求する、サーバー開始型のインタラクションを実装します。WebMCPは、応答を元のサーバーに送り返す前に、モーダルダイアログをユーザーに表示して明示的な入力を要求することにより、セキュリティを処理し、プライバシーと監視を保証します。
• カスタマイズ可能なウィジェットの外観: 埋め込まれたウィジェットは高度に設定可能であり、開発者はウェブサイトのデザイン美学にシームレスに合わせるために、その色、位置（右下、右上など）、サイズ、パディングを調整できます。

WebMCPの使用方法

WebMCPをウェブサイトに統合するのは開発者にとっては簡単ですが、ユーザーの操作は事前に設定されたMCPクライアントに依存します。

ウェブサイト開発者向け（統合）:

1. スクリプトの組み込み: 以下の行をHTML（通常は</body>タグの直前）に追加します。 <script src="webmcp.js"></script>
2. 初期化と設定: スクリプトを組み込んだ直後に、カスタム設定（色、位置）でライブラリを初期化します（オプション）。
3. 機能の登録: mcp.registerTool(), mcp.registerPrompt(), および mcp.registerResource() を使用して、接続されたLLMに対してサイトの機能とデータを公開します。

エンドユーザー向け（接続）:

1. クライアントの設定: ユーザーがMCPクライアント（例：Claude Desktop）を持ち、WebMCPサーバーエンドポイントへの接続が設定されていることを確認します（提供されたnpxコマンドを使用）。
2. トークンの生成: ユーザーはMCPクライアントを起動し、webmcp tokenを要求します。
3. 接続: ユーザーはウェブサイト上の青いWebMCPウィジェットをクリックし、生成されたトークンを接続プロンプトに貼り付けます。

ユースケース

WebMCPは、さまざまなウェブコンテキストで強力なAI統合を可能にします。

1. Eコマース製品サポート: WebMCP経由で接続されたLLMエージェントは、page-contentリソースにアクセスして製品の説明や仕様を読み取ることができます。ユーザーは「このページに基づいて、このラップトップはビデオ編集に適していますか？」と尋ねることができます。エージェントはコンテキストを使用して、製品ページを離れることなく正確かつ即座に回答を提供します。
2. インタラクティブなドキュメントとチュートリアル: 複雑なソフトウェアのドキュメントサイトでは、コードスニペットの実行やシミュレーションの実行のためにツールを登録できます。ユーザーはエージェントに「ハイライトされたコードブロックの機能について説明してください」（選択された要素IDのリソースを登録することにより）と尋ねることができ、エージェントはライブDOMコンテンツに基づいて説明を提供します。
3. データ入力とフォーム支援: 内部Webアプリケーションや複雑なフォームでは、プロンプトを登録してデータ入力を標準化できます。たとえば、エージェントが登録されたリソースを介して読み取ることができるデータフィールドに基づいて、「標準化されたコンプライアンスの要約を生成する」プロンプトを登録できます。
4. エージェントワークフローの自動化: （クライアントを介して安全に公開されている場合）バックエンドAPIと対話するツールを登録することにより、エージェントは複雑なマルチステップのワークフローを開始できる可能性があります。「今日の売上高を要約するメールを作成する」など。この場合、LLMはコンテキストリソースを使用して必要なデータを収集してから、最終的なツール呼び出しを実行します。

FAQ

Q: WebMCPは無料で利用できますか？ A: はい、WebMCPはオープンソースのJavaScriptライブラリとして明示されているため、コアの統合コードは自由に使用および変更できます。

Q: モデルコンテキストプロトコル（MCP）とは何ですか、なぜ必要なのですか？ A: MCPはWebMCPが実装する基盤となる通信規格です。ウェブサイト（サーバー）が外部のLLMクライアントとコンテキスト、ツール、リクエストを安全に通信する方法を定義し、異なるクライアントアプリケーション間で対話が標準化されることを保証します。

Q: 新しいツールを登録するたびにMCPクライアントを再起動する必要がありますか？ A: 特に初期設定や開発中は、新しいツールやリソースを登録した後にMCPクライアントを再起動することが強く推奨されます。一部のクライアントは、トークン接続時に利用可能なツールセットを動的に更新しない場合があるためです。

Q: LLMは許可なく機密性の高いユーザーデータにアクセスできますか？ A: いいえ。インタラクションはMCPクライアントによって制御されます。リソースがページコンテンツを公開できる場合でも、重要なステップはユーザーがトークンを介して接続することです。さらに、外部実行を必要とする機密性の高いアクションは、サンプリングメカニズムを介して処理され、ユーザーにモーダルダイアログを介した明示的な入力を要求し、人間の監視を維持します。

Q: 青いウィジェットの見た目を変更できますか？ A: もちろんです。このライブラリでは、WebMCPオブジェクトの初期化フェーズ中に、ウィジェットの外観（color、position（例：'top-right'）、size、padding）のカスタマイズが可能です。