Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

ブラウザの AI 機能による e コマースの購入手続きの強化

1. はじめに

最新のウェブ開発では、AI の使用にクラウドベースのラウンドトリップを使用する代わりに、Chrome は、翻訳用の小規模なエキスパートモデルから、高性能な蒸留されたフル言語モデルまで、すべてをユーザーのデバイス上でプライベートに実行できる組み込みの AI API の提供を開始しました。ユーザーにもデベロッパーにもトークン費用はかかりません。

同時に、AI エージェントはユーザーがウェブアプリケーションを操作する新しい方法を提供します。WebMCP を使用してウェブエクスペリエンスをエージェント対応にすることで、トークンの使用量を削減しながら、スクリーンショットや DOM スクラッピングを必要とする従来のアクチュエーションよりも正確な結果を得ることができます。

この Codelab では、アウトドア用品の e コマースサイトである Mont-Royal Plein Air を使用します。組み込みの AI API と WebMCP を構築して統合する方法を学びます。

閲覧履歴からユーザーの意図を推測し、デバイス上のモデルを使用してユーザー向けのおすすめを動的に作成します。
ツールエージェントとブラウザアシスタントがサイトのナビゲーション、商品とおすすめの検査、ユーザーのショッピングカートの管理に使用できるツールを公開します。
（省略可）デバイス上の軽量なエキスパートモデルを使用して、サイトをその場で翻訳します。
（省略可）基本的なサイト内検索を、外部エージェントが使用するのと同じツールで動作するサイト内エージェントに変換します。

学習内容

Prompt API を使用して、構造化された JSON 出力を強制する方法。
WebMCP ツールと戦略を登録する方法、ツールの構成と粒度について考える方法。
（省略可）Translator API を使用して、デバイス上のエキスパートモデルでコンテンツをすばやく翻訳する方法。
（省略可）WebMCP ツールを自分で呼び出す方法。

前提条件

個人の Google アカウントと Google Cloud。
Google Chrome バージョン 150 以降、または Canary、Dev、Beta チャンネルで、#enable-webmcp-testing フラグと #devtools-webmcp-support フラグが有効になっている。
HTML、CSS、JavaScript、TypeScript の知識。
JSON スキーマに関する知識。

2. プロジェクトの設定

Google アカウント

個人の Google アカウントをお持ちでない場合は、Google アカウントを作成する必要があります。

個人の Google アカウントを使用して Google Cloud コンソールにログインします。

課金を有効にする

個人用の請求先アカウントを設定するには、Cloud コンソールで課金を有効にします。

プロジェクトの作成（省略可）

このラボで使用する現在のプロジェクトがない場合は、こちらで新しいプロジェクトを作成します。

Cloud Shell エディタを開く

このリンクをクリックすると、Cloud Shell エディタに直接移動します。
本日、承認を求めるメッセージが表示された場合は、[承認] をクリックして続行してください。
ターミナルが画面の下部に表示されない場合は、ターミナルを開きます。
- [表示] をクリックします。
- [ターミナル] をクリックします。

プロジェクトを設定する

ターミナルで、次のコマンドを使用してプロジェクトを設定します。
```
gcloud config set project [PROJECT_ID]
```
例: gcloud config set project lab-project-id-example
プロジェクト ID を忘れた場合は、gcloud projects list を使用してすべてのプロジェクト ID を一覧表示できます。
次のメッセージが表示されます。Updated property [core/project].
WARNING が表示され、Do you want to continue (Y/n)? と表示された場合は、プロジェクト ID が正しく入力されていない可能性があります。n を押して Enter を押し、gcloud config set project コマンドをもう一度実行してみてください。

ローカルとワークスペースの設定

