Улучшение процесса оформления заказа в электронной коммерции с помощью возможностей искусственного интеллекта в браузере.

1. Введение

Современная веб-разработка предлагает альтернативу облачным сервисам для использования ИИ. Chrome начал поставлять встроенные API для ИИ , позволяющие использовать всё — от небольших экспертных моделей для перевода до мощных упрощенных моделей для работы с языками, — и всё это без каких-либо затрат для вас или ваших пользователей, запускаемых в приватном режиме на их устройствах.

В то же время, агенты искусственного интеллекта предлагают пользователям новый способ взаимодействия с веб-приложениями, и подготовка вашего веб-агента к работе с WebMCP может помочь сократить использование токенов, обеспечивая при этом более точные результаты, чем традиционные методы активации, требующие скриншотов и сбора данных из DOM.

В этом практическом занятии вы будете работать над проектом Mont-Royal Plein Air , сайтом электронной коммерции по продаже товаров для активного отдыха. Вы научитесь создавать и интегрировать встроенные API для искусственного интеллекта и WebMCP для:

  1. Определяйте намерения пользователя на основе истории просмотров и динамически формируйте для него рекомендации, используя модели, установленные на устройстве.
  2. Предоставьте доступ к инструментам, которые агенты и помощники браузера могут использовать для навигации по сайту, просмотра товаров и рекомендаций, а также управления корзиной покупок пользователя.
  3. (Необязательно) Переводите свой сайт в режиме реального времени, используя небольшие, встроенные в устройство экспертные модели.
  4. (Необязательно) Преобразовать базовый поиск по сайту в интерактивного агента, работающего на том же уровне, что и внешние агенты.

Что вы узнаете

  • Как использовать API Prompt и обеспечить вывод структурированного JSON-данных.
  • Как регистрировать инструменты WebMCP и стратегии для обдумывания состава и детализации инструментов.
  • (Необязательно) Как использовать API переводчика для быстрого перевода контента с помощью экспертной модели, работающей непосредственно на устройстве.
  • (Необязательно) Как самостоятельно вызывать инструменты WebMCP.

Предварительные требования

  • Личный аккаунт Google и Google Cloud.
  • Версия Google Chrome 150+ или каналы Canary, Dev или Beta с включенными флагами #enable-webmcp-testing и #devtools-webmcp-support .
  • Знание HTML, CSS, JavaScript и TypeScript.
  • Знание JSON Schema .

2. Настройка проекта

аккаунт Google

Если у вас еще нет личного аккаунта Google, вам необходимо его создать .

Войдите в консоль Google Cloud.

Войдите в консоль Google Cloud, используя свою личную учетную запись Google.

Включить выставление счетов

Для создания личного платежного аккаунта включите функцию выставления счетов в консоли Cloud Console .

Создать проект (необязательно)

Если у вас нет текущего проекта, который вы хотели бы использовать для этой лабораторной работы, создайте новый проект здесь .

Редактор Open Cloud Shell

  1. Нажмите на эту ссылку, чтобы перейти непосредственно в редактор Cloud Shell .
  2. Если сегодня вам будет предложено авторизоваться, нажмите «Авторизовать» , чтобы продолжить. Нажмите, чтобы авторизовать Cloud Shell.
  3. Если терминал не отображается внизу экрана, откройте его:
    • Нажмите «Просмотр» .
    • Нажмите «Терминал» . Откройте новый терминал в редакторе Cloud Shell.

Настройте свой проект

  1. В терминале настройте свой проект с помощью следующей команды:
    gcloud config set project [PROJECT_ID]
    Пример: gcloud config set project lab-project-id-exampleУстановите идентификатор проекта в терминале редактора Cloud Shell.
  2. Вы увидите следующее сообщение: Updated property [core/project].

Настройка локальной сети и рабочего пространства

  1. В терминале (или терминале Cloud Shell) клонируйте репозиторий проекта и перейдите в каталог проекта: 
    git clone https://github.com/GoogleChromeLabs/codelabs mont-royal
cd mont-royal
  2. Перейдите в папку ecommerce-ai-enhancements/starter : 
    cd ecommerce-ai-enhancements/starter
  3. Установите зависимости с помощью pnpm : 
    pnpm install
  4. Запустите локальный сервер разработки:
    pnpm dev
    Откройте в браузере адрес http://localhost:5173 чтобы перейти в магазин Mont-Royal Plein Air .

