Mejora de la confirmación de compra del comercio electrónico con las capacidades de IA del navegador

1. Introducción

El desarrollo web moderno proporciona una alternativa a los viajes de ida y vuelta basados en la nube para el uso de la IA. Chrome comenzó a lanzar APIs de IA integradas que te permiten usar desde pequeños modelos expertos para la traducción hasta modelos de lenguaje completos destilados y capaces, todo sin costos de tokens para ti ni para tus usuarios, y que se ejecutan de forma privada en sus dispositivos.

Al mismo tiempo, los agentes de IA ofrecen una nueva forma para que los usuarios interactúen con las aplicaciones web, y hacer que tu experiencia web esté lista para los agentes con WebMCP puede ayudar a reducir el uso de tokens y, al mismo tiempo, proporcionar resultados más precisos que la activación tradicional que requiere capturas de pantalla y el scraping del DOM.

En este codelab, trabajarás en Mont-Royal Plein Air, un sitio de comercio electrónico de equipos para exteriores. Aprenderás a compilar e integrar APIs de IA integradas y WebMCP para hacer lo siguiente:

1. Inferir la intención del cliente a partir del historial de navegación y generar recomendaciones de forma dinámica para él con modelos integrados en el dispositivo
2. Exponer herramientas que los asistentes de navegador y los agentes pueden usar para navegar por el sitio, inspeccionar productos y recomendaciones, y administrar el carrito de compras de un usuario
3. (Opcional) Traduce tu sitio sobre la marcha con modelos pequeños integrados en el dispositivo especializados.
4. Opcional: Transforma la búsqueda básica en el sitio en un agente en las instalaciones potenciado por las mismas herramientas que usan los agentes externos.

Qué aprenderás

• Cómo usar la API de Prompt y aplicar un formato JSON estructurado a su salida
• Cómo registrar herramientas y estrategias de WebMCP para pensar en la composición y la granularidad de las herramientas
• (Opcional) Cómo usar la API de Translator para traducir contenido rápidamente con un modelo experto integrado en el dispositivo
• (Opcional) Cómo llamar a las herramientas de WebMCP por tu cuenta

Requisitos previos

• Una Cuenta de Google personal y Google Cloud
• La versión 150 o posterior de Google Chrome, o los canales Canary, para desarrolladores o beta, con las marcas #enable-webmcp-testing y #devtools-webmcp-support habilitadas
• Conocimiento de HTML, CSS, JavaScript y TypeScript
• Conocimiento del esquema en JSON

2. Configura el proyecto

Cuenta de Google

Si aún no tienes una Cuenta de Google personal, debes crear una.

Accede a la consola de Google Cloud

Accede a la consola de Google Cloud con una Cuenta de Google personal.

Habilita la facturación

Nota: Si configuraste la facturación con créditos de Google Cloud, puedes omitir este paso.

Para configurar una cuenta de facturación personal, habilita la facturación en la consola de Cloud.

Crear un proyecto (opcional)

Si no tienes un proyecto actual que quieras usar para este lab, crea uno nuevo aquí.

Abra el editor de Cloud Shell

1. Haz clic en este vínculo para navegar directamente al editor de Cloud Shell.
2. Si se te solicita autorización en algún momento, haz clic en Autorizar para continuar.
3. Si la terminal no aparece en la parte inferior de la pantalla, ábrela:
   • Haz clic en Ver.
   • Haz clic en Terminal.

Configura tu proyecto

1. En la terminal, configura tu proyecto con este comando:

   gcloud config set project [PROJECT_ID]
   

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

   Si no recuerdas el ID de tu proyecto, puedes enumerar todos tus IDs de proyecto con gcloud projects list.

   
2. Verás el siguiente mensaje: Updated property [core/project].

   Si ves un WARNING y se te pregunta Do you want to continue (Y/n)?, es probable que hayas ingresado el ID del proyecto de forma incorrecta. Presiona n, presiona Enter y vuelve a intentar ejecutar el comando gcloud config set project.

Configuración local y del espacio de trabajo

1. En tu terminal (o en la terminal de Cloud Shell), clona el repositorio del proyecto y navega al directorio del proyecto:

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

2. Navega a la carpeta ecommerce-ai-enhancements/starter:

   cd ecommerce-ai-enhancements/starter
   

3. Instala las dependencias con pnpm:

   pnpm install
   