ターミナル（または Cloud Shell ターミナル）で、プロジェクトリポジトリのクローンを作成し、プロジェクトディレクトリに移動します。
```
git clone https://github.com/GoogleChromeLabs/codelabs mont-royal
cd mont-royal
```
ecommerce-ai-enhancements/starter フォルダに移動します。
```
cd ecommerce-ai-enhancements/starter
```
pnpm を使用して依存関係をインストールします。
```
pnpm install
```
ローカル開発用サーバーを起動します。
```
pnpm dev
```
ブラウザで http://localhost:5173 を開き、Mont-Royal Plein Air ストアを表示します。

（省略可）WebMCP インスペクタ拡張機能をインストールする

WebMCP の操作を容易にするため、WebMCP Model Context Tool Inspector をインストールできます。インストールしたら、Gemini API キーを取得して使用する必要があります。

AI Studio に移動します。
[API キーを作成] ボタンをクリックして、この手順の前に設定したプロジェクトに関連付けられた新しい Gemini API キーを生成します。
WebMCP モデルコンテキストツールインスペクタ（サイドパネルに開きます）を開き、[Update Gemini API Key]（Gemini API キーを更新）ボタンをクリックします。
ポップアップに API キーを貼り付けて保存します。

この拡張機能には、WebMCP を使用できる基本的なエージェントが含まれています。これにより、DevTools を介して WebMCP ツールを直接呼び出すのではなく、このエージェントを介してウェブサイトを試すことができます。

3. ウェブ上の組み込み AI モデル

Prompt API とは

Prompt API を使用すると、ウェブアプリケーションはユーザーのデバイス上で完全に実行される小規模なマルチモーダル言語モデルに直接アクセスできます。推論はローカルで実行されるため:

クラウドレイテンシのゼロ: ネットワークの往復やバックエンドサーバーのキューイングがありません。
デフォルトで非公開: プロンプトと、プロンプトに渡されるコンテキストは、デバイス外に送信されません。
費用ゼロ: 推論は、トークン課金やクラウドホスティングの費用なしでクライアントハードウェアで実行されます。
オフライン対応: インターネット接続がなくても確実に動作します。

Chrome では、Prompt API はグローバル LanguageModel インターフェースを介してアクセスされます。

// 1. Set your expected inputs and outputs. This is multimodal, so you can
// include other types here, too
const languages = {
   expectedInputs: [{type: "text", languages: ["en"]}],
   expectedOutputs: [{type: "text", languages: ["en"]}],
}

// 2. Check availability. Always pass in your expected inputs and outputs,
// as some models may only support some inputs and outputs
const availability = await LanguageModel.availability(languages);
// 'available', 'downloading', or 'unavailable'

// 3. Create an isolated session with system prompt and language constraints
const session = await LanguageModel.create({
  ...languages,
  // Optional: add initial context to your session, like a system prompt
  initialPrompts: [
   {
      role: 'system',
      content: 'You are an expert outdoors sales assistant...'
   }
  ]
});

// 4. Define your expected output as JSON Schema
const schema = {
   //...
}

// 5. Prompt the model (supports plain text or structured models)
const result = await session.prompt('Recommend a 3-season tent footprint.', {
  responseConstraint: schema,
});

演習 1: ジャーニーベースの推奨事項

e コマースサイトには通常、「よく一緒に購入されている商品」のカルーセルやアップセルがあります。アウトドア関連のサイトなどでは、閲覧履歴に基づいておすすめを構築する方が有用な場合があります。

このため、3 段階のレコメンデーションパイプラインを構築します。

ジャーニープロファイラ: Prompt API を使用して、ユーザーのクロノロジカルなブラウジングタイムラインを分析し、ユーザーの真の冒険の意図を推測します。
商品クエリ: そのインテントから、関連アイテムを取得するために、偽の商品バックエンドに API リクエストを行います。
商品のおすすめ: これらの商品を Product API に渡してランク付けし、ユーザーが閲覧しているものと最も関連性の高い 5 つの商品を返します。

タスク 1.1: Prompt API の初期化

Prompt API を使用するたびに個別に初期化するのではなく、呼び出しを 1 つのファイルに集約し、システムプロンプトによる作成をメモ化して、同じエージェントに対する複数の呼び出しの起動時間を短縮します。