(Необязательно) Установите расширение WebMCP Inspector.

Для упрощения работы с WebMCP можно установить WebMCP Model Context Tool Inspector . После установки вам потребуется получить ключ API Gemini для его использования:

  • Перейдите в AI Studio .
  • Нажмите кнопку «Создать ключ API» , чтобы сгенерировать новый ключ API Gemini, привязанный к проекту, который вы настроили ранее на этом шаге.
  • Откройте инспектор инструмента контекста модели WebMCP (он открывается на боковой панели) и нажмите кнопку «Обновить ключ API Gemini» .
  • Вставьте свой API-ключ во всплывающее окно и сохраните.

Это расширение содержит базовый агент, который может использовать WebMCP, позволяя вам протестировать свой веб-сайт через него, вместо того чтобы напрямую вызывать инструменты WebMCP через DevTools.

3. Встроенные модели ИИ в интернете

Что такое API подсказок?

API Prompt предоставляет веб-приложениям прямой доступ к небольшой многомодальной языковой модели, работающей полностью на устройстве пользователя. Поскольку вывод осуществляется локально:

  • Нулевая задержка в облаке : отсутствие сетевых запросов и очередей на бэкэнд-серверах.
  • Приватный режим по умолчанию : запросы и любой передаваемый им контекст никогда не покидают устройство.
  • Нулевая стоимость : Вывод данных осуществляется на клиентском оборудовании без оплаты токенами или расходов на облачный хостинг.
  • Возможность работы в автономном режиме : надежно работает даже без активного подключения к интернету.

В Chrome доступ к 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: Рекомендации на основе маршрута поездки

На сайтах электронной коммерции обычно есть карусели или разделы с товарами, которые «часто покупаются вместе». Для сайта, посвященного товарам для активного отдыха, может быть полезнее формировать рекомендации на основе истории просмотров.

Для этого вам потребуется создать трехэтапный конвейер рекомендаций:

  1. Профилировщик маршрута : Используя API Prompt, вы проанализируете хронологическую ленту просмотра пользователя, чтобы попытаться определить истинные намерения пользователя в отношении его действий .
  2. Запрос по товару : исходя из этого намерения, вы отправите API-запрос к фиктивному бэкэнду товара, чтобы получить список связанных товаров.
  3. Рекомендации по товарам : Вы передадите эти товары обратно в API товаров для их ранжирования, получив пять наиболее подходящих товаров к тому, что просматривает пользователь.

Задача 1.1: Инициализация API запроса

Вместо того чтобы каждый раз инициализировать API подсказок индивидуально, вы централизуете вызовы в одном файле, используя мемоизацию создания с помощью системной подсказки, что сокращает время запуска для нескольких вызовов к одному и тому же агенту.

Перейдите к файлу src/ai/prompt-api.ts и изучите getPromptSession() в строках 27–58 :

export async function getPromptSession(
  systemPrompt: string = '',
  options: { signal?: AbortSignal } = {}
): Promise<LanguageModel>
  1. Повторно используйте кэшированную базовую сессию. Карта кэша уже существует в строке 21, baseSessions , ключом которой является системная подсказка. Повторное использование базовых моделей вместо клонирования новых с помощью clone() сокращает время запуска и наследует основную структуру без взаимного влияния каждой сессии. Верните клон — вызывающие стороны могут свободно взаимодействовать с ним, включая его уничтожение с помощью destroy() , не удаляя кэшированную базовую сессию.
  2. Функция обнаружения API. Если API существует, функция обнаружения API выдает ошибку.
  3. Укажите необходимые режимы работы и языки. Встроенные модели могут поддерживать многомодальный ввод. Вам нужно указать, какие режимы работы вам нужны и какие языки вы хотите поддерживать. Весь контент, передаваемый в LLM, должен быть на английском языке.
  4. Перед созданием чего-либо проверьте доступность. Даже если API существует, модель, поддерживающая ваши требования, может отсутствовать. Проверьте, существует ли такая модель. Если нет, выдайте ошибку. Если модель еще не загружена, сообщите о ходе загрузки.
  5. Создайте сессию. Настройте параметры для создания новой сессии Prompt API, а также системный запрос, если он включен.

Задание 1.2: Реализация профилировщика маршрутов.

Перейдите к файлу src/ai/journey-profiler.ts и изучите целевую функцию в строках 42–100 :

