Como melhorar o pagamento do e-commerce com recursos de IA do navegador

1. Introdução

O desenvolvimento moderno da Web oferece uma alternativa às viagens de ida e volta baseadas na nuvem para uso de IA. O Chrome começou a enviar APIs de IA integradas que permitem usar desde pequenos modelos especializados para tradução até modelos de linguagem completos refinados, tudo sem custos de token para você ou seus usuários, executados de forma privada no dispositivo.

Ao mesmo tempo, os agentes de IA oferecem uma nova maneira de os usuários interagirem com aplicativos da Web. Deixar sua experiência na Web pronta para agentes com o WebMCP pode ajudar a reduzir o uso de tokens e fornecer resultados mais precisos do que a atuação tradicional, que exige capturas de tela e raspagem do DOM.

Neste codelab, você vai trabalhar no Mont-Royal Plein Air, um site de e-commerce de equipamentos para atividades ao ar livre. Você vai aprender a criar e integrar APIs de IA e WebMCP integradas para:

1. Inferir a intenção do cliente com base no histórico de navegação e criar recomendações dinamicamente usando modelos no dispositivo.
2. Expor ferramentas que agentes e assistentes de navegador podem usar para navegar no site, inspecionar produtos e recomendações e gerenciar o carrinho de compras de um usuário.
3. (Opcional) Traduza seu site na hora usando modelos especializados pequenos no dispositivo.
4. (Opcional) Transforme a pesquisa básica no site em um agente no local usando as mesmas ferramentas que os agentes externos.

O que você vai aprender

• Como usar a API Prompt e aplicar a saída JSON estruturada dela.
• Como registrar ferramentas e estratégias do WebMCP para pensar na composição e granularidade das ferramentas.
• (Opcional) Como usar a API Translator para traduzir conteúdo rapidamente usando um modelo especialista no dispositivo.
• (Opcional) Como chamar as ferramentas do WebMCP por conta própria.

Pré-requisitos

• Uma Conta do Google pessoal e o Google Cloud.
• A versão 150 ou mais recente do Google Chrome ou os canais Canary, Dev ou Beta com as flags #enable-webmcp-testing e #devtools-webmcp-support ativadas.
• Conhecimento de HTML, CSS, JavaScript e TypeScript.
• Familiaridade com o esquema JSON.

2. Configurar o projeto

Conta do Google

Se você ainda não tiver uma Conta do Google pessoal, crie uma.

fazer login no console do Google Cloud

Faça login no console do Google Cloud usando uma Conta do Google pessoal.

Ativar faturamento

Dica:se você configurou o faturamento usando créditos do Google Cloud, pule esta etapa.

Para configurar uma conta de faturamento pessoal, ative o faturamento no console do Cloud.

Criar um projeto (opcional)

Se você não tiver um projeto atual que queira usar neste laboratório, crie um novo aqui.

Abra o editor do Cloud Shell

1. Clique neste link para navegar diretamente até o editor do Cloud Shell.
2. Se for necessário autorizar em algum momento hoje, clique em Autorizar para continuar.
3. Se o terminal não aparecer na parte de baixo da tela, abra-o:
   • Clique em Visualizar.
   • Clique em Terminal.

Definir o projeto

1. No terminal, defina o projeto usando este comando:

   gcloud config set project [PROJECT_ID]
   

   Exemplo: gcloud config set project lab-project-id-example

   Se você não se lembrar do ID do projeto, liste todos os IDs usando gcloud projects list.

   
2. Você vai ver a seguinte mensagem: Updated property [core/project].

   Se você vir um WARNING e for perguntado Do you want to continue (Y/n)?, provavelmente digitou o ID do projeto incorretamente. Pressione n, Enter e tente executar o comando gcloud config set project novamente.

Configuração local e do espaço de trabalho

1. No terminal (ou terminal do Cloud Shell), clone o repositório do projeto e navegue até o diretório dele:

   git clone https://github.com/GoogleChromeLabs/codelabs mont-royal
   cd mont-royal
   

2. Navegue até a pasta ecommerce-ai-enhancements/starter:

   cd ecommerce-ai-enhancements/starter
   

3. Instale as dependências usando pnpm:

   pnpm install
   

4. Inicie o servidor de desenvolvimento local:

   pnpm dev
   

   Abra o navegador em http://localhost:5173 para acessar a loja Mont-Royal Plein Air.

(Opcional) Instalar a extensão do inspetor WebMCP

