
WebMCP
WebMCPは、ウェブサイトがJavaScript関数を介して構造化されたツールをブラウザ内のAIエージェントに直接公開できるようにする提案されたウェブ標準であり、ウェブアプリケーションとのより効率的で信頼性の高いAIインタラクションを可能にします。
https://webmcp.dev/?ref=producthunt&utm_source=aipure

製品情報
更新日:2026年02月28日
WebMCPとは
WebMCP(Web Model Context Protocol)は、GoogleとMicrosoftのエンジニアが共同で開発し、W3C Web Machine Learning Community GroupでインキュベートされているオープンソースのJavaScriptライブラリおよびウェブ標準です。ウェブ開発者がサイトの機能を、バックエンドサーバーの実装を必要とせずに、AIエージェント、ブラウザアシスタント、および支援技術が直接アクセスできる「ツール」として定義および公開するための標準化された方法を提供することにより、ウェブサイトとAIエージェント間の橋渡し役を果たします。
WebMCPの主な機能
WebMCP (Web Model Context Protocol) は、W3C が提案するウェブ標準であり、ウェブサイトが navigator.modelContext API を通じて、構造化されたツールをブラウザ内の AI エージェントに直接公開できるようにするものです。これにより、開発者はウェブサイトの機能を、自然言語による説明と構造化されたスキーマを持つ JavaScript 関数として定義でき、スクリーン スクレイピングの必要性をなくし、AI とウェブのインタラクションの効率と信頼性を向上させます。
構造化されたツールの登録: 開発者がウェブサイトの機能を、AI エージェントが直接呼び出すことができる明確な説明と JSON スキーマを持つツールとして登録できるようにします
ブラウザネイティブの統合: 完全にブラウザのタブ内で実行され、個別のバックエンド インフラストラクチャを必要とせずに、ユーザーのセッションとセキュリティ コンテキストを共有します
宣言型および命令型 API: AI アクセス可能なツールを実装するための、HTML ベースの宣言型アプローチと JavaScript ベースの命令型アプローチの両方を提供します
組み込みの開発ツール: DevTools の統合と、ツール実装のデバッグとテストのための Model Context Tool Inspector が含まれています
WebMCPのユースケース
E コマースの統合: AI エージェントが、構造化されたツールを通じて、ショッピング カート、製品検索、チェックアウト プロセスと直接やり取りできるようにします
コンテンツ管理: AI エージェントが、HTML を解析する代わりに、直接 API 呼び出しを通じて、ブログ投稿、記事、その他のコンテンツに効率的にアクセスして管理できるようにします
フォームの自動化: AI エージェントに、フォーム フィールドと検証ルールへの構造化されたアクセスを提供することで、フォームへの入力とデータ送信プロセスを効率化します
検索機能の強化: AI エージェントが、構造化されたパラメータを使用してコンテンツを直接クエリおよびフィルタリングできるようにすることで、検索機能を向上させます
メリット
従来のスクリーン スクレイピング手法と比較して、計算オーバーヘッドを約 67% 削減します
構造化されたインタラクションを通じて、タスクの精度を約 98% に向上させます
完全にブラウザ内で動作するため、バックエンド インフラストラクチャの変更は必要ありません
ウェブサイトが AI エージェントとやり取りするための標準化された方法を提供します
デメリット
現在、実験的な機能が有効になっている Chrome ブラウザに限定されています
ウェブサイトとエージェント間の鶏と卵の問題により、採用の課題に直面しています
まだ開発の初期段階にあり、API の変更の可能性があります
ツール定義を実装および維持するために、追加の開発作業が必要です
WebMCPの使い方
ChromeでWebMCPを有効にする: chrome://flagsに移動し、「WebMCP for testing」を検索して有効にし、Chromeを再起動します。これは、WebMCPが現在開発トライアル中であるため必要です。
WebMCPスクリプトを含める: HTMLに<script src=\'webmcp.js\'></script>を含めることで、WebMCPスクリプトをウェブページに追加します。
WebMCPを初期化する: const mcp = new WebMCP({ color: \'#4CAF50\', position: \'top-right\', size: \'40px\', padding: \'15px\' });のようなカスタムオプションを使用して、新しいWebMCPインスタンスを作成します。
ツールを登録する: 名前、説明、入力スキーマ、および実行関数を使用してmcp.registerTool()を呼び出すことにより、AIエージェントが使用できるツールを登録します。ツールは、スクリプトのロード直後に登録する必要があります。
プロンプトを登録する: 名前、説明、パラメータ、およびテンプレート関数を使用してmcp.registerPrompt()を使用し、LLMインタラクションの事前定義済みテンプレートを設定します。
リソースを登録する: 名前、説明、URI構成、およびコンテンツ取得関数を使用してmcp.registerResource()を使用し、LLMコンテキストのデータとコンテンツを公開します。
MCPクライアントを接続する: MCPクライアント(Claudeなど)を起動し、隅にある青いウィジェットをクリックしてWebMCPトークンを貼り付けることにより、ウェブページに接続します。
統合をテストする: AIエージェントにウェブページ上の登録済みツール、プロンプト、およびリソースを操作させることにより、セットアップを確認します。
WebMCPのよくある質問
WebMCPは、ウェブサイトがモデルコンテキストプロトコルと統合できるようにする、オープンソースのJavaScriptライブラリおよびウェブ標準です。これにより、ウェブアプリケーションは、AIエージェントや支援技術によって呼び出すことができる、自然言語の説明と構造化されたスキーマを持つJavaScript関数である「ツール」として、その機能を公開できます。