ファイル src/ai/prompt-api.ts に移動し、27 ～ 58 行目の getPromptSession() を検査します。

export async function getPromptSession(
  systemPrompt: string = '',
  options: { signal?: AbortSignal } = {}
): Promise<LanguageModel>

キャッシュに保存されたベースセッションを再利用します。21 行目には、システムプロンプトをキーとするキャッシュマップ baseSessions がすでに存在します。新しいベースモデルを clone() する代わりに再利用すると、起動時間が短縮され、各セッションが互いに干渉することなくコア設定が継承されます。クローンを返します。呼び出し元は、キャッシュに保存されたベースを破棄することなく、クローンを自由に操作できます（destroy() など）。
API の機能検出を行います。API が存在するかどうかを検出し、存在しない場合はエラーをスローします。
モダリティと言語を宣言します。組み込みモデルはマルチモーダル入力をサポートできます。必要なモードとサポートする言語を宣言する必要があります。LLM に渡すコンテンツはすべて英語です。
作成する前に空き状況を確認します。API が存在していても、要件を満たすモデルが存在しない場合があります。存在するかどうかを確認します。そうでない場合は、エラーをスローします。まだダウンロードされていない場合は、レポートのダウンロードの進行状況を報告します。
セッションを作成します。新しい Prompt API セッションを作成するためのオプションと、システムプロンプト（含まれている場合）を設定します。

タスク 1.2: ジャーニープロファイラを実装する

src/ai/journey-profiler.ts ファイルに移動し、42 ～ 100 行目のターゲット関数を調べます。

export async function inferJourneyProfile(
  context: ProfilerInputContext,
  catalogMap: ReadonlyMap<string, Product>
): Promise<JourneyProfile>

タスク 1 の関数を使用して、使用する新しいプロンプトセッションを生成します。
構造化された戻り値の JSON スキーマとして journeyProfileSchema を使用して、指定されたプロンプトテキストでモデルにプロンプトを表示します。
プロンプトの出力を解析し、ターゲットカテゴリの重複を削除します。
ハードコードされた文字列の戻り値を、プロンプトの実際の結果に置き換えます。
セッションが終了したら破棄してメモリを解放します。

タスク 1.3: 相乗効果の再ランキングを実装する

src/ai/synergy-reranker.ts ファイルに移動し、30 ～ 71 行目のターゲット関数を調べます。

export async function rankComplementaryGear(
  profile: JourneyProfile,
  candidates: readonly Product[],
  currentProduct?: Product | null,
  cartProducts?: readonly Product[],
  limit: number = 5
): Promise<readonly RecommendedItem[]>

タスク 1 の関数を使用して、使用する新しいプロンプトセッションを生成します。
指定されたプロンプトテキストと生成されたスキーマを使用してモデルにプロンプトを表示します。
プロンプトの出力を解析します。
assembleRecommendations を使用して、組み立てられたレコメンデーションリストを返します。
セッションが終了したら破棄してメモリを解放します。

推奨事項パイプラインを検証する

Chrome を開いて http://localhost:5173/catalog/tent-mont-tremblant-3p に移動します。
[おすすめ] セクションまで下にスクロールします。
5 つのコンパニオンカードが、ランダムな商品ではなく、スマートキットのペア設定（グラウンドシート、スリーピングパッド、軽量ペグなど）を反映するように更新される様子を確認します。
Chrome DevTools Console を開いて、両方の推論ステップのリアルタイム実行時間を調べます。

（省略可）タスク 1.4: その他の組み込み AI モデルを調べる

Translator API エキスパートモデルなど、他にもいくつかの組み込み AI モデルを利用できます。このコードベースのコンポーネントは、現在の言語の変更をリッスンして翻訳をリクエストするサービスにすでに接続されています。すべてを接続するのはあなたの仕事です。

ファイル src/ai/translator.ts に移動します。

29 ～ 45 行目で、ターゲット関数 createTranslator を調べます。

export async function createTranslator(
  targetLang: SupportedLanguage
): Promise<Translator | null>

