00:00:00AIエージェントは今や、私たちの生活のあらゆる部分に浸透し始めています。
00:00:03そして、それが最も顕著に現れている分野の一つがブラウザです。
00:00:06主要なAI企業はどこも、ブラウザこそが誰もが毎日使う
00:00:11唯一のツールであることに気づいています。
00:00:12ならば、そこにAIを組み込まない手はありません。
00:00:14しかし実を言うと、既存のものはどれも使い物になりません。
00:00:15それは最適化の問題ではないのです。
00:00:17いくら最適化しても解決できない、根本的な問題が存在します。
00:00:20ところがGoogleはMicrosoftと協力して、「WebMCP」というものを発表しました。
00:00:24これはエージェントにウェブサイトをうまく使わせようとするのではなく、ウェブサイト側を
00:00:29エージェントと話しやすくさせるというものです。
00:00:30これは全く異なるアプローチです。
00:00:32そして、これにより今まで見たこともないようなことが可能になります。
00:00:35こちらはローカルサーバーで動作しているシンプルなHTMLページです。
00:00:38拡張機能タブを開くと、WebMCP拡張機能があります。
00:00:41これを開くと、サイト名の下に「BookTable」というツールが一つ表示されます。
00:00:45このWebMCPブリッジをClaude Codeに接続し、WebMCPツールが利用可能な
00:00:49レストラン予約フォームが開いていることを伝えました。
00:00:52そして、日付、名前、特別なリクエストを指定して2名で予約するようタスクを与えました。
00:00:57これらのフィールドはすべてフォーム内に存在します。
00:00:59エージェントは日付を確認し、サイトが提供するWebMCPツールを使用して、各項目を入力し、
00:01:03予約を無事に完了させました。
00:01:06現在、エージェントが画面上の内容を把握する方法は2つあります。
00:01:091つ目はビジョン（画像認識）ベースです。
00:01:11エージェントはページ全体のスクリーンショットを撮り、見えるすべての要素に注釈を付け、
00:01:15その画像をモデルに読み込ませて、どこをクリックすべきかを判断しようとします。
00:01:192つ目の方法は、DOMパースです。
00:01:21エージェントはページの生のHTMLを取得します。
00:01:24ウェブサイトで「要素の検査」を開いたことがあれば、それがどんなものか分かるでしょう。
00:01:28何千行ものコードです。
00:01:29エージェントはそのすべてを読み込み、正しいボタンを特定しようとします。
00:01:33これら両方のアプローチには、同じ根本的な問題があります。
00:01:35それは「非決定的」であるということです。
00:01:36エージェントは毎回、精一杯の「推測」をしているに過ぎません。
00:01:39これが安定して機能しない理由は、インターネット全体が「人間の目」のために
00:01:43作られているからです。
00:01:45すべてのウェブサイトは、人間が見ることを前提としています。
00:01:47マシン（機械）向けの構造にはなっていないのです。
00:01:48そのため、どんなに優れたモデルであっても、エージェントはマシンによる解釈を
00:01:53想定していないものを、無理やり解釈しようとしている状態なのです。
00:01:55WebMCPを使用すると、エージェントがサイトを理解しようとする代わりに、サイト側が
00:02:00実行可能なアクションを「ツール」として登録します。
00:02:01エージェントはページに到達した際、推測する必要はありません。
00:02:04単に利用可能なツールを読み取り、それらを直接呼び出すだけです。
00:02:07現在、WebMCPは早期プレビュー版のみ公開されています。
00:02:10エージェント中心のウェブが進化するにつれ、ウェブサイトもそれに合わせて進化する必要があります。
00:02:13先ほど見たように、これらのツールを定義することで、エージェントが
00:02:18私たちのサイトを操作しやすくなります。
00:02:19デモがうまくいったのは、それがシンプルなHTMLフォームだったからです。
00:02:21しかし、実際のウェブサイトの多くはそれほど単純ではありません。
00:02:23そのためWebMCPには、扱う対象に応じて2つの異なるアプローチが用意されています。
00:02:28エージェントがブラウザを制御するための方法は2つあります。
00:02:31「宣言的API」は、先ほど見たHTMLフォームのようなシンプルなワークフロー用です。
00:02:35「命令的API」は、複数のページを持つ本格的なウェブアプリ用であり、
00:02:40それには追加の実装が必要になります。これについては後ほど詳しく説明します。
00:02:43現時点では公式ドキュメントはありませんが、Google Chrome Labsの
00:02:48WebMCPツール用リポジトリには2つのデモがあり、そのうち1つだけがホストされています。
00:02:52シンプルな航空券検索のデモと、公式のModel Context Protocolツールインスペクター拡張機能です。
00:02:56これをインストールすると、WebMCPが実装されているウェブサイトであれば、拡張機能を通じて
00:03:01それらのツールを検出できるようになり、他にもいくつか便利なことが可能になります。
00:03:05ツールの入力スキーマもそこに表示されます。
00:03:07現在、このページには「search_flights」というツールが1つだけあります。
00:03:10これを利用する方法として、2つのオプションが提示されています。
00:03:12AIモデルに入力させるカスタム引数を自分で設定するか、
00:03:16GeminiのAPIキーを設定し、普通の英語でユーザープロンプトを入力すれば、
00:03:21それに応じてページが制御されます。
00:03:22現時点ではこれらのデフォルト入力があります。
00:03:24それらを変更してみたところ、実際に航空券が検索され、多くの結果が表示されました。
00:03:28戻ってみると、今回のWebMCP旅行サイトには4つのツールがあり、
00:03:32そのうち3つは適用可能なフィルターになっていました。
00:03:35ページの入力引数も変化していました。
00:03:37別の引数を追加したところ、フィルター設定が更新されたという通知が表示されました。
00:03:41その設定に一致する便はありませんでしたが、すべてのフィルターが適用されていました。
00:03:44この過程でZenブラウザとChromeを切り替えて使用しましたが、それは
00:03:48WebMCPはどのブラウザでも使えるオープンなプロトコルとしてリリースされていますが、
00:03:54現時点ではChromeのCanary版でしか動作しないためです。
00:03:55誰もが利用できるように標準化されるまでは、そのような状況です。
00:03:58現時点での公式ツールの状況は以上です。
00:04:01ドキュメントはなく、デモは2つだけ。Chrome Canaryでしか動作せず、
00:04:05本来ブラウザエージェントでの使用を想定しているため、Claude Codeではそのまま使えません。
00:04:09そこで、システムにインストールできるカスタムのWebMCPブリッジを見つけました。
00:04:14これを使うと、MCPサーバーと拡張機能の両方が手に入ります。
00:04:16これにより、Claude CodeがWebMCPを使用して、ウェブサイトが提供するツールを
00:04:22操作したりナビゲートしたりできるようになります。
00:04:23サイトに実際にどう実装するか、まずはシンプルな方法から見ていきましょう。
00:04:27HTMLフォームで見た「宣言的API」では、
00:04:31HTMLフォーム内で「ツール名」「ツールの説明」「ツールのパラメータの説明」の
00:04:363つを宣言するだけで済みます。
00:04:37深く掘り下げる必要はありません。
00:04:39エージェントにこれらを追加させるだけでいいのです。
00:04:41WebMCPリポジトリのデモをリバースエンジニアリングして作成した2つのガイドを、
00:04:46Claude Codeに読み込ませました。
00:04:47その過程でいくつかの共通の問題に直面したため、
00:04:51途中でガイドを修正する必要がありました。
00:04:53これら両方のガイドは、すぐに使えるテンプレートを入手できるコミュニティ、
00:04:57AI Labs Proで公開しています。
00:04:58今回の動画や過去の動画のプロジェクトに直接組み込むことができます。
00:05:01主要な解説はこの動画で行っていますが、実際のファイルが必要な場合は、
00:05:05概要欄のリンクを確認してください。
00:05:06エージェントがこれらの宣言を追加すれば、あとはブラウザ側が
00:05:10HTMLからそれを読み取って処理してくれます。
00:05:122つ目の方法は、より複雑な操作やJavaScriptの実行が必要な場合の
00:05:17「命令的API」です。
00:05:18Next.jsアプリを初期化し、Claude CodeにNext.js用のガイドを渡したところ、
00:05:23それだけで実装を完了させることができました。
00:05:24Reactアプリでは、ライブラリフォルダに新しいファイルを作成し、
00:05:29サイトに必要なすべてのツールをそこで宣言します。
00:05:30これらがすべての関数であり、こちらがその定義です。
00:05:33しかし、これらのウェブアプリは非常に巨大になり、ツールが100個を超えることもあるため、
00:05:38Claude Codeでも発生する「コンテキスト過多で動作が破綻する」という
00:05:41同じ問題に直面します。
00:05:43そのため、ウェブサイトの全ツールを読み込むのではなく、
00:05:47そのページにあるツールだけを読み込むのが得策です。
00:05:48この概念を「コンテキストに応じた読み込み」と呼びます。
00:05:50これはClaude Codeに作成させたNext.jsアプリです。
00:05:53バックエンドも実装された、完全に機能する小規模なデモアプリです。
00:05:57現在はメインのホームページにいて、このサイトで利用可能なツールは3つだけです。
00:06:01カートページに移動すると、今度はツールが4つになり、名前も変わっていました。
00:06:05表示しているページによって、利用可能なツールが変化します。
00:06:09ここで「登録関数」が登場します。
00:06:11ホームページなどのページに移動するたびに「registerHomeTools」関数が実行され、
00:06:15ページを離れるときには「unregisterHomeTools」が実行されます。
00:06:18そのページに属するツールに基づいて、登録と登録解除を行うだけです。
00:06:23この場合、ブラウザだけに頼るのではなく、コード側でも
00:06:27統合を処理しています。
00:06:28実際には、Googleが想定し、各ブラウザが独自に実装するであろう
00:06:32ブラウザエージェントとしてWebMCPを使っているわけではありません。
00:06:34私たちは、Claude CodeをWebMCPに接続するブリッジを使用しており、
00:06:39これによってウェブサイトを制御しています。
00:06:40Claude Code自体をより使いこなしたい方のために、
00:06:44活用するための最新の方法10選についての動画も用意しています。
00:06:46このブリッジはコミュニティプロジェクトであり、命令的APIを使用する場合、
00:06:51このMCPサーバーではツールの切り替えがうまく機能しないという問題があります。
00:06:54サイトを開いたとき、チェックアウトページにいた状態で
00:06:58Claude Codeのセッションを開始しました。
00:06:59そこからホームページに戻るよう指示しても、ホームページで利用可能な
00:07:03ツールを認識することができませんでした。
00:07:04ホームページから商品ページに移動すると「カートに追加」ボタンが表示されましたが、
00:07:08エージェントは商品ページにいても、そのボタンを認識できていないようでした。
00:07:11そのため、このデモでは手動で商品をカートに追加する必要がありました。
00:07:14しかし、チェックアウトを完了するよう指示すると、詳細を自動的に入力し、
00:07:18注文を確定させてショッピングフロー全体を完結させました。
00:07:21これがこのMCPの制限の一つですが、ここでもう一つのポイントがあります。
00:07:25WebMCPは、主要なブラウザベンダーやテック企業が参加しているオープンソースプロジェクトです。
00:07:30しかし現在、これをサポートしているブラウザはChrome Canaryのみであり、想定されている
00:07:34エージェントは、ブラウザに直接組み込まれたGoogle独自のAIであるGeminiです。
00:07:38もしウェブサイトのオーナーが今日WebMCPを実装したとしても、
00:07:42そのツールをネイティブに利用できるエージェントはGeminiだけです。
00:07:44Claude Codeにはコミュニティ製のブリッジが必要で、それはコンテキスト読み込み時に壊れてしまいます。
00:07:49Google以外のエージェントは、現状では不利な立場にあります。
00:07:51では、Claudeが追いつくことは可能でしょうか？
00:07:52もちろんです。彼らも独自のブラウザ拡張機能を持っています。
00:07:55それも一種のブラウザエージェントなので、Geminiと同じように
00:07:59これらのツールを検出できるようになる可能性があります。
00:08:00しかし問題は、Chromeに最初から入っているGeminiを使うのではなく、
00:08:04どれだけの人がわざわざClaudeの拡張機能をインストールするかということです。
00:08:08Chromeには何十億ものユーザーがおり、彼らは何もインストールする必要がありません。
00:08:11私たちの見解では、Googleは他者を締め出そうとしているわけではありません。
00:08:13単に、すでに持っているアーキテクチャとユーザー層を活用しているだけです。
00:08:17自社が所有するブラウザの中で、同梱されているエージェントで最もよく機能する
00:08:21オープンスタンダードというわけです。
00:08:22だからといって、実装すべきではないという意味ではありません。
00:08:23この標準自体は非常に有用であり、どの方のエージェントが最初に恩恵を受けるかにかかわらず、
00:08:28サイトをエージェント対応にすることは賢明な判断です。
00:08:30これを実装する場合、いくつか知っておくべきことがあります。
00:08:33仕様では、1ページあたりのツール数は50個以内にすることが推奨されています。
00:08:36これはアプリケーションのすべてを公開するためのものではありません。
00:08:38そのページでユーザーが実際に行いたいであろう、
00:08:42焦点を絞った特定のアクションのためのものです。
00:08:43また、ツールの説明は想像以上に重要です。
00:08:46エージェントはそれらの説明を読んで、どのツールを呼び出すか判断します。
00:08:49説明が曖昧だと、エージェントは間違ったツールを選んだり、無視したりしてしまいます。
00:08:53サイトを一度も見たことがない人に説明するようなつもりで書いてください。
00:08:57そして、これはまだ実験段階です。
00:08:58APIの仕様は今後変わる可能性があります。
00:09:003月リリースのChrome 146でより広範なサポートが開始される予定ですが、
00:09:03それまでは開発者向けのトライアル版です。
00:09:05まだ本番環境には導入しないでください。
00:09:06このチャンネルをご覧の方は、AIに追いつくには強固な技術的基盤が必要だとご存知でしょう。
00:09:11だからこそ、私はBrilliantが大好きです。
00:09:13MIT、ハーバード、スタンフォードなどの超一流の講師陣によって作られた、
00:09:17体験型レッスンが受けられるインタラクティブなプラットフォームです。
00:09:19特におすすめなのは、クラスタリングと分類、そしてAIの仕組みに関するコースです。
00:09:23隠れたパターンを発見し、大規模言語モデルの背後にある論理を
00:09:27対話形式で学ぶことができます。
00:09:28画面のカタログにある通り、基礎数学から高度なデータサイエンス、
00:09:33コンピュータサイエンスまで、非常に多彩なコースが用意されています。
00:09:37またBrilliantは、視聴者の皆さんに年間プレミアムプランの20%オフを提供しています。
00:09:42プラットフォーム上のすべてのコンテンツに毎日無制限でアクセスできます。
00:09:4430日間無料でBrilliantを体験するには、brilliant.org/ailabsにアクセスするか、
00:09:50画面のQRコードをスキャンするか、概要欄のリンクをクリックしてください。
00:09:53今日から学習習慣を身につけ、Brilliantでスキルを
00:09:56次のレベルへと引き上げましょう。
00:09:57今回の動画は以上です。
00:09:59もしチャンネルを支援し、このような動画制作を続けてほしいと思ってくださるなら、
00:10:03下の「スーパーサンクス」ボタンから応援をお願いします。
00:10:06いつもご視聴ありがとうございます。それでは、また次の動画でお会いしましょう。