Para facilitar o trabalho com o WebMCP, instale o WebMCP Model Context Tool Inspector (em inglês). Depois de instalar, você precisa receber uma chave da API Gemini para usar:

• Acesse o AI Studio.
• Clique no botão Criar chave de API para gerar uma nova API Gemini vinculada ao projeto que você configurou anteriormente nesta etapa.
• Abra o inspetor de contexto do modelo WebMCP (ele é aberto no painel lateral) e clique no botão Atualizar chave de API Gemini.
• Cole a chave de API no pop-up e salve.

Essa extensão tem um agente básico que pode usar o WebMCP, permitindo que você teste seu site por ele em vez de chamar as ferramentas do WebMCP diretamente pelo DevTools.

3. Modelos de IA integrados na Web

O que é a API Prompt?

A API Prompt oferece aos aplicativos da Web acesso direto a um modelo de linguagem pequeno e multimodal que é executado totalmente no dispositivo do usuário. Como a inferência é executada localmente:

• Latência zero na nuvem: sem viagens de ida e volta na rede ou filas de servidores de back-end.
• Privado por padrão: os comandos e qualquer contexto transmitido a eles nunca saem do dispositivo.
• Custo zero: a inferência é executada no hardware do cliente sem faturamento de tokens ou despesas de hospedagem na nuvem.
• Funciona off-line: funciona de forma confiável mesmo sem uma conexão de Internet ativa.

No Chrome, a API Prompt é acessada pela interface global 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,
});

Práticas recomendadas de gerenciamento de memória:

• É possível clone() uma sessão, copiando o estado completo da janela de contexto, e usar os clones de forma independente, reduzindo o tempo necessário para iniciar uma nova sessão.
• Quando terminar de usar uma sessão, destroy() para liberar recursos.

Exercício 1: recomendações com base na jornada

Os sites de e-commerce geralmente têm carrosséis ou vendas adicionais de itens "comprados juntos com frequência". Para um site de atividades ao ar livre, pode ser mais útil criar essas recomendações com base no histórico de navegação.

Para isso, você vai criar um pipeline de recomendação de três estágios:

1. Criador de perfil de jornada: usando a API Prompt, você vai analisar a linha do tempo cronológica de navegação do cliente para tentar inferir a verdadeira intenção de aventura do usuário.
2. Consulta de produto: com base nessa intenção, você fará uma solicitação de API para um back-end de produto falso e receberá itens relacionados.
3. Recomendação de produtos: você vai transmitir esses produtos de volta à API Product para classificá-los, retornando os cinco itens mais coesos com o que o usuário está visualizando.

Tarefa 1.1: inicialização da API Prompt

Em vez de inicializar a API Prompt individualmente sempre que quiser usá-la, você centraliza as chamadas em um único arquivo, memorizando a criação por solicitação do sistema para reduzir o tempo de inicialização de várias chamadas para o mesmo agente.

Navegue até o arquivo src/ai/prompt-api.ts e inspecione getPromptSession() nas linhas 27 a 58:

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

1. Reutilizar uma sessão base armazenada em cache. Já existe um mapa de cache na linha 21, baseSessions, com chaveamento por comando do sistema. Reutilizar modelos de base em vez de clone() novos reduz o tempo de inicialização e herda a configuração principal sem que cada sessão interfira uma na outra. Retorne o clone. Os chamadores podem interagir com ele, incluindo destroy(), livremente sem descartar sua base em cache.
2. Detecte recursos da API. Detecta recursos se a API existe e gera um erro se não existir.
3. Declare suas modalidades e idiomas. Os modelos integrados podem oferecer suporte à entrada multimodal. Você precisa declarar os modos e idiomas que quer oferecer. Todo o conteúdo que você envia para o LLM está em inglês.
4. Verifique a disponibilidade antes de criar qualquer coisa. Mesmo que a API exista, talvez não haja um modelo que atenda aos seus requisitos. Verifique se existe um. Se não for, gere um erro. Se ele ainda não tiver sido baixado, informe o progresso do download.
5. Crie a sessão. Defina as opções para criar uma nova sessão da API Prompt e o prompt do sistema, se incluído.

Tarefa 1.2: implementar o criador de perfil de jornada

Acesse o arquivo src/ai/journey-profiler.ts e inspecione a função de destino nas linhas 42 a 100:

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