export async function inferJourneyProfile(
  context: ProfilerInputContext,
  catalogMap: ReadonlyMap<string, Product>
): Promise<JourneyProfile>
  1. Воспользуйтесь функцией из Задания 1, чтобы создать новую сессию подсказок.
  2. Передайте модели запрос с предоставленным текстом, используя journeyProfileSchema в качестве JSON-схемы для структурированного возврата.
  3. Проанализируйте вывод запроса и удалите дубликаты целевых категорий.
  4. Замените жестко заданные строковые значения возврата каретки фактическими результатами вашей командной строки.
  5. Завершите сессию по её окончании, чтобы освободить память.

Задание 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. Воспользуйтесь функцией из Задания 1, чтобы создать новую сессию подсказок.
  2. Предоставьте модели подсказку в виде предоставленного текста и сгенерированной схемы.
  3. Проанализируйте вывод приглашения командной строки.
  4. Верните собранный список рекомендаций, используя assembleRecommendations .
  5. Завершите сессию по её окончании, чтобы освободить память.

Проверьте конвейер рекомендаций.

  1. Откройте Chrome и перейдите по адресу http://localhost:5173/catalog/tent-mont-tremblant-3p .
  2. Прокрутите страницу вниз до раздела «Для вас» .
  3. Обратите внимание, как 5 дополнительных карточек обновляются, отражая продуманные комбинации предметов в комплекте (таких как подстилки под землю, спальные коврики и легкие колышки), а не случайные товары.
  4. Откройте консоль инструментов разработчика Chrome, чтобы просмотреть продолжительность выполнения обоих этапов вывода в реальном времени.

(Необязательно) Задание 1.4: Изучите другие встроенные модели ИИ.

Встроенных моделей ИИ несколько, включая экспертную модель API переводчика . Компоненты в этом коде уже подключены к сервису, который отслеживает изменения текущего языка и запрашивает их перевод, а ваша задача — всё это подключить.

Перейдите к файлу: src/ai/translator.ts

Проверьте целевую функцию createTranslator в строках 29–45 : 

export async function createTranslator(
  targetLang: SupportedLanguage
): Promise<Translator | null>
  1. Проверьте поддержку API переводчика и убедитесь, что целевой язык не английский (по умолчанию контент отображается на английском языке).
  2. Создайте языковую пару, от английского к целевому языку, и проверьте, доступна ли эта пара.
  3. Создайте параметры для переводчика и подключите монитор, отображающий ход загрузки модели.
  4. Возвращает инициализированный транслятор.

Далее, проверьте целевую функцию translate в строках 50–58 : 

export async function translate(
  text: string,
  targetLang: SupportedLanguage
): Promise<string>
  1. Проверьте наличие доступного переводчика, передав в getCachedTranslator targetLang . Если переводчика нет, верните очищенный текст.
  2. Если таковой имеется, воспользуйтесь переводчиком для перевода чистого текста.

Перейдите к файлу: src/ai/translator.ts

Проверьте целевую функцию render в строке 204 : 

export async function translate(
  text: string,
  targetLang: SupportedLanguage
): Promise<string>
  1. Включите компонент выбора языка.

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 : Программный идентификатор инструмента, используемый агентами при выполнении инструментов (например 'get_product_specs' ).
  • title : Удобочитаемая текстовая метка, используемая инспекторами и интерфейсами агентов (например 'Get Product Specs' ).
  • description : Текстовое описание, информирующее модель о том, что делает инструмент и когда его следует вызывать. Именно так агент определяет, следует ли ему вызывать инструмент, поэтому будьте описательны.
  • inputSchema : JSON-схема , определяющая принимаемые аргументы.
  • annotations : Подсказки поведения, например, { readOnlyHint: true } для инструментов только для чтения, которые не вызывают побочных эффектов состояния.
  • execute : Асинхронная функция, выполняемая при вызове инструмента.

Задание 2.1: Инструменты для рекомендаций и разработки продуктов

Для начала вам нужно зарегистрировать инструмент, который позволит агентам получать рекомендации, созданные вами в предыдущем упражнении.

Перейдите к файлу: src/components/product/ForYouSection.ts

Проверьте функцию registerWebMCPTools() в строках 71–94 : 