Translator API のサポートを確認し、ターゲット言語が英語でないことを確認します（コンテンツはデフォルトで英語です）。
英語からターゲット言語への言語ペアを作成し、そのペアが利用可能かどうかを確認します。
翻訳者のオプションを作成し、モデルのダウンロードの進行状況を表示するモニターを接続します。
初期化された変換ツールを返します。

次に、50 ～ 58 行目のターゲット関数 translate を調べます。

export async function translate(
  text: string,
  targetLang: SupportedLanguage
): Promise<string>

targetLang を渡して getCachedTranslator で利用可能な翻訳ツールがあるかどうかを確認します。ない場合は、クリーンなテキストを返します。
ある場合は、翻訳ツールを使用してクリーンなテキストを翻訳します。

ファイル src/ai/translator.ts に移動します。

204 行目のターゲット関数 render を調べます。

export async function translate(
  text: string,
  targetLang: SupportedLanguage
): Promise<string>

言語選択ツールコンポーネントを有効にする

4. WebMCP を使用してエージェントエクスペリエンスを改善する

WebMCP とは

ユーザーが自律型エージェントや共同ブラウジングエージェントを使用し始めるにつれて、ウェブサイトが適応することが重要になっています。従来、エージェントはアクチュエーション（スクリーンショットの撮影、DOM とユーザー補助ツリーのスクレイピング）に依存して、サイトとのやり取りの方法を判断していました。この方法は時間がかかり、脆弱でエラーが発生しやすく、ユーザートークンを無駄にします。

WebMCP は、デベロッパーがエージェントにツールを直接提供して、エージェントが現在表示しているページを操作できるようにすることで、この問題を解決します。これらのツールをサポートするエージェントは、コーディングハーネスのツールと同様に、明確で構造化された入力と戻り値を使用して、これらのツールを使用できます。

// Register a tool directly on document.modelContext
document.modelContext.registerTool({
  name: 'get_product_specs',
  title: 'Get Product Specs',
  description: 'Retrieve technical specifications for the active product.',
  inputSchema: {
    type: 'object',
    properties: {
      // ...
    },
  },
  annotations: {
    readOnlyHint: true, // Informs the agent this tool causes no side-effects
  },
  execute: async (input) => {
    return {
      weight: '1.8 kg',
      capacity: '3 persons',
      seasons: '3-season',
    };
  },
});

エージェントがウェブページに接続すると、document.modelContext.getTools() をクエリします。登録された各ツールは次のものを公開します。

name: エージェントがツールを実行するときに使用するプログラマティックツール ID（'get_product_specs' など）。
title: インスペクタとエージェントインターフェースで使用される、人が読める形式の表示ラベル（例: 'Get Product Specs'）。
description: ツールが何を行うか、いつ呼び出すかをモデルに伝えるプレーンテキストの説明。これは、エージェントがツールを呼び出すかどうかを判断する方法であるため、説明的なものにしてください。
inputSchema: 受け入れられる引数を定義する JSON スキーマ。
annotations: 状態の副作用を引き起こさない読み取り専用ツール用の { readOnlyHint: true } などの動作ヒント。
execute: ツールが呼び出されたときに実行される非同期関数。

タスク 2.1: おすすめとプロダクトのツール

まず、ツールを登録して、エージェントが前の演習で作成したおすすめを取得できるようにします。

ファイル src/components/product/ForYouSection.ts に移動します。

71 ～ 94 行目の registerWebMCPTools() を調べます。

private registerWebMCPTools(): void

WebMCP がサポートされているかどうかを確認します。
該当する場合は、ツールを登録します。

エージェントがツールを選択したくなるようなタイトルと説明を選択します。ここではプロンプトエンジニアリングを検討してください。
入力がないため、空のオブジェクト JSON スキーマを含めます。
これは読み取り専用のツールです。
実行関数で、recommendationStore を使用して現在の推奨事項のセットを取得し、現在のプロダクト ID とプロダクトの推奨事項のセットを返します。
中止シグナルを追加してキャッチし、エラーがスローされないようにします。これにより、コンポーネントがマウント解除されたときにツールが適切に削除されます。

