WebMCP
mcp2everything · コーディング
WebMCP（Web Model Context Protocol）は、AIエージェントのウェブ統合に向けて提案されたウェブ標準だ。サイトが構造化ツールを、ブラウザ内で動くAIエージェントへ直接公開できる。エージェントがスクリーンショットを撮ってボタンの位置を推測する代わりに、サイトが名前・説明・パラメータのスキーマを備えたJavaScript関数を登録し、エージェントがそれを即座に呼び出す。軽量なオープンソースライブラリとブラウザレベルのAPIを組み合わせたもので、自社ページをAIアシスタントと綺麗に連携させたいフロントエンド開発者を対象にしている。
WebMCP について
WebMCPとは何か
WebMCPはAIエージェント向けのオープンなウェブ標準だ。一般的なブラウザ自動化のモデルを丸ごとひっくり返す。エージェントがDOMを解析したりスクリーンショットを読んだりしてページの機能を探るのではなく、ページ自身が自分の能力を構造化ツールとして宣言する。ブラウザはそのツールを接続済みのAIエージェントに渡し、エージェントはローカル関数のように呼び出す。
中心となる考えは、navigator.modelContext という単一のグローバルオブジェクトに乗っている。開発者は registerTool を、名前・平易な説明・引数のJSON Schema・ハンドラ関数とともに呼び出す。エージェントはツールを自動で発見し、実際のパラメータで呼び出す。ツールは動作中のページ内で実行されるため、ユーザーのセッション、Cookie、現在のアプリ状態をすでに持っている。追加の認証配線は要らない。
早めに知っておくべき現実的な限界がある。WebMCPはブラウザのタブと運命を共にする。タブを閉じればツールは消える。扱えるのはツールだけで、完全なMCPサーバーが運べるリソースやプロンプトは含まない。そして、動作を承認する人間がいることを前提にしている。これは安全機能だが、完全に無人でのバックグラウンド作業は除外される。
はじめ方
- サイトのフロントエンドコードを開き、WebMCPのscriptタグを追加する（または
npm install webmcpを実行する）。これでライブラリがページに読み込まれる。 WebMCPインスタンスを作る。フローティングのヘルパーウィジェットについて、ボタンの色・位置・サイズといったUIオプションを渡せる。- 最初のツールを
mcp.registerTool(name, description, schema, handler)で登録する。ハンドラはアプリがすでに実行しているロジックに向ける。 - scriptの読み込み直後にすべてのツールを登録する。MCPクライアントは新しく利用可能になったツールを拾うために再起動が必要なことが多い。
- MCPクライアントを接続した対応ブラウザでテストし、公開する。公開後はエージェントがツールを呼び出せる。
これだけだ。バックエンドも認証サーバーも、作り直しも要らない。
AIツール情報
WebMCPの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- フロントエンド開発者
- 個人サイトの運営者と小規模チーム
- AIトラフィックを見据えるプロダクトチーム
タスク
- 検索ツールを公開し、エージェントがキーワードでコンテンツを問い合わせ、画面のリストを読むのではなく構造化された結果を受け取れるようにする。
- フォームの入力と送信の動作を登録し、アシスタントがセッションをすでに持った状態で、ユーザーに代わって注文や予約を完了できるようにする。
- 既存のJavaScript業務ロジックを、エージェントが呼べる関数として包む。AIのためだけに作る並行API層を避けられる。
シーン
- 変わり続けるレイアウトをクリックして回るのではなく、エージェントがカート追加ツールを呼び出す買い物の流れ。
- ユーザーが尋ねたとき、アシスタントがページ内容を直接取り出せるドキュメントサイト。
- アシスタントがDOMを再解析するのではなく、登録済みリソースを通じてライブウィジェットを読むダッシュボード。
主な機能
JSON Schemaによるツール登録
registerTool は、このAIエージェント向けウェブ標準の心臓部だ。名前、自然言語の説明、引数スキーマ、ハンドラを渡すと、ツールは接続済みのあらゆるエージェントから見つけられるようになる。スキーマはモデルに送信可能な入力を正確に伝え、不正な呼び出しと当て推量を減らす。
共有セッションとページコンテキスト
ツールはページ内で動くため、ユーザーがすでに持っているログイン状態、Cookie、メモリ内のデータを引き継ぐ。エージェントは認証を組み直す必要も、クロスオリジンの壁を気にする必要もない。AIの動作ごとに別のバックエンドプロキシを立てるのに比べ、大きな簡略化になる。
ツールに並ぶプロンプトとリソース
動作だけでなく、WebMCPはプロンプトのテンプレートと、URIで識別される読み取り可能なリソースも登録できる。プロンプトはよくある問い合わせを形づくり、呼び出しごとに変わる引数を受け取れる。リソースはページ内容をコンテキストとして公開できる。両者を合わせると、エージェントに押せるボタン以上のものを与えられる。
フレームワークにもバックエンドにも依存しない
ライブラリは小さな素のJavaScriptの追加分で、Chrome、Firefox、Safari、Edgeで動き、React、Vue、Angularとも仲良くやる。新しいサーバーも、新しいデータベースも、アーキテクチャの作り直しも要らない。ページのフロントエンドを編集できるなら、WebMCPを追加できる。
UI変更への耐性
エージェントは画面上の要素を探すのではなく意味的なツールを呼ぶため、CSSクラスの改名やレイアウトの入れ替えで統合は壊れない。スクリーンショットやDOMスクレイピングに頼るエージェントは、デザイナーがページに触れた瞬間に陳腐化する。WebMCPはその種の破損をまるごと回避する。
メリットとデメリット
メリット
- バックエンドの変更がゼロで、scriptタグによる簡単な設定。小規模チームでも統合コストが低く抑えられる。
- MITライセンスで無料。AIトラフィックを流すためのベンダーアカウントも、リクエストごとの課金もない。
- 既存のフロントエンドロジックを再利用するため、人間のユーザーに使われるコードがそのままエージェントにも使われる。
- ユーザーのセッションを自動で引き継ぎ、AI経路から認証配線のほとんどを取り除く。
- 主要なブラウザとフロントエンドフレームワークで動くため、一つのスタックに縛られない。
デメリット
- タブを閉じるとツールは消えるため、持続的またはヘッドレスのバックグラウンド自動化は担えない。
- 完全なMCPサーバーが提供するようなリソースとプロンプトの同梱サポートがなく、一部のエージェントにできることが限られる。
- 設計上、ユーザーの承認を必要とする。安全だが、エージェントが動くまでに一手間増える。
- 周辺のツール群はまだ早い段階で、粗い部分や動くサンプルの少なさに当たることがある。
よくある質問
サイトが構造化ツールをブラウザ内のAIエージェントに渡せるようにする。エージェントはそのツールを直接呼ぶので、ページをスクレイピングしたりクリック先を推測したりせずに、検索やフォーム入力、動作の起動ができる。
関連コンテンツ
WebMCPに関連するツール、スキル、記事を探す。
WebMCPの代替ツール
Forefront
Forefront · コーディングForefrontはオープンソースAIで構築するためのウェブプラットフォームだ。主要なオープンソース言語モデルを自分のデータで微調整し、性能を評価し、API経由で実行したり、エクスポートして自分でホストしたりできる。クローズドなプラットフォームの手軽さを求めつつ、モデルとデータの所有権にはこだわる開発者が対象だ。
Startkit
StartKit.AI · コーディングStartkitは、AI SaaSとAIラッパー製品を作るためのボイラープレートだ。面倒な部分をあらかじめ配線済みにしたAIスタートアップボイラープレートと考えればいい。認証、StripeとLemon Squeezyの決済、利用制限、トランザクションメール、そしてOpenAI、Anthropic、Groq、Llamaと通信するAI APIスターターキットが含まれる。リポジトリをクローンして価格を設定し、ユーザーが実際にお金を払う部分に取りかかれる。ReactとTailwind上のNext.jsで作られているため、ボイラープレートコードの多くはすでに見慣れたものだ。
Testim
Tricentis · コーディングTestimは、Web・モバイル・Salesforceアプリ向けにエンドツーエンドテストを構築して実行するAIテスト自動化プラットフォームだ。機械学習を頼りに、インターフェースが変わってもテストを安定させ、チームが壊れたセレクターの修正に費やす時間を減らす。今日から使い始められる自動テストツールとしては悪くない。ブラウザで操作を録画してテストを作り、より細かい制御が必要なときはJavaScriptを足す。忙しいQAチームにとって堅実な選択肢である。