1. Use a função da Tarefa 1 para gerar uma nova sessão de comandos.
2. Envie uma solicitação ao modelo com o texto fornecido, usando journeyProfileSchema como o esquema JSON para o retorno estruturado.
3. Analise a saída do comando e remova as categorias de destino duplicadas.
4. Substitua as strings fixadas no código pelos resultados reais do seu comando.
5. Destrua a sessão quando ela terminar para liberar memória.

Leia src/utils/journey-helpers.ts para saber como a coleta de contexto se transforma em um comando.

Tarefa 1.3: implementar o reclassificador de sinergia

Acesse o arquivo src/ai/synergy-reranker.ts e inspecione a função de destino nas linhas 30 a 71:

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

1. Use a função da Tarefa 1 para gerar uma nova sessão de comandos.
2. Comande o modelo com o texto do comando e o esquema gerado.
3. Analise a saída do comando.
4. Retorne a lista de recomendações montada usando assembleRecommendations.
5. Destrua a sessão quando ela terminar para liberar memória.

Leia src/utils/reranker-helpers.ts e src/utils/recommendation-schemas.ts para saber como o comando e o esquema são gerados e como as recomendações são montadas com base nos resultados do comando.

Verificar o pipeline de recomendação

1. Abra o Chrome para http://localhost:5173/catalog/tent-mont-tremblant-3p.
2. Role a tela para baixo até a seção Para você.
3. Observe como os cinco cards complementares são atualizados para refletir combinações de kits inteligentes (como pegadas no chão, colchonetes e estacas leves) em vez de produtos aleatórios.
4. Abra o console do Chrome DevTools para inspecionar a duração da execução em tempo real das duas etapas de inferência.

(Opcional) Tarefa 1.4: Descoberta avançada de modelos de IA integrados

Há vários outros modelos de IA integrados disponíveis, incluindo o modelo especialista da API Translator. Os componentes nesta base de código já estão conectados a um serviço que detecta mudanças no idioma atual e pede a tradução. Sua tarefa é conectar tudo.

Navegue até o arquivo: src/ai/translator.ts

Inspecione a função de destino createTranslator nas linhas 29 a 45:

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

1. Verifique se a API Translator é compatível e se o idioma de destino não é o inglês (o conteúdo está em inglês por padrão).
2. Crie um par de idiomas, do inglês para o idioma de destino, e verifique se ele está disponível.
3. Crie opções para o tradutor e anexe um monitor para mostrar o progresso do download do modelo.
4. Retorna o tradutor inicializado.

Em seguida, inspecione a função de destino translate nas linhas 50 a 58:

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

5. Verifique se há um tradutor disponível com getCachedTranslator transmitindo targetLang. Se não houver, retorne o texto limpo.
6. Se houver, use o tradutor para traduzir o texto limpo.

Navegue até o arquivo: src/ai/translator.ts

Inspecione a função de destino render nas linhas 204:

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

7. Ativar o componente do seletor de idioma

Leia src/utils/translator-helpers.ts para saber como funcionam o cache de tradução e a assinatura.

4. Usar o WebMCP para melhorar a experiência do agente

O que é o WebMCP?

À medida que os usuários começam a usar agentes autônomos e de navegação conjunta, é importante que os sites se adaptem. Tradicionalmente, os agentes dependem da atuação (fazendo capturas de tela e raspando o DOM e as árvores de acessibilidade) para determinar como interagir com um site. Isso é lento, frágil, propenso a erros e desperdiça tokens do usuário.

O WebMCP ajuda a resolver isso permitindo que os desenvolvedores forneçam ferramentas diretamente aos agentes para interagir com a página em que estão. Os agentes que oferecem suporte a elas podem usar essas ferramentas como uma ferramenta no seu arnês de programação, com entradas e valores de retorno claros e estruturados ditados por você.

// 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',
    };
  },
});

Quando um agente se conecta à página da Web, ele consulta document.modelContext.getTools(). Cada ferramenta registrada expõe:

• name: identificador de ferramenta programática usado pelos agentes ao executar ferramentas (por exemplo, 'get_product_specs').
• title: rótulo de exibição legível para humanos usado por inspetores e interfaces de agentes (por exemplo, 'Get Product Specs').
• description: descrição em texto simples informando ao modelo o que a ferramenta faz e quando chamá-la. É assim que um agente determina se deve chamar a ferramenta. Portanto, seja descritivo.
• inputSchema: esquema JSON que define argumentos aceitos.
• annotations: dicas de comportamento, como { readOnlyHint: true } para ferramentas somente leitura que não causam efeitos colaterais no estado.
• execute: função assíncrona executada quando a ferramenta é invocada.