private registerWebMCPTools(): void
  1. Проверьте, поддерживается ли WebMCP.
  2. Если это так, зарегистрируйте инструмент.
  • Выберите заголовок и описание, которые побудят агента выбрать этот инструмент — здесь следует применить принцип оперативного проектирования.
  • Входных данных нет, поэтому просто укажите пустой объект в формате JSON Schema.
  • Это инструмент только для чтения.
  • В функции execute используйте recommendationStore для получения текущего набора рекомендаций, затем верните текущий идентификатор продукта и набор рекомендаций по продуктам.
  • Добавьте сигнал прерывания и перехватите его, чтобы избежать ошибки. Это гарантирует корректное удаление инструмента при размонтировании компонента.

Перейдите к файлу: src/views/ProductView.ts

  1. Повторите тот же процесс для регистрации инструмента get_current_product , на этот раз возвращающего полный список товаров, а также рекомендации.

Задание 2.2: Инструменты из выдвижного ящика тележки

Перейдите к файлу: src/components/cart/CartDrawer.ts

Проверьте функцию registerWebMCPTools() в строках 83–114 : 

private registerWebMCPTools(): void
  1. Зарегистрируйте инструмент view_cart :
  • Его inputSchema должен представлять собой объект с единственным логическим параметром openDrawer .
  • Это предназначено только для чтения.
  • Прочитайте входные данные в рамках функции execute , решите, показывать или скрывать корзину, обновите recommendationStore , а затем верните сводку по корзине.
  1. Зарегистрируйте инструмент manage_cart :
  • Его inputSchema должен представлять собой объект, содержащий items , который является массивом объектов, содержащих productID , перечисление action add , remove и update , а также целое число quantity .
  • Функция execute должна передавать элементы в this.updateCart

Задание 2.3: Инструмент переключения языка

Расширьте возможности WebMCP, предоставив доступ к языковому инструменту внешним агентам.

Перейдите к файлу: src/components/navigation/LanguagePicker.ts

Проверьте функцию registerWebMCPTools() в строках 61–63 : 

private registerWebMCPTools(): void
  1. Зарегистрируйте инструмент switch_language :
    • В inputSchema должен быть параметр language , представляющий собой перечисление SUPPORTED_LANGUAGE_CODES .
    • Функция execute должна вызывать this.switchLanguage с указанным языком.

Задание 2.4: Инструменты навигации по магазину

Предоставьте автономным агентам возможность перемещаться по магазину, переходить на страницы товаров, просматривать категории или инициировать поиск.

Перейдите к файлу: src/components/navigation/SiteHeader.ts

Проверьте функцию registerWebMCPTools() в строках 155–171 : 

private registerWebMCPTools(): void
  1. Проверьте, поддерживается ли WebMCP.
  2. Зарегистрируйте инструмент search :
    • Входная схема принимает строку query .
    • В execute вызовите this.search(input?.query) .
  3. Зарегистрируйте инструмент go_to_catalog :
    • Входная схема принимает необязательные activity (перечисление ACTIVITIES ) и category (перечисление PRODUCT_CATEGORIES ).
    • В execute вызовите this.goToCatalog(input?.activity, input?.category) .
  4. Зарегистрируйте инструмент get_categories_and_activities :
    • Инструмент только для чтения, не содержащий входных параметров.
    • В execute вызовите this.getCategoriesAndActivities() .
  5. Зарегистрируйте инструмент go_to_product :
    • Входная схема требует указания строки productId .
    • В execute вызовите this.goToProduct(input?.productId) .

Проверьте с помощью инспектора WebMCP.

  1. Перезагрузите http://localhost:5173/catalog/tent-mont-tremblant-3p в Chrome и перейдите на страницу товара.
  2. Откройте Chrome DevTools > Приложение > WebMCP.
  3. Вы должны увидеть следующие инструменты WebMCP: get_recommendations , get_current_product , view_cart , manage_cart , switch_language , search , go_to_catalog , get_categories_and_activities и go_to_product .
  4. Нажмите на одну из них, чтобы просмотреть подробную информацию и параметры.
  5. Выберите инструмент с параметрами, выберите несколько параметров и нажмите «Запустить инструмент» , чтобы увидеть его в действии.
  6. (Необязательно) Если вы установили и настроили WebMCP Model Context Tool Inspector , откройте его — он откроется в боковой панели Chrome. Используйте интерфейс чата, чтобы указать агенту на действие, которое, по вашему мнению, должно вызвать один из ваших инструментов, и посмотреть, как он отреагирует.

5. (Необязательно) Создание агента на месте.

Вызов инструментов WebMCP непосредственно на странице.