ファイル src/views/ProductView.ts に移動します。

同じプロセスを繰り返して get_current_product ツールを登録します。今回は、おすすめ商品だけでなく、商品全体も返します。

タスク 2.2: カートドロワーのツール

ファイル src/components/cart/CartDrawer.ts に移動します。

83 ～ 114 行目の registerWebMCPTools() を調べます。

private registerWebMCPTools(): void

view_cart ツールを登録します。

inputSchema は、単一のブール値オプション openDrawer を含むオブジェクトである必要があります。
読み取り専用にする必要があります。
execute 関数の処理の一部として入力を読み取り、カートを表示するか非表示にするかを決定し、recommendationStore を更新してから、カートの概要を返します。

manage_cart ツールを登録します。

inputSchema は、items を含むオブジェクトである必要があります。items は、productID、add、remove、update action 列挙型と整数 quantity を含むオブジェクトの配列です。
execute 関数はアイテムを this.updateCart に渡す必要があります

タスク 2.3: 言語切り替えツール

言語ツールを外部エージェントに公開することで、WebMCP をさらに活用できます。

ファイル src/components/navigation/LanguagePicker.ts に移動します。

61 ～ 63 行目の registerWebMCPTools() を調べます。

private registerWebMCPTools(): void

switch_language ツールを登録します。
- inputSchema には、SUPPORTED_LANGUAGE_CODES の列挙型である language プロパティが必要です。
- その execute 関数は、指定された言語で this.switchLanguage を呼び出す必要があります。

自律型エージェントがストア内を移動したり、商品ページに移動したり、カテゴリを閲覧したり、検索を開始したりできるようにします。

ファイル src/components/navigation/SiteHeader.ts に移動します。

155 ～ 171 行目の registerWebMCPTools() を調べます。

private registerWebMCPTools(): void

WebMCP がサポートされているかどうかを確認します。
search ツールを登録します。
- 入力スキーマは query 文字列を受け取ります。
- execute で this.search(input?.query) を呼び出します。
go_to_catalog ツールを登録します。
- 入力スキーマは、省略可能な activity（ACTIVITIES の列挙型）と category（PRODUCT_CATEGORIES の列挙型）を受け入れます。
- execute で this.goToCatalog(input?.activity, input?.category) を呼び出します。
get_categories_and_activities ツールを登録します。
- 入力パラメータのない読み取り専用ツール。
- execute で this.getCategoriesAndActivities() を呼び出します。
go_to_product ツールを登録します。
- 入力スキーマには productId 文字列が必要です。
- execute で this.goToProduct(input?.productId) を呼び出します。

WebMCP インスペクタで確認する

Chrome で http://localhost:5173/catalog/tent-mont-tremblant-3p を再読み込みし、商品ページに移動します。
Chrome DevTools > [Application] > [WebMCP] を開きます。
WebMCP ツール（get_recommendations、get_current_product、view_cart、manage_cart、switch_language、search、go_to_catalog、get_categories_and_activities、go_to_product）が表示されます。
いずれかをクリックすると、詳細とパラメータが表示されます。
パラメータを含むものを 1 つ選択し、いくつか選択して [ツールを実行] をクリックすると、動作を確認できます。
（省略可）WebMCP モデルコンテキストツールインスペクタをインストールして設定した場合は、開きます。Chrome のサイドパネルに開きます。チャットインターフェースを使用して、ツールを呼び出す必要があると思われるアクションを実行するようにエージェントに指示し、エージェントの応答を確認します。

5. （省略可）オンサイトエージェントの構築

ページ内での WebMCP ツールの呼び出し

WebMCP ツールは、外部のブラウザ拡張機能やサードパーティのボットだけを対象としたものではありません。独自のアプリケーションから直接呼び出すことができます。クライアントサイドのコードは、document.modelContext.getTools() をクエリすることで、ツールを動的に検出して実行できます。