4. Inicia el servidor de desarrollo local:

   pnpm dev
   

   Abre tu navegador en http://localhost:5173 para ver la tienda Mont-Royal Plein Air.

Instala la extensión del inspector de WebMCP (opcional)

Para facilitar el trabajo con WebMCP, puedes instalar el Inspector de herramientas de contexto del modelo de WebMCP. Una vez que se instale, deberás obtener una clave de API de Gemini para usarla:

• Ve a AI Studio.
• Haz clic en el botón Crear clave de API para generar una nueva clave de API de Gemini vinculada al proyecto que configuraste anteriormente en este paso.
• Abre el inspector de la herramienta de contexto del modelo de WebMCP (se abre en el panel lateral) y haz clic en el botón Update API de Gemini.
• Pega tu clave de API en la ventana emergente y guarda los cambios.

Esta extensión tiene un agente básico que puede usar WebMCP, lo que te permite probar tu sitio web a través de él en lugar de llamar a las herramientas de WebMCP directamente a través de DevTools.

3. Modelos de IA integrados en la Web

¿Qué es la API de Prompt?

La API de Prompt brinda a las aplicaciones web acceso directo a un modelo de lenguaje pequeño y multimodal que se ejecuta completamente en el dispositivo del usuario. Debido a que la inferencia se ejecuta de forma local, sucede lo siguiente:

• Latencia cero en la nube: No hay viajes de ida y vuelta a la red ni colas de servidores de backend.
• Privado de forma predeterminada: Las instrucciones y cualquier contexto que se les pase nunca salen del dispositivo.
• Costo cero: La inferencia se ejecuta en el hardware del cliente sin facturación de tokens ni gastos de hosting en la nube.
• Funciona sin conexión: Funciona de manera confiable incluso sin una conexión a Internet activa.

En Chrome, se accede a la API de Prompt a través de la interfaz 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ácticas recomendadas para la administración de la memoria:

• Puedes clone() una sesión, copiar el estado completo de la ventana de contexto y usar los clones de forma independiente, lo que reduce el tiempo necesario para iniciar una sesión nueva.
• Cuando termines de usar una sesión, destroy() para liberar recursos

Ejercicio 1: Recomendaciones basadas en el recorrido

Por lo general, los sitios de comercio electrónico tienen carruseles o ventas adicionales de artículos que "se suelen comprar juntos". En el caso de un sitio de actividades al aire libre, puede ser más útil generar esas recomendaciones en función del historial de navegación.

Para lograrlo, crearás una canalización de recomendaciones de tres etapas:

1. Perfilador de viajes: Con la API de Prompt, analizarás la línea de tiempo cronológica de navegación del cliente para intentar inferir la verdadera intención de aventura del usuario.
2. Consulta de productos: A partir de esa intención, harás una solicitud a la API a un backend de productos falso para obtener elementos relacionados.
3. Recomendación de productos: Pasarás esos productos a la API de Product para clasificarlos y devolver los cinco complementos más coherentes con lo que está viendo el usuario.

Tarea 1.1: Inicialización de la API de Prompt

En lugar de inicializar la API de Prompt de forma individual cada vez que quieras usarla, centraliza las llamadas en un solo archivo y memoiza la creación con la instrucción del sistema para reducir el tiempo de inicio de varias llamadas al mismo agente.

Navega al archivo src/ai/prompt-api.ts y, luego, inspecciona getPromptSession() en las líneas 27 a 58:

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

1. Reutiliza una sesión base almacenada en caché. Ya hay un mapa de caché en la línea 21, baseSessions, con la clave de la instrucción del sistema. Reutilizar modelos base en lugar de clone() nuevos reduce el tiempo de inicio y hereda la configuración principal sin que cada sesión interfiera con las demás. Devuelve el clon. Los llamadores pueden interactuar con él, incluso destroy(), libremente sin descartar tu base almacenada en caché.
2. Detecta la función de la API. Detecta si la API existe y arroja un error si no es así.
3. Declara tus modalidades e idiomas. Los modelos integrados pueden admitir entradas multimodales. Debes declarar qué modos necesitas y qué idiomas quieres admitir. Todo el contenido que le pasas al LLM está en inglés.
4. Verifica la disponibilidad antes de crear contenido. Incluso si la API existe, es posible que no haya un modelo que admita tus requisitos. Comprueba si existe uno. Si no es así, arroja un error. Si aún no se descargó, informa el progreso de la descarga.
5. Crea la sesión. Configura las opciones para crear una nueva sesión de la API de Prompt y la instrucción del sistema, si se incluye.