Инструменты WebMCP предназначены не только для внешних расширений браузера или сторонних ботов — ваше собственное приложение может вызывать их напрямую . С помощью запроса document.modelContext.getTools() ваш клиентский код может динамически обнаруживать и выполнять инструменты.

Это можно использовать для создания встроенного в сайт помощника по покупкам на основе искусственного интеллекта , превращающего строку поиска в инструмент поиска товаров на основе ввода естественного языка. Вместо написания пользовательского императивного кода для координации многочисленных фильтров, ваша строка поиска может передавать запросы на естественном языке в API Prompt, который определяет, какие инструменты WebMCP на странице следует вызвать.

Чтобы обнаружить и вызвать инструмент WebMCP из JavaScript: 

// 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

Задание 3.1: Инструменты фасетного отображения на боковой панели

Предоставьте доступ к каждому элементу боковой панели каталога через WebMCP, чтобы агенты (и ваш встроенный в страницу помощник поиска) могли программно переключать фильтры.

Каждый компонент фасетного анализа в src/components/facets/ уже предоставляет вспомогательный метод в своем классе и экспортированную схему ввода в src/utils/filter-schemas.ts :

  1. В src/components/facets/ActivityFacet.ts :
    • Зарегистрируйте activity_filter используя activityFilterSchema .
    • В execute вызовите this.filterActivity(input?.activity, input?.selected) .
  2. В src/components/facets/CategoryFacet.ts :
    • Зарегистрируйте category_filter используя categoryFilterSchema .
    • В execute вызовите this.filterCategory(input?.category, input?.selected) .
  3. В src/components/facets/ConditionFacet.ts :
    • Зарегистрируйте condition_filter используя conditionFilterSchema .
    • В execute вызовите this.filterCondition(input?.condition, input?.selected) .
  4. В src/components/facets/PriceFacet.ts :
    • Зарегистрируйте price_filter используя priceFilterSchema .
    • В execute вызовите this.filterPrice(input?.priceRange || input?.bracket, input?.selected) .
  5. В src/components/facets/WeightFacet.ts :
    • Зарегистрируйте weight_filter используя weightFilterSchema .
    • В execute вызовите this.filterWeight(input?.weightRange || input?.bracket, input?.selected) .
  6. В src/components/facets/RatingFacet.ts :
    • Зарегистрируйте rating_filter используя ratingFilterSchema .
    • В execute вызовите this.filterRating(input?.minRating || input?.rating, input?.selected) .
  7. В src/components/facets/SearchFacet.ts :
    • Зарегистрируйте keyword_filter используя keywordFilterSchema .
    • В execute вызовите this.updateKeyword(input?.keyword) .

Не забудьте проверить поддержку WebMCP и передать { signal: this.signal } с помощью .catch(() => {}) как вы узнали на шаге 2.

Задание 3.2: Инструменты просмотра каталога

Теперь зарегистрируйте инструменты отображения списка на уровне каталога, сброса фильтра и семантического поиска в document.modelContext .

Перейдите к файлу: src/views/CatalogView.ts

Проверьте функцию registerWebMCPTools() в строках 125–140 : 

private registerWebMCPTools(): void
  1. Проверьте, поддерживается ли WebMCP.
  2. Зарегистрируйте инструмент list_items :
    • Она не принимает входных параметров и является только для чтения.
    • Функция execute должна вызывать this.getItemsSummary() .
  3. Зарегистрируйте инструмент reset_filters :
    • Он не принимает входных параметров.
    • Функция execute должна вызывать this.resetFilters() .
  4. Зарегистрируйте инструмент semantic_catalog_filter :
    • Используйте semanticCatalogFilterSchema .
    • Функция execute должна вызывать interpretAndApplySemanticFilter(input.query) .

Задача 3.3: Организация работы агента семантического фильтра

Теперь пришло время всё это подключить. Эта задача преобразует поиск в семантический конвейер, который обеспечивает работу инструмента semantic_catalog_filter :

Перейдите к файлу: src/ai/catalog-semantic-filter.ts

Проверьте функцию prewarmSemanticFilterSession() в строках 84–88 : 

export async function prewarmSemanticFilterSession(): Promise<void>
  1. Проверьте, существует ли уже warmSession ; если да, вернитесь к исходному состоянию.
  2. Предварительно подготовьте сессию API Prompt с помощью SEMANTIC_FILTER_SYSTEM_PROMPT , используя getPromptSession() , и сохраните её в warmSession . Оберните в блок try/catch , чтобы создание поиска могло корректно завершиться в случае неудачной предварительной подготовки.