Práticas recomendadas:as práticas recomendadas para a granularidade das ferramentas ainda estão evoluindo. Ferramentas mais granulares que os agentes podem usar para criar as próprias jornadas do usuário parecem estar surgindo como uma prática recomendada em vez de ferramentas omnibus. Por isso, é isso que apresentamos aqui.

Tarefa 2.1: ferramentas de recomendação e produtos

Comece registrando uma ferramenta para permitir que os agentes recuperem as recomendações que você acabou de criar no exercício anterior.

Navegue até o arquivo: src/components/product/ForYouSection.ts

Inspecione registerWebMCPTools() nas linhas 71 a 94:

private registerWebMCPTools(): void

1. Verifique se o WebMCP é compatível.
2. Se estiver, registre a ferramenta.

• Escolha um título e uma descrição que incentivem um agente a escolher a ferramenta. Pense em engenharia de comandos.
• Não há entrada, então inclua um esquema JSON de objeto vazio.
• Esta é uma ferramenta somente leitura.
• Na função "execute", use recommendationStore para receber o conjunto atual de recomendações e retorne o ID do produto atual e o conjunto de recomendações de produtos.
• Adicione e capture um sinal de interrupção para que ele não gere um erro. Isso garante que a ferramenta seja removida corretamente quando o componente for desmontado.

Navegue até o arquivo: src/views/ProductView.ts

3. Repita o mesmo processo para registrar uma ferramenta get_current_product, desta vez retornando o produto completo e as recomendações.

Dica:o registro da ferramenta acontece no nível do componente. Assim, quando os componentes são combinados para criar uma página, as ferramentas vêm com eles.

Tarefa 2.2: ferramentas da gaveta do carrinho

Navegue até o arquivo: src/components/cart/CartDrawer.ts

Inspecione registerWebMCPTools() nas linhas 83 a 114:

private registerWebMCPTools(): void

1. Registre a ferramenta view_cart:

• O inputSchema precisa ser um objeto com uma única opção booleana, openDrawer.
• Ele precisa ser somente leitura.
• Leia a entrada como parte da função execute, decida se o carrinho vai aparecer ou ser ocultado, atualize o recommendationStore e retorne o resumo do carrinho.

2. Registre a ferramenta manage_cart:

• O inputSchema precisa ser um objeto com items, que é uma matriz de objetos com o productID, add, remove e a enumeração update action e o número inteiro quantity.
• A função execute precisa transmitir itens para this.updateCart.

Tarefa 2.3: ferramenta de troca de idioma

Leve o WebMCP ainda mais longe expondo uma ferramenta de linguagem a agentes externos.

Navegue até o arquivo: src/components/navigation/LanguagePicker.ts

Inspecione registerWebMCPTools() nas linhas 61 a 63:

private registerWebMCPTools(): void

1. Registre a ferramenta switch_language:
   • O inputSchema precisa ter uma propriedade language que seja uma enumeração de SUPPORTED_LANGUAGE_CODES.
   • A função execute precisa chamar this.switchLanguage com o idioma fornecido.

Tarefa 2.4: armazenar ferramentas de navegação

Permitir que agentes autônomos naveguem pela loja, acessem páginas de produtos, naveguem por categorias ou iniciem pesquisas.

Navegue até o arquivo: src/components/navigation/SiteHeader.ts

Inspecione registerWebMCPTools() nas linhas 155 a 171:

private registerWebMCPTools(): void

1. Verifique se o WebMCP é compatível.
2. Registre a ferramenta search:
   • O esquema de entrada usa uma string query.
   • Em execute, chame this.search(input?.query).
3. Registre a ferramenta go_to_catalog:
   • O esquema de entrada aceita activity (enumeração de ACTIVITIES) e category (enumeração de PRODUCT_CATEGORIES) opcionais.
   • Em execute, chame this.goToCatalog(input?.activity, input?.category).
4. Registre a ferramenta get_categories_and_activities:
   • Ferramenta somente leitura sem parâmetros de entrada.
   • Em execute, chame this.getCategoriesAndActivities().
5. Registre a ferramenta go_to_product:
   • O esquema de entrada exige uma string productId.
   • Em execute, chame this.goToProduct(input?.productId).

Verificar com o inspetor WebMCP

1. Recarregue http://localhost:5173/catalog/tent-mont-tremblant-3p no Chrome e acesse a página do produto.
2. Abra o Chrome DevTools > Application > WebMCP.
3. As ferramentas do WebMCP vão aparecer: get_recommendations, get_current_product, view_cart, manage_cart, switch_language, search, go_to_catalog, get_categories_and_activities e go_to_product.
4. Clique em um deles para conferir os detalhes e parâmetros.
5. Escolha um com parâmetros, selecione alguns e clique em Executar ferramenta para ver como funciona.
6. (Opcional) Se você instalou e configurou o WebMCP Model Context Tool Inspector, abra-o. Ele será aberto no painel lateral do Chrome. Use a interface de chat para pedir ao agente que execute uma ação que você acredita que deva chamar uma das suas ferramentas e veja como ele responde.

5. (Opcional) Como criar um agente no local

Chamada de ferramentas do WebMCP in-page

As ferramentas do WebMCP não são apenas para extensões de navegador externas ou bots de terceiros. Seu próprio aplicativo pode chamá-las diretamente. Ao consultar document.modelContext.getTools(), seu código do lado do cliente pode descobrir e executar ferramentas de forma dinâmica.

Você pode usar isso para criar um assistente de compras com IA no local, transformando a barra de pesquisa em uma ferramenta de descoberta de produtos com base na entrada de linguagem natural. Em vez de escrever um código imperativo personalizado para coordenar vários filtros de atributo, a barra de pesquisa pode entregar consultas em linguagem natural à API Prompt, que decide quais ferramentas WebMCP in-page invocar.

Práticas recomendadas:embora o agente que você esteja criando substitua a barra de pesquisa, não use um LLM para pesquisa de sites. Existem padrões e algoritmos muito mais eficientes, precisos e bem estabelecidos para isso. Isso serve apenas para demonstrar a chamada não determinística das ferramentas WebMCP do seu site.

Para descobrir e invocar uma ferramenta WebMCP em 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

Tarefa 3.1: ferramentas de refinamento da barra lateral

Exponha cada faceta da barra lateral do catálogo ao WebMCP para que os agentes (e seu assistente de pesquisa na página) possam ativar/desativar filtros de maneira programática.

Cada componente de faceta em src/components/facets/ já fornece um método auxiliar na classe e um esquema de entrada exportado em src/utils/filter-schemas.ts:

1. Em src/components/facets/ActivityFacet.ts:
   • Registre activity_filter usando activityFilterSchema.
   • Em execute, chame this.filterActivity(input?.activity, input?.selected).
2. Em src/components/facets/CategoryFacet.ts:
   • Registre category_filter usando categoryFilterSchema.
   • Em execute, chame this.filterCategory(input?.category, input?.selected).
3. Em src/components/facets/ConditionFacet.ts:
   • Registre condition_filter usando conditionFilterSchema.
   • Em execute, chame this.filterCondition(input?.condition, input?.selected).
4. Em src/components/facets/PriceFacet.ts:
   • Registre price_filter usando priceFilterSchema.
   • Em execute, chame this.filterPrice(input?.priceRange || input?.bracket, input?.selected).
5. Em src/components/facets/WeightFacet.ts:
   • Registre weight_filter usando weightFilterSchema.
   • Em execute, chame this.filterWeight(input?.weightRange || input?.bracket, input?.selected).
6. Em src/components/facets/RatingFacet.ts:
   • Registre rating_filter usando ratingFilterSchema.
   • Em execute, chame this.filterRating(input?.minRating || input?.rating, input?.selected).
7. Em src/components/facets/SearchFacet.ts:
   • Registre keyword_filter usando keywordFilterSchema.
   • Em execute, chame this.updateKeyword(input?.keyword).

Verifique se há suporte para WebMCP e transmita { signal: this.signal } com .catch(() => {}), conforme aprendido na etapa 2.

Tarefa 3.2: ferramentas de visualização do catálogo

Agora registre as ferramentas de listagem no nível do catálogo, redefinição de filtro e pesquisa semântica em document.modelContext.

Navegue até o arquivo: src/views/CatalogView.ts

Inspecione registerWebMCPTools() nas linhas 125 a 140:

private registerWebMCPTools(): void

1. Verifique se o WebMCP é compatível.
2. Registre a ferramenta list_items:
   • Ele não recebe parâmetros de entrada e é somente leitura.
   • A função execute precisa chamar this.getItemsSummary().
3. Registre a ferramenta reset_filters:
   • Ele não usa parâmetros de entrada.
   • A função execute precisa chamar this.resetFilters().