これを使用して、サイト内 AI ショッピングアシスタントを構築し、検索バーを自然言語入力に基づく商品検索ツールに変えることができます。多数のファセットフィルタを調整するカスタムの命令型コードを記述する代わりに、検索バーから Prompt API に自然言語クエリを渡すことができます。Prompt API は、呼び出すページ内 WebMCP ツールを決定します。

JavaScript から WebMCP ツールを検出して呼び出すには:

// getTools() returns a Promise — it must be awaited.
const tools = await document.modelContext.getTools();
const tool = tools.find(t => t.name === 'list_items');

const json = await document.modelContext.executeTool(tool, args);
const result = JSON.parse(json); // executeTool resolves with a DOMString

各カタログのサイドバーファセットを WebMCP に公開して、エージェント（およびページ内検索アシスタント）がフィルタをプログラムで切り替えられるようにします。

src/components/facets/ の各ファセットコンポーネントは、クラスのヘルパーメソッドと src/utils/filter-schemas.ts のエクスポートされた入力スキーマをすでに提供しています。

src/components/facets/ActivityFacet.ts で以下を実行します。
- activityFilterSchema を使用して activity_filter を登録します。
- execute で this.filterActivity(input?.activity, input?.selected) を呼び出します。
src/components/facets/CategoryFacet.ts で以下を実行します。
- categoryFilterSchema を使用して category_filter を登録します。
- execute で this.filterCategory(input?.category, input?.selected) を呼び出します。
src/components/facets/ConditionFacet.ts で以下を実行します。
- conditionFilterSchema を使用して condition_filter を登録します。
- execute で this.filterCondition(input?.condition, input?.selected) を呼び出します。
src/components/facets/PriceFacet.ts で以下を実行します。
- priceFilterSchema を使用して price_filter を登録します。
- execute で this.filterPrice(input?.priceRange || input?.bracket, input?.selected) を呼び出します。
src/components/facets/WeightFacet.ts で以下を実行します。
- weightFilterSchema を使用して weight_filter を登録します。
- execute で this.filterWeight(input?.weightRange || input?.bracket, input?.selected) を呼び出します。
src/components/facets/RatingFacet.ts で以下を実行します。
- ratingFilterSchema を使用して rating_filter を登録します。
- execute で this.filterRating(input?.minRating || input?.rating, input?.selected) を呼び出します。
src/components/facets/SearchFacet.ts で以下を実行します。
- keywordFilterSchema を使用して keyword_filter を登録します。
- execute で this.updateKeyword(input?.keyword) を呼び出します。

ステップ 2 で学習したように、WebMCP のサポートを確認し、.catch(() => {}) を使用して { signal: this.signal } を渡すことを忘れないでください。

タスク 3.2: カタログビューツール

次に、カタログレベルのリスティング、フィルタのリセット、セマンティック検索ツールを document.modelContext に登録します。

ファイル src/views/CatalogView.ts に移動します。

125 ～ 140 行目の registerWebMCPTools() を調べます。

private registerWebMCPTools(): void

WebMCP がサポートされているかどうかを確認します。
list_items ツールを登録します。
- 入力パラメータは受け取らず、読み取り専用です。
- その execute 関数は this.getItemsSummary() を呼び出す必要があります。
reset_filters ツールを登録します。
- 入力パラメータは受け取りません。
- その execute 関数は this.resetFilters() を呼び出す必要があります。
semantic_catalog_filter ツールを登録します。
- semanticCatalogFilterSchema を使用してください。
- その execute 関数は interpretAndApplySemanticFilter(input.query) を呼び出す必要があります。

タスク 3.3: セマンティックフィルタエージェントをオーケストレートする

では、配線を行いましょう。このタスクは、検索を semantic_catalog_filter ツールを強化するセマンティックパイプラインに変換します。

ファイル src/ai/catalog-semantic-filter.ts に移動します。

84 ～ 88 行目の prewarmSemanticFilterSession() を調べます。