Проверьте функцию inferSearchFacets() в строках 93–134 : 

async function inferSearchFacets(
  searchTerm: string,
  cachedJourney: JourneyProfile | null
): Promise<{ parsed: SemanticFilterResponse; cacheHit: boolean }>
  1. Если доступна предварительно подготовленная сессия, получите ее из warmSession (и установите warmSession в null ) или создайте новую сессию, используя getPromptSession(SEMANTIC_FILTER_SYSTEM_PROMPT) .
  2. Предъявите модели запрос с помощью promptText , используя semanticFilterSchema в качестве responseConstraint .
  3. Разберите полученный JSON, сохраните результат разбора в постоянном кэше с помощью cacheKey и завершите сессию в блоке finally .

Проверьте функцию applyFacetsViaWebMCP() в строках 139–270 : 

async function applyFacetsViaWebMCP(
  searchTerm: string,
  parsed: SemanticFilterResponse
): Promise<{ appliedFilters: SemanticFilterResult['appliedFilters']; toolsExecuted: string[] }>
  1. Найдите зарегистрированные инструменты в document.modelContext , используя await document.modelContext.getTools() .
  2. Чтобы сбросить фильтры и начать с чистого листа, вызовите функцию await executeFacet('reset_filters', {}) .
  3. Одновременно применяйте активные фасеты, используя await Promise.all(facetTasks) .

Проверьте функцию interpretAndApplySemanticFilter() в строках 272–316 : 

export async function interpretAndApplySemanticFilter(
  searchTerm: string
): Promise<SemanticFilterResult>
  1. Определите параметры поиска, вызвав функцию inferSearchFacets(searchTerm, cachedJourney) .
  2. Примените полученные фасеты к каталогу с помощью applyFacetsViaWebMCP(searchTerm, parsed) .

Проверьте агент на странице.

  1. Перейдите по адресу http://localhost:5173/catalog .
  2. В верхней строке поиска введите: "lightweight 3 season tent for wet hikes"
  3. Наблюдайте, как API Prompt анализирует запрос, вызывает фильтры activity_filter (Пеший туризм), category_filter (Палатки) и condition_filter (Мокрый туризм), мгновенно сужая каталог до подходящего снаряжения без необходимости вручную ставить галочки в соответствующих полях.

6. Чему вы научились

Поздравляем! Вы превратили приложение для электронной коммерции в интеллектуальное, ориентированное на агента взаимодействие, полностью работающее на основе искусственного интеллекта на устройстве и стандартных API веб-платформы.

Что вы построили:

  • API для подсказок на устройстве : синтезированы временные шкалы просмотра пользователей с помощью LanguageModel для генерации контекста JourneyProfile в реальном времени, а также создан механизм синергии rankComplementaryGear с использованием структурированных JSON-схем ( responseConstraint ).
  • Инструменты компонентов WebMCP : Зарегистрированы модульные, инкапсулированные инструменты для различных компонентов пользовательского интерфейса ( get_recommendations , get_current_product , view_cart , manage_cart ) через document.modelContext .
  • Архитектура с переадресацией агентов : протестировано и проверено выполнение инструмента с помощью расширения Chrome WebMCP Inspector.
  • Встроенный в страницу агент : Инструменты на стороне клиента, управляемые непосредственно в браузере, обеспечивают многофакторный поиск по каталогу на естественном языке из поисковой строки в заголовке сайта.
  • Специализированные модели искусственного интеллекта для устройств : исследован динамический перевод на устройстве с помощью Translator .

Основные выводы:

  1. Отсутствие задержек и высокая конфиденциальность : встроенные в устройство модели, такие как Gemini Nano, исключают проблемы, связанные с ключами API облачных сервисов, задержками в сети и утечкой данных.
  2. Структурированные выходные данные имеют важное значение : использование JSON-схем с responseConstraint превращает генерацию креативного текста в надежную, типобезопасную логику приложения.
  3. WebMCP подготавливает веб для агентов искусственного интеллекта : регистрация инструментов непосредственно в DOM позволяет как внутренним вспомогательным функциям, так и внешним автономным агентам браузера выполнять проверенные, детерминированные действия.
  4. Пусть модель предлагает варианты, а не выполняет их : ограничение модели enum зарегистрированных вами инструментов и самостоятельная отправка результата позволяют отслеживать поведение агента и предотвращают изобретение им действий.