WebMCPでAI対応サイトを構築する方法

TL;DR

WebMCPを導入すると、AIは画面上のボタンを推測せず、サイトが提示する検索やカート操作などの機能を直接利用できる。Cloudflareではサイト接続後に管理画面でWebMCPを有効化し、必要なツールパックを選ぶことで設定できる。

Transcript

はい、こんにちは。ケトです。この チャンネルは生成AIの最新情報や活用 事例を紹介してます。是非チャンネル登録 お願いいたします。そして今回のテーマは ですね、WebMCPと言われるAI とウェブサイトをうまく接続してくれ るっていうですね、仕組みをですね、解説 していきたいんですけど、先日ですね、 クラウドフレアと言われるWebの インフラ環境を整えてくれる基盤サービス みたいなものがあるんですけど、そこが ですね、WebMCPをめちゃくちゃ簡単 に導入できますっていうですね、サービス を提供開始しました。で、これがですね、 結構今後のウェブサイト、Ecサイト、 メディアサイトなどの運用で重要になって くるんじゃないかなと思ってますので、 是非ですね、この辺りに関連しているよう なお仕事を... Read More

Key Insights

• WebMCPは、検索、情報取得、カート追加、注文など、AIがサイト内で実行できる操作をメニューとして提示する専用窓口である。AIは画面構造を毎回推測せず、目的に合うツールを直接選択できる。
• 従来のブラウザー操作型AIは、画面を目視してボタンを推測し、間違えれば戻って別の操作を試す仕組みである。そのため処理が遅くなり、誤操作が発生しやすく、トークン消費と実行費用も増えやすい。
• WebMCPの導入効果は、動画内の説明では処理時間を約8割削減し、操作の正確さを1割から2割向上させることである。AI経由の訪問者を待たせにくくし、利用者の操作体験を改善できる。
• サイト運営者の利点は、AIエージェントのアクセスを正式なMCP窓口で受け付け、訪問や操作のデータを残せることである。購入などの重要操作では、人間による確認と承認を挟む流れも設計できる。
• Cloudflareでの導入は、サイトを接続し、対象ドメインの管理画面でWebMCPベータを有効化し、利用するツールパックを選ぶ3段階である。既存サイトでも管理画面を中心に設定できると説明されている。
• 利用者側の接続方法は、Claudeの設定画面でカスタムコネクターを追加し、WebMCP対応サイトのURLに「/mcp」を付けて登録することである。接続後は、公開された読み取り機能や書き込み機能をAIが利用できる。
• ECサイトのデモでは、在庫検索、商品詳細取得、複数商品の比較、カート内容取得、商品追加、注文確定、値下がり通知登録などが公開された。AIは指定された安い商品をカーソル操作なしでカートへ追加した。
• スキルのMCP化は、スキル本体をウェブサイト側に置き、URLを通じて複数の利用者へ提供する方法である。提供者側の更新を接続先へ反映でき、ファイル再配布と個別セットアップの負担を減らせる。

Questions & Answers

Q: WebMCPとは何ですか？

WebMCPは、ウェブサイトがAIエージェントに対して、検索、情報取得、比較、カート追加、注文などの利用可能な操作をツールとして提示する仕組みです。AIは人間のように画面を見てボタンを探す必要がなく、目的に対応する機能を選んで直接実行できます。

Q: なぜ従来のAIによるブラウザー操作は遅いのですか？

従来のAIはウェブ画面を確認し、クリックすべき場所を推測して操作します。選択が間違っていれば前の画面へ戻り、別の候補を試してから次の手順を再び判断します。この処理を繰り返すため時間がかかり、誤操作やトークン消費、実行費用の増加にもつながります。

Q: WebMCPを導入するメリットは何ですか？

AIがサイト側から提供された操作一覧を参照し、必要なツールを直接使えることが主なメリットです。動画内では処理時間が約8割削減され、操作の正確さも1割から2割向上すると説明されています。また、運営者はAI経由のアクセスや操作をデータとして把握できます。

Q: CloudflareでWebMCPを有効化する方法は？

最初に対象サイトをCloudflareへ接続します。次に対象ドメインの設定ページを開き、「エージェントの準備状況」からWebMCPベータを有効化します。最後に、画像やコンテンツのメタデータ取得、サイト独自のMCPサーバーツールなど、利用させるツールパックを選択します。

Q: ClaudeからWebMCP対応サイトへ接続する方法は？

Claudeの設定画面でコネクターを開き、「カスタムコネクターを追加」を選択します。接続対象となるウェブサイトのURLに「/mcp」を付けたアドレスと任意の名前を入力し、追加後に連携を実行します。認証が完了すると、そのサイトが公開している各種ツールを利用できます。

Q: WebMCPはECサイトでどのように活用できますか？

ECサイトでは、在庫検索、絞り込み条件の取得、商品詳細の確認、複数商品の比較、カート内容の取得、商品追加、注文確定、値下がり通知登録などをAI向けツールとして提供できます。デモでは、AIが安い商品を選び、カーソルを動かさずに直接カートへ追加しました。

Q: WebMCPで購入操作の安全性を確保する方法は？

購入などの重要な処理をAIだけで即時実行させず、最後に人間が確認して承認する手順を設けられます。AIが必要な操作や注文内容を準備し、人間が画面上で内容を確認してから実行を許可することで、AIの効率を活用しながら最終判断を人間に残せます。

Q: AIエージェント用スキルをMCP化する利点は何ですか？

スキルをウェブサイト側に構築してMCPとして公開すると、利用者はURLをカスタムコネクターへ登録するだけで同じ機能を使えます。提供者がサーバー側のスキルを更新すれば接続中の利用者にも変更を反映できるため、更新版ファイルの再配布や複雑なインストール作業を減らせます。

Summary & Key Takeaways

• WebMCPは、ウェブサイトがAIエージェント向けに「実行できる操作の一覧」を提供する仕組みである。従来のAIは画面を見ながらボタンの位置や次の操作を推測するため、処理が遅く、誤操作や大量のトークン消費が起こりやすかった。検索、商品詳細の取得、比較、カートへの追加などをツールとして提示すれば、AIは目的に合う機能を直接呼び出し、より速く正確に処理できる。

• CloudflareでWebMCPを導入する基本手順は、サイトをCloudflareへ接続し、対象ドメインの「エージェントの準備状況」からWebMCPベータを有効化し、必要なツールパックを選ぶという3段階である。利用者側はClaudeの設定からカスタムコネクターを開き、対象サイトのURLに「/mcp」を付けて登録する。デモでは、AIが安い商品を選び、カーソル操作なしでカートへ追加した。

• WebMCPはECサイトやメディアサイトの操作だけでなく、AIエージェント用スキルの共有にも応用できる。スキルをウェブサイト側に構築してMCP経由で公開すれば、利用者はURLを登録するだけで同じ機能を使える。提供者がサーバー側のスキルを更新すると接続中の利用者にも反映できるため、ファイルの再配布や利用者ごとの複雑なセットアップを減らせる。