export async function prewarmSemanticFilterSession(): Promise<void>

warmSession がすでに存在するかどうかを確認し、存在する場合は早期に返します。
getPromptSession() を使用して SEMANTIC_FILTER_SYSTEM_PROMPT で Prompt API セッションを事前準備し、warmSession に保存します。try/catch ブロックでラップして、事前ウォーミングが失敗した場合でも検索作成が正常にフォールバックできるようにします。

93 ～ 134 行目の inferSearchFacets() を調べます。

async function inferSearchFacets(
  searchTerm: string,
  cachedJourney: JourneyProfile | null
): Promise<{ parsed: SemanticFilterResponse; cacheHit: boolean }>

利用可能な場合は warmSession から事前ウォーミングされたセッションを要求します（また、warmSession を null にリセットします）。または、getPromptSession(SEMANTIC_FILTER_SYSTEM_PROMPT) を使用して新しいセッションを作成します。
responseConstraint として semanticFilterSchema を使用して、promptText でモデルにプロンプトを入力します。
返された JSON を解析し、解析結果を cacheKey を使用して永続キャッシュに保存し、finally ブロックでセッションを破棄します。

139 ～ 270 行目の applyFacetsViaWebMCP() を調べます。

async function applyFacetsViaWebMCP(
  searchTerm: string,
  parsed: SemanticFilterResponse
): Promise<{ appliedFilters: SemanticFilterResult['appliedFilters']; toolsExecuted: string[] }>

await document.modelContext.getTools() を使用して、document.modelContext に登録されているツールを検出します。
await executeFacet('reset_filters', {}) を呼び出してフィルタをリセットし、クリーンな状態から開始します。
await Promise.all(facetTasks) を使用して、アクティブなファセットを同時に適用します。

272 ～ 316 行目の interpretAndApplySemanticFilter() を調べます。

export async function interpretAndApplySemanticFilter(
  searchTerm: string
): Promise<SemanticFilterResult>

inferSearchFacets(searchTerm, cachedJourney) を呼び出して検索ファセットを推測します。
applyFacetsViaWebMCP(searchTerm, parsed) を使用して、推論されたファセットをカタログに適用します。

ページ内エージェントを確認する

http://localhost:5173/catalog に移動します。
上部の検索バーに「"lightweight 3 season tent for wet hikes"」と入力します。
Prompt API がリクエストを解析し、activity_filter（ハイキング）、category_filter（テント）、condition_filter（濡れ）を呼び出し、手動でチェックボックスをクリックすることなく、カタログを一致するギアに瞬時に絞り込む様子をご覧ください。

6. 学習した内容

これで操作は完了です。e コマースアプリケーションを、デバイス上の AI と標準のウェブプラットフォーム API のみで動作するインテリジェントなエージェントフォワードエクスペリエンスに変換しました。

作成した内容:

オンデバイス Prompt API: LanguageModel を使用してユーザーのブラウジングタイムラインを合成し、リアルタイムの JourneyProfile コンテキストを生成しました。また、構造化された JSON スキーマ（responseConstraint）を使用して rankComplementaryGear シナジーエンジンを構築しました。
WebMCP コンポーネントツール: document.modelContext を介して UI コンポーネント（get_recommendations、get_current_product、view_cart、manage_cart）全体で登録されたモジュール型のカプセル化ツール。
エージェント転送アーキテクチャ: Chrome WebMCP Inspector 拡張機能を使用して、ツールの実行をテストして検証しました。
オンサイトのページ内エージェント: ブラウザでクライアントサイドのツールを直接調整し、サイトのヘッダーの検索バーから多面的な自然言語カタログ検索を実行します。
オンデバイス AI モデルの専門化: Translator を使用した動的なオンデバイス翻訳を検討しました。

要点:

