WebMCPでAI操作に強いサイトを作る方法

TL;DR

WebMCPでは、サイト側が実行可能な操作をツールとして定義し、AIエージェントがそれを直接呼び出すことで、画面上の要素を推測する操作より高速で壊れにくい自動化を目指せる。Cloudflareのベータ機能を使えば、既存コードを変えずにエッジからスクリプトを挿入し、来歴検査や既存MCPサーバーへの中継を有効化できる。

Transcript

おそです。本日はですね、クラウドフレア から、ま、WebMCPに関するですね、 昨日公開しましたよみたいなブログが、え 、登場していますんで、ま、WebMCP ね、僕のYouTubeチャンネルでは 多分、え、まだ動画にしたことがなかった かなと思いますんで、え、その解説含めて 、え、動画にしていきたいなという風に 思っております。シンプルな機能だったり はするんですけれども、え、覚えておくと ね、え、ま、その自分のサービスであっ たりだとか、ま、選択肢になってくるん じゃないかな。え、ていうことも思います んで、ま、今回ね、ちょっと動画にして いきたいなという風に思っております。 はい。ま、デモとかね、ちょっと作ってき たし、ま、ソースコードとかもね、一応 あるあったりするんで、え、それ含め... Read More

Key Insights

• WebMCPは、サイト側が利用可能な操作をツールとして公開し、AIエージェントがブラウザー上から直接呼び出してタスクを実行する仕組みである。
• 従来のブラウザー自動化は、クリック対象や入力位置の推測に依存するため、モデルの能力や画面変更によって再現性が下がり、操作が壊れやすい。
• ツール公開型の操作は、エージェントがサイトの定義済み機能を選択できるため、画面を視覚的に探す方法より高速で失敗しにくいと説明されている。
• WebMCPの実装は、HTML内などでregisterToolに相当する定義を行い、そのサイトで可能な操作をエージェントから参照可能にする形で進められる。
• WebMCPは、従来のMCPの考え方をブラウザーに持ち込み、サイト閲覧中のエージェントへ構造化された操作手段を提供するものと整理できる。
• Cloudflareの機能は、既存サイトのコードを直接変更せず、エッジからスクリプトを自動挿入してWebMCP関連の機能を追加できるベータ版である。
• Content Credentials機能はコンテンツの来歴検査に使われ、もう一つの機能はブラウザー側から既存MCPサーバーへのアクセスを中継する。
• サービス提供者は、AIエージェントのアクセスを一律に怪しいボットとして扱わず、正規利用を想定してWebMCPをサイト設計へ組み込む選択肢を持てる。
• 🎬 このチャンネルの他の動画:
  • Remotion公式スキルで動画を作る方法
  • 無料AI音声入力Amicalの使い方は？
  • GPT-5.5向けプロンプトを書く方法
• 📺 このチャンネル: まさおAIじっくり解説ch

Questions & Answers

Q: WebMCPとは何ですか？

WebMCPは、ウェブサイトが実行可能な操作をツールとして公開し、AIエージェントがブラウザー上から呼び出せるようにする仕組みです。エージェントは画面内のボタンや入力欄を推測して操作する代わりに、サイトが定義したツール一覧を参照し、目的に合う機能を直接実行します。

Q: WebMCPは従来のブラウザー自動化と何が違いますか？

WebMCPは、サイト側が操作方法を明示的なツールとして提供する点が異なります。従来のブラウザー自動化では、エージェントがクリック位置や入力対象を画面から判断するため、推測の誤りや表示変更による失敗が起こり得ます。WebMCPでは定義済みツールを呼び出すため、再現性と速度の向上が期待されます。

Q: WebMCPをサイトに実装する方法は？

WebMCPは、HTML内などでregisterToolに相当する定義を用意し、そのサイトで実行できる操作をツールとして登録する形で実装します。登録内容をブラウザーへアクセスしたAIエージェントが参照できるようにすると、エージェントは依頼されたタスクに応じて適切なツールを選択し、サイト上の処理を実行できます。

Q: なぜWebMCPはAIエージェントの操作を安定させられるのですか？

WebMCPは、AIエージェントが画面の見た目から操作対象を推測せず、サイト側が用意したツールを直接選べるためです。一般的な自動操作では、モデルの能力や画面構成によってクリックや入力に失敗する可能性があります。操作手段を構造化して公開すれば、推測への依存を減らし、壊れにくい処理を目指せます。

Q: CloudflareのWebMCP関連機能とは何ですか？

CloudflareのWebMCP関連機能は、既存サイトのコードを直接変更せず、エッジからスクリプトを自動挿入してエージェント向け機能を追加するベータ版の仕組みです。動画では、Content Credentialsを利用したコンテンツ来歴の検査と、ブラウザー側から既存MCPサーバーへ接続するための中継機能が紹介されています。

Q: CloudflareのMCP中継機能は何に使えますか？

MCP中継機能は、ブラウザー上のAIエージェントから、すでにデプロイされているMCPサーバーへアクセスさせるために使えます。Cloudflareエッジから挿入されたスクリプトが接続を仲介するため、元のサイトのソースコードを変えずに導入でき、動画ではログイン状態を保ったまま安全に中継できる仕組みとして説明されています。

Q: WebMCPと専用MCPサーバーはどう使い分けますか？

ブラウザー上のサイト操作をエージェントへ直接提供したい場合はWebMCPが選択肢になり、外部から使う機能やデータアクセスを独立した形で提供したい場合は専用MCPサーバーが適します。動画では、SaaSのソースコードを公開せずに機能を利用してもらう用途ではMCPサーバーが合うとされ、目的に応じた使い分けが示されています。

Q: AIエージェント時代のサイト設計で何を意識すべきですか？

AIエージェントがサイトへアクセスして操作することを前提に、実行可能な機能を明確なツールとして提供する視点が重要です。エージェントからの流入を一律に怪しいボットとして遮断するだけでなく、正規の利用者として受け入れる設計も選択肢になります。サービス提供者は、初期設計からWebMCPを組み込むか検討できます。

Summary & Key Takeaways

• WebMCPは、サイトが実行可能な操作をツールとしてブラウザー上に公開し、AIエージェントが目的に応じて呼び出す仕組みである。画面内のクリック位置や入力欄を推測する一般的なブラウザー自動化と異なり、サイト側が操作方法を明示するため、再現性や速度を高め、表示変更などによる失敗を減らせると説明されている。

• 実装では、サイト側がHTML内などでregisterToolに相当する定義を用意し、利用可能な操作をAIエージェントから参照できるようにする。エージェントは公開されたツール一覧からタスクに適したものを選んで実行する。専用MCPサーバーを別途提供する方法にも利点があり、用途やデータアクセスの条件に応じた使い分けが必要になる。

• Cloudflareのベータ機能は、既存サイトのコードを変更せず、エッジからスクリプトを自動挿入してWebMCP関連機能を追加する。動画では、Content Credentialsによるコンテンツ来歴の検査と、既存MCPサーバーへの中継という2機能が紹介されている。提供者には、AIエージェントを正規の利用者として想定したサイト設計も選択肢になる。