4. Registre a ferramenta semantic_catalog_filter:
   • Use semanticCatalogFilterSchema.
   • A função execute precisa chamar interpretAndApplySemanticFilter(input.query).

Tarefa 3.3: orquestrar o agente de filtro semântico

Agora é hora de conectar tudo. Essa tarefa transforma a pesquisa em um pipeline semântico que alimenta a ferramenta semantic_catalog_filter:

Navegue até o arquivo: src/ai/catalog-semantic-filter.ts

Inspecione prewarmSemanticFilterSession() nas linhas 84 a 88:

export async function prewarmSemanticFilterSession(): Promise<void>

1. Verifique se warmSession já existe. Se sim, retorne antes.
2. Faça o pré-aquecimento de uma sessão da API Prompt com SEMANTIC_FILTER_SYSTEM_PROMPT usando getPromptSession() e armazene em warmSession. Encapsule em um bloco try/catch para que a criação da pesquisa ainda possa fazer um fallback normalmente se o pré-aquecimento falhar.

Inspecione inferSearchFacets() nas linhas 93 a 134:

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

3. Reivindique a sessão pré-aquecida de warmSession, se disponível, e redefina warmSession para null ou crie uma nova sessão usando getPromptSession(SEMANTIC_FILTER_SYSTEM_PROMPT).
4. Envie um comando ao modelo com promptText, usando semanticFilterSchema como responseConstraint.
5. Analise o JSON retornado, armazene o resultado analisado no cache persistente com cacheKey e destrua a sessão em um bloco finally.

Inspecione applyFacetsViaWebMCP() nas linhas 139 a 270:

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

6. Descubra as ferramentas registradas em document.modelContext usando await document.modelContext.getTools().
7. Redefina os filtros para começar do zero chamando await executeFacet('reset_filters', {}).
8. Aplique simultaneamente os atributos ativos usando await Promise.all(facetTasks).

Inspecione interpretAndApplySemanticFilter() nas linhas 272 a 316:

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

9. Infire atributos de pesquisa chamando inferSearchFacets(searchTerm, cachedJourney).
10. Aplique as facetas inferidas ao catálogo usando applyFacetsViaWebMCP(searchTerm, parsed).

Verificar o agente in-page

1. Navegue para http://localhost:5173/catalog.
2. Na barra de pesquisa na parte de cima, digite: "lightweight 3 season tent for wet hikes"
3. Assista a API Prompt analisar a solicitação, invocar activity_filter (Caminhada), category_filter (Tendas) e condition_filter (Molhado), reduzindo instantaneamente o catálogo para equipamentos correspondentes sem cliques manuais em caixas de seleção.

6. O que você aprendeu

Parabéns! Você transformou um aplicativo de e-commerce em uma experiência inteligente e proativa, totalmente alimentada por IA no dispositivo e APIs padrão da plataforma Web.

O que você criou:

• API Prompt no dispositivo: sintetizamos linhas do tempo de navegação do usuário com LanguageModel para gerar contexto JourneyProfile em tempo real e criamos um mecanismo de sinergia rankComplementaryGear usando esquemas JSON estruturados (responseConstraint).
• Ferramentas de componentes do WebMCP: ferramentas modulares e encapsuladas registradas em componentes da interface (get_recommendations, get_current_product, view_cart, manage_cart) via document.modelContext.
• Arquitetura de encaminhamento de agente: execução de ferramentas testada e verificada usando a extensão Chrome WebMCP Inspector.
• Agente in-page no local: ferramentas orquestradas do lado do cliente diretamente no navegador para ativar a pesquisa multifacetada no catálogo em linguagem natural na barra de pesquisa do cabeçalho do local.
• Modelos especializados de IA no dispositivo: exploramos a tradução dinâmica no dispositivo usando o Translator.

Principais aprendizados:

1. Latência zero e alta privacidade: modelos no dispositivo, como o Gemini Nano, eliminam chaves de API de nuvem, latência de rede e preocupações com exfiltração de dados.
2. Saídas estruturadas são essenciais: usar esquemas JSON com responseConstraint transforma a geração de texto criativo em uma lógica de aplicativo confiável e com segurança de tipo.
3. O WebMCP prepara a Web para agentes de IA: o registro de ferramentas diretamente no DOM capacita recursos assistivos internos e agentes de navegador autônomos externos com ações verificadas e deterministas.
4. Deixe o modelo propor, não executar: restringir o modelo a um enum das suas ferramentas registradas e enviar o resultado por conta própria mantém o comportamento de agente auditável e evita que ele invente ações.