低レイテンシと高いプライバシー: Gemini Nano などのオンデバイスモデルでは、クラウド API キー、ネットワークレイテンシ、データ漏洩の懸念が解消されます。
構造化された出力が不可欠: responseConstraint で JSON スキーマを使用すると、クリエイティブなテキスト生成が信頼性の高い型安全なアプリケーションロジックに変わります。
WebMCP は AI エージェント向けにウェブを準備します: ツールを DOM に直接登録することで、内部の補助機能と外部の自律型ブラウザエージェントの両方が、検証済みの決定論的なアクションを利用できるようになります。
モデルに提案させるが、実行はさせない: 登録したツールの enum にモデルを制限し、結果を自分でディスパッチすることで、エージェントの動作を監査可能にし、アクションの捏造を防ぐことができます。

ブラウザの AI 機能による e コマースの購入手続きの強化

1. はじめに

学習内容

前提条件

2. プロジェクトの設定

Google アカウント

課金を有効にする

プロジェクトの作成（省略可）

Cloud Shell エディタを開く

プロジェクトを設定する

ローカルとワークスペースの設定

（省略可）WebMCP インスペクタ拡張機能をインストールする

3. ウェブ上の組み込み AI モデル

Prompt API とは

演習 1: ジャーニーベースの推奨事項

タスク 1.1: Prompt API の初期化

タスク 1.2: ジャーニープロファイラを実装する

タスク 1.3: 相乗効果の再ランキングを実装する

推奨事項パイプラインを検証する

（省略可）タスク 1.4: その他の組み込み AI モデルを調べる

4. WebMCP を使用してエージェントエクスペリエンスを改善する

WebMCP とは

タスク 2.1: おすすめとプロダクトのツール

タスク 2.2: カートドロワーのツール

タスク 2.3: 言語切り替えツール

タスク 2.4: ナビゲーションツールを保存する

WebMCP インスペクタで確認する

5. （省略可）オンサイトエージェントの構築

ページ内での WebMCP ツールの呼び出し

タスク 3.1: サイドバーのファセットツール

タスク 3.2: カタログビューツール

タスク 3.3: セマンティックフィルタエージェントをオーケストレートする

ページ内エージェントを確認する

6. 学習した内容

作成した内容:

要点:

ブラウザの AI 機能による e コマースの購入手続きの強化

1. はじめに

学習内容

前提条件

2. プロジェクトの設定

Google アカウント

Google Cloud コンソールにログインする

課金を有効にする

プロジェクトの作成（省略可）

Cloud Shell エディタを開く

プロジェクトを設定する

ローカルとワークスペースの設定

（省略可）WebMCP インスペクタ拡張機能をインストールする

3. ウェブ上の組み込み AI モデル

Prompt API とは

演習 1: ジャーニーベースの推奨事項

タスク 1.1: Prompt API の初期化

タスク 1.2: ジャーニー プロファイラを実装する

タスク 1.3: 相乗効果の再ランキングを実装する

推奨事項パイプラインを検証する

（省略可）タスク 1.4: その他の組み込み AI モデルを調べる

4. WebMCP を使用してエージェント エクスペリエンスを改善する

WebMCP とは

タスク 2.1: おすすめとプロダクトのツール

タスク 2.2: カートドロワーのツール

タスク 2.3: 言語切り替えツール

タスク 2.4: ナビゲーション ツールを保存する

WebMCP インスペクタで確認する

5. （省略可）オンサイト エージェントの構築

ページ内での WebMCP ツールの呼び出し

タスク 3.1: サイドバーのファセット ツール

タスク 3.2: カタログ ビューツール

タスク 3.3: セマンティック フィルタ エージェントをオーケストレートする

ページ内エージェントを確認する

6. 学習した内容

作成した内容:

要点:

タスク 1.2: ジャーニープロファイラを実装する

4. WebMCP を使用してエージェントエクスペリエンスを改善する

タスク 2.4: ナビゲーションツールを保存する

5. （省略可）オンサイトエージェントの構築

タスク 3.1: サイドバーのファセットツール

タスク 3.2: カタログビューツール

タスク 3.3: セマンティックフィルタエージェントをオーケストレートする