Tarea 1.2: Implementa el perfilador de viajes

Navega al archivo src/ai/journey-profiler.ts y, luego, inspecciona la función de destino en las líneas 42 a 100:

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

1. Usa la función de la tarea 1 para generar una nueva sesión de instrucciones que se pueda usar.
2. Indica al modelo que use el texto de la instrucción proporcionado, con journeyProfileSchema como el esquema JSON para la respuesta estructurada.
3. Analiza el resultado de la instrucción y elimina las categorías objetivo duplicadas.
4. Reemplaza las devoluciones de cadenas codificadas por los resultados reales de tu instrucción.
5. Destruye la sesión cuando termine para liberar memoria.

Lee src/utils/journey-helpers.ts para ver cómo la recopilación de contexto se convierte en una instrucción.

Tarea 1.3: Implementa el reranqueador de sinergia

Navega al archivo src/ai/synergy-reranker.ts y, luego, inspecciona la función de destino en las líneas 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. Usa la función de la tarea 1 para generar una nueva sesión de instrucciones que se pueda usar.
2. Envía una instrucción al modelo con el texto de la instrucción y el esquema generados.
3. Analiza el resultado de la instrucción.
4. Devuelve la lista de recomendaciones ensamblada con assembleRecommendations.
5. Destruye la sesión cuando termine para liberar memoria.

Lee src/utils/reranker-helpers.ts y src/utils/recommendation-schemas.ts para ver cómo se generan la instrucción y el esquema, y cómo se ensamblan las recomendaciones a partir de los resultados de la instrucción.

Verifica la canalización de recomendaciones

1. Abre Chrome para http://localhost:5173/catalog/tent-mont-tremblant-3p.
2. Desplázate hacia abajo hasta la sección Para ti.
3. Observa cómo se actualizan las 5 tarjetas complementarias para reflejar las combinaciones de kits inteligentes (como huellas en el suelo, colchonetas para dormir y estacas livianas) en lugar de productos aleatorios.
4. Abre la consola de Herramientas para desarrolladores de Chrome para inspeccionar la duración de ejecución en tiempo real de ambos pasos de inferencia.

(Opcional) Tarea 1.4: Explora más modelos de IA integrados

Hay varios otros modelos de IA integrados disponibles, incluido el modelo experto de la API de Translator. Los componentes de esta base de código ya están conectados a un servicio que detecta los cambios en el idioma actual y solicita su traducción. Tu trabajo es conectar todo.

Navega al archivo: src/ai/translator.ts

Inspecciona la función de destino createTranslator en las líneas 29 a 45:

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

1. Verifica la compatibilidad con la API de Translator y asegúrate de que el idioma de destino no sea inglés (el contenido está en inglés de forma predeterminada).
2. Crea un par de idiomas, del inglés al idioma de destino, y verifica si ese par está disponible.
3. Crea opciones para el traductor y adjunta un monitor que muestre el progreso de la descarga del modelo.
4. Devuelve el traductor inicializado.

A continuación, inspecciona la función de destino translate en las líneas 50 a 58:

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

5. Comprueba si hay un traductor disponible con getCachedTranslator pasando targetLang. Si no hay, devuelve el texto limpio.
6. Si es así, usa el traductor para traducir el texto limpio.

Navega al archivo: src/ai/translator.ts

Inspecciona la función objetivo render en las líneas 204:

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

7. Habilita el componente Language Picker

Lee src/utils/translator-helpers.ts para ver cómo funcionan la caché de traducción y la suscripción.

4. Uso de WebMCP para mejorar la experiencia del agente

¿Qué es WebMCP?

A medida que los usuarios comienzan a usar agentes autónomos y de navegación conjunta, se vuelve importante que los sitios web se adapten. Tradicionalmente, los agentes se basan en la activación (capturan pantallas y extraen datos del DOM y los árboles de accesibilidad) para determinar cómo interactuar con un sitio. Este método es lento, frágil y propenso a errores, y desperdicia tokens del usuario.

WebMCP ayuda a resolver este problema, ya que permite que los desarrolladores proporcionen herramientas directamente a los agentes para que interactúen con la página en la que se encuentran. Los agentes que los admiten pueden usar esas herramientas como si fueran una herramienta más en tu arnés de codificación, con entradas y valores de devolución claros y estructurados dictados por ti.

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

Cuando un agente se conecta a la página web, consulta document.modelContext.getTools(). Cada herramienta registrada expone lo siguiente:

• name: Es el identificador de la herramienta programática que usan los agentes cuando ejecutan herramientas (p.ej., 'get_product_specs').
• title: Es la etiqueta visible y legible por humanos que usan los inspectores y las interfaces de agentes (p.ej., 'Get Product Specs').
• description: Es una descripción en texto simple que le informa al modelo qué hace la herramienta y cuándo llamarla. Así es como un agente determina si debe llamar a la herramienta, por lo que debes ser descriptivo.
• inputSchema: Esquema JSON que define los argumentos aceptados.
• annotations: Sugerencias de comportamiento, como { readOnlyHint: true } para herramientas de solo lectura que no causan efectos secundarios en el estado.
• execute: Es la función asíncrona que se ejecuta cuando se invoca la herramienta.

Prácticas recomendadas: Las prácticas recomendadas para determinar el nivel de detalle de las herramientas aún están en evolución. Las herramientas más detalladas con las que los agentes pueden crear sus propios recorridos del usuario parecen estar surgiendo como una práctica recomendada en lugar de las herramientas omnibus, por lo que se presentan aquí.

Tarea 2.1: Herramientas de recomendación y productos

Comenzarás registrando una herramienta para permitir que los agentes recuperen las recomendaciones que acabas de crear en el ejercicio anterior.

Navega al archivo: src/components/product/ForYouSection.ts

Inspecciona registerWebMCPTools() en las líneas 71 a 94:

private registerWebMCPTools(): void

1. Comprueba si se admite WebMCP.
2. Si es así, registra la herramienta.

• Elige un título y una descripción que atraigan a un agente a elegir la herramienta. Aquí es importante la ingeniería de instrucciones.
• No hay entrada, por lo que solo debes incluir un esquema JSON de objeto vacío.
• Esta es una herramienta de solo lectura.
• En la función de ejecución, usa recommendationStore para obtener el conjunto actual de recomendaciones y, luego, devuelve el ID del producto actual y el conjunto de recomendaciones de productos.
• Agrega un indicador de anulación y captúralo para que no arroje un error. Esto garantiza que la herramienta se quite correctamente cuando se desmonte el componente.

Navega al archivo: src/views/ProductView.ts

3. Repite el mismo proceso para registrar una herramienta get_current_product, pero esta vez devuelve el producto completo y las recomendaciones.

Nota: El registro de la herramienta se realiza a nivel del componente, por lo que, cuando los componentes se combinan para crear una página, sus herramientas se incluyen.

Tarea 2.2: Herramientas del panel lateral del carrito

Navega al archivo: src/components/cart/CartDrawer.ts

Inspecciona registerWebMCPTools() en las líneas 83 a 114:

private registerWebMCPTools(): void

1. Registra la herramienta de view_cart:

• Su inputSchema debe ser un objeto con una sola opción booleana, openDrawer.
• Debería ser de solo lectura.
• Leer la entrada como parte de su función execute, decidir si se muestra o se oculta el carrito, actualizar el recommendationStore y, luego, devolver el resumen del carrito

2. Registra la herramienta de manage_cart:

• Su inputSchema debe ser un objeto con items, que es un array de objetos con el enum action de productID, add, remove y update, y el número entero quantity.
• Su función execute debe pasar elementos a this.updateCart.

Tarea 2.3: Herramienta de cambio de idioma

Lleva WebMCP más allá exponiendo una herramienta de lenguaje a agentes externos.

Navega al archivo: src/components/navigation/LanguagePicker.ts

Inspecciona registerWebMCPTools() en las líneas 61 a 63:

private registerWebMCPTools(): void

1. Registra la herramienta switch_language:
   • El inputSchema debe tener una propiedad language que sea un enum de SUPPORTED_LANGUAGE_CODES.
   • Su función execute debe llamar a this.switchLanguage con el idioma proporcionado.

Tarea 2.4: Almacena herramientas de navegación

Permite que los agentes autónomos naveguen por la tienda, vayan a las páginas de productos, exploren categorías o inicien búsquedas.

Navega al archivo: src/components/navigation/SiteHeader.ts

Inspecciona registerWebMCPTools() en las líneas 155 a 171:

private registerWebMCPTools(): void

1. Comprueba si se admite WebMCP.
2. Registra la herramienta search:
   • El esquema de entrada toma una cadena query.
   • En execute, llama a this.search(input?.query).
3. Registra la herramienta go_to_catalog:
   • El esquema de entrada acepta activity (enum de ACTIVITIES) y category (enum de PRODUCT_CATEGORIES) opcionales.
   • En execute, llama a this.goToCatalog(input?.activity, input?.category).
4. Registra la herramienta get_categories_and_activities:
   • Es una herramienta de solo lectura sin parámetros de entrada.
   • En execute, llama a this.getCategoriesAndActivities().
5. Registra la herramienta go_to_product:
   • El esquema de entrada requiere una cadena productId.
   • En execute, llama a this.goToProduct(input?.productId).

Verifica con el inspector de WebMCP

1. Vuelve a cargar http://localhost:5173/catalog/tent-mont-tremblant-3p en Chrome y navega a una página de producto.
2. Abre las Herramientas para desarrolladores de Chrome > Application > WebMCP.
3. Deberías ver tus herramientas de WebMCP: get_recommendations, get_current_product, view_cart, manage_cart, switch_language, search, go_to_catalog, get_categories_and_activities y go_to_product.
4. Haz clic en uno de ellos para ver sus detalles y parámetros.
5. Elige una con parámetros, selecciona algunos y haz clic en Ejecutar herramienta para verla en acción.
6. (Opcional) Si instalaste y configuraste el Inspector de la herramienta de contexto del modelo de WebMCP, ábrelo. Se abrirá en el panel lateral de Chrome. Usa la interfaz de chat para indicarle al agente que realice una acción que creas que debería llamar a una de tus herramientas y ver cómo responde.

5. (Opcional) Cómo compilar un agente en las instalaciones

Cómo llamar a herramientas de WebMCP en la página

Las herramientas de WebMCP no son solo para extensiones externas del navegador o bots de terceros: tu propia aplicación puede llamarlas directamente. Si consultas document.modelContext.getTools(), tu código del cliente puede descubrir y ejecutar herramientas de forma dinámica.

Puedes usarlo para crear un asistente de compras con IA en las instalaciones, que transforma la barra de búsqueda en una herramienta de descubrimiento de productos basada en la entrada de lenguaje natural. En lugar de escribir código imperativo personalizado para coordinar numerosos filtros de facetas, tu barra de búsqueda puede entregar consultas en lenguaje natural a la API de Prompt, que decide qué herramientas de WebMCP en la página invocar.

Prácticas recomendadas: Si bien el agente que estás creando reemplaza la barra de búsqueda, no debes usar un LLM para la búsqueda en el sitio, ya que existen patrones y algoritmos mucho más eficientes, precisos y establecidos para eso. Esto solo tiene el objetivo de demostrar cómo llamar a las herramientas de WebMCP de tu propio sitio de forma no determinística.

Para descubrir e invocar una herramienta de WebMCP desde JavaScript, haz lo siguiente:

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

Tarea 3.1: Herramientas de facetas de la barra lateral

Expón cada faceta de la barra lateral del catálogo a WebMCP para que los agentes (y tu asistente de búsqueda en la página) puedan activar o desactivar filtros de forma programática.

Cada componente de faceta en src/components/facets/ ya proporciona un método auxiliar en su clase y un esquema de entrada exportado en src/utils/filter-schemas.ts:

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

Recuerda verificar la compatibilidad con WebMCP y pasar { signal: this.signal } con .catch(() => {}), como aprendiste en el paso 2.

Tarea 3.2: Herramientas de vista de catálogo

Ahora registra las herramientas de búsqueda semántica, restablecimiento de filtros y fichas a nivel del catálogo en document.modelContext.

Navega al archivo: src/views/CatalogView.ts

Inspecciona registerWebMCPTools() en las líneas 125 a 140:

private registerWebMCPTools(): void

1. Comprueba si se admite WebMCP.
2. Registra la herramienta list_items:
   • No toma parámetros de entrada y es de solo lectura.
   • Su función execute debe llamar a this.getItemsSummary().
3. Registra la herramienta reset_filters:
   • No toma parámetros de entrada.
   • Su función execute debe llamar a this.resetFilters().
4. Registra la herramienta semantic_catalog_filter:
   • Utiliza semanticCatalogFilterSchema.
   • Su función execute debe llamar a interpretAndApplySemanticFilter(input.query).

Tarea 3.3: Orquesta el agente de filtro semántico

Ahora es el momento de conectar todo. Esta tarea transforma la búsqueda en una canalización semántica que potencia la herramienta semantic_catalog_filter:

Navega al archivo: src/ai/catalog-semantic-filter.ts

Inspecciona prewarmSemanticFilterSession() en las líneas 84 a 88:

export async function prewarmSemanticFilterSession(): Promise<void>

1. Comprueba si warmSession ya existe; si es así, regresa antes.
2. Precalienta una sesión de la API de Prompt con SEMANTIC_FILTER_SYSTEM_PROMPT usando getPromptSession() y almacénala en warmSession. Encapsula en un bloque try/catch para que la creación de la búsqueda pueda recurrir a una alternativa de forma correcta si falla el precalentamiento.

Inspecciona inferSearchFacets() en las líneas 93 a 134:

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

3. Reclama la sesión precalentada de warmSession si está disponible (y restablece warmSession a null), o bien crea una sesión nueva con getPromptSession(SEMANTIC_FILTER_SYSTEM_PROMPT).
4. Indícale al modelo que use promptText, con semanticFilterSchema como responseConstraint.
5. Analiza el JSON devuelto, almacena el resultado analizado en la caché persistente con cacheKey y destruye la sesión en un bloque finally.

Inspecciona applyFacetsViaWebMCP() en las líneas 139 a 270:

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

6. Descubre las herramientas registradas en document.modelContext con await document.modelContext.getTools().
7. Llama a await executeFacet('reset_filters', {}) para restablecer los filtros y comenzar desde cero.
8. Aplica facetas activas de forma simultánea con await Promise.all(facetTasks).

Inspecciona interpretAndApplySemanticFilter() en las líneas 272 a 316:

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

9. Llama a inferSearchFacets(searchTerm, cachedJourney) para inferir las facetas de búsqueda.
10. Aplica las facetas inferidas al catálogo con applyFacetsViaWebMCP(searchTerm, parsed).

Verifica el agente en la página

1. Navega a http://localhost:5173/catalog.
2. En la barra de búsqueda superior, ingresa "lightweight 3 season tent for wet hikes".
3. Observa cómo la API de Prompt analiza la solicitud, invoca activity_filter (Senderismo), category_filter (Tiendas) y condition_filter (Húmedo), y reduce instantáneamente el catálogo a equipos coincidentes sin hacer clic en ninguna casilla de verificación de forma manual.

6. Qué aprendiste

Felicitaciones. Transformaste una aplicación de comercio electrónico en una experiencia inteligente y orientada a los agentes potenciada por completo por la IA integrada en el dispositivo y las APIs de la plataforma web estándar.

Qué compilaste:

• API de Prompt integrado en el dispositivo: Se sintetizaron los cronogramas de navegación del usuario con LanguageModel para generar contexto JourneyProfile en tiempo real y se creó un motor de sinergia rankComplementaryGear con esquemas JSON estructurados (responseConstraint).
• Herramientas de componentes de WebMCP: Herramientas modulares y encapsuladas registradas en componentes de la IU (get_recommendations, get_current_product, view_cart, manage_cart) a través de document.modelContext.
• Arquitectura de reenvío de agentes: Ejecución de herramientas probada y verificada con la extensión Chrome WebMCP Inspector.
• Agente integrado en la página: Herramientas orquestadas del cliente directamente en el navegador para potenciar la búsqueda en el catálogo en lenguaje natural con múltiples facetas desde la barra de búsqueda del encabezado del sitio.
• Modelos de IA integrados en el dispositivo especializados: Se exploró la traducción dinámica integrada en el dispositivo con Translator.

Conclusiones clave:

1. Latencia cero y alta privacidad: Los modelos integrados en el dispositivo, como Gemini Nano, eliminan las claves de API en la nube, la latencia de la red y las preocupaciones sobre la filtración de datos.
2. Las salidas estructuradas son fundamentales: El uso de esquemas JSON con responseConstraint convierte la generación de texto creativo en una lógica de aplicación confiable y con seguridad de tipos.
3. WebMCP prepara la Web para los agentes de IA: El registro de herramientas directamente en el DOM permite que tanto las funciones de asistencia internas como los agentes de navegador autónomos externos realicen acciones verificadas y determinísticas.
4. Permite que el modelo proponga, no que ejecute: Limitar el modelo a un enum de tus herramientas registradas y enviar el resultado por tu cuenta mantiene el comportamiento de los agentes auditable y evita que inventen acciones.