Améliorer le règlement des achats en ligne grâce aux fonctionnalités d'IA du navigateur

1. Introduction

Le développement Web moderne offre une alternative aux allers-retours basés sur le cloud pour l'utilisation de l'IA. Chrome a commencé à déployer des API d'IA intégrées qui vous permettent d'utiliser tout, des petits modèles experts pour la traduction aux modèles de langage complets distillés, le tout sans frais de jetons pour vous ou vos utilisateurs, et exécuté de manière privée sur leur appareil.

En même temps, les agents d'IA offrent aux utilisateurs une nouvelle façon d'interagir avec les applications Web. En rendant votre expérience Web compatible avec les agents grâce à WebMCP, vous pouvez réduire l'utilisation de jetons tout en fournissant des résultats plus précis que l'actionnement traditionnel, qui nécessite des captures d'écran et le scraping du DOM.

Dans cet atelier de programmation, vous allez travailler sur Mont-Royal Plein Air, un site d'e-commerce d'équipements de plein air. Vous apprendrez à créer et à intégrer des API d'IA et WebMCP intégrées pour :

1. Déduisez l'intention des clients à partir de leur historique de navigation et créez des recommandations dynamiques à l'aide de modèles sur l'appareil.
2. Exposez les outils que les agents et les assistants de navigation peuvent utiliser pour parcourir le site, inspecter les produits et les recommandations, et gérer le panier d'un utilisateur.
3. (Facultatif) Traduisez votre site à la volée à l'aide de petits modèles experts sur l'appareil.
4. (Facultatif) Transformez la recherche de site de base en agent sur site à l'aide des mêmes outils que ceux utilisés par les agents externes.

Points abordés

• Découvrez comment utiliser l'API Prompt et appliquer une sortie JSON structurée.
• Comment enregistrer des outils WebMCP et des stratégies pour réfléchir à la composition et à la granularité des outils.
• (Facultatif) Découvrez comment utiliser l'API Translator pour traduire rapidement du contenu à l'aide d'un modèle expert sur l'appareil.
• (Facultatif) Comment appeler vous-même les outils WebMCP.

Prérequis

• Un compte Google personnel et Google Cloud.
• Google Chrome version 150 ou ultérieure, ou les versions Canary, en développement ou bêta, avec les indicateurs #enable-webmcp-testing et #devtools-webmcp-support activés.
• Connaissances de HTML, CSS, JavaScript et TypeScript
• Vous devez être familiarisé avec le schéma JSON.

2. Configuration du projet

Compte Google

Si vous ne possédez pas encore de compte Google personnel, vous devez en créer un.

Se connecter à la console Google Cloud

Connectez-vous à la console Google Cloud à l'aide d'un compte Google personnel.

Activer la facturation

Conseil : Si vous configurez la facturation à l'aide de crédits Google Cloud, vous pouvez ignorer cette étape.

Pour configurer un compte de facturation personnel, activez la facturation dans la console Cloud.

Créer un projet (facultatif)

Si vous n'avez pas de projet actuel que vous souhaitez utiliser pour cet atelier, créez-en un.

Ouvrir l'éditeur Cloud Shell

1. Cliquez sur ce lien pour accéder directement à l'éditeur Cloud Shell.
2. Si vous êtes invité à autoriser l'accès à un moment donné, cliquez sur Autoriser pour continuer.
3. Si le terminal ne s'affiche pas en bas de l'écran, ouvrez-le :
   • Cliquez sur Afficher.
   • Cliquez sur Terminal.

Définir votre projet

1. Dans le terminal, définissez votre projet à l'aide de la commande suivante :

   gcloud config set project [PROJECT_ID]
   

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

   Si vous ne vous souvenez pas de votre ID de projet, vous pouvez l'obtenir à l'aide de gcloud projects list.

   
2. Le message suivant s'affiche : Updated property [core/project].

   Si le message WARNING s'affiche et que vous êtes invité à Do you want to continue (Y/n)?, cela signifie probablement que vous avez saisi l'ID du projet de manière incorrecte. Appuyez sur n, puis sur Enter, et réessayez d'exécuter la commande gcloud config set project.

Configuration locale et de l'espace de travail

1. Dans votre terminal (ou terminal Cloud Shell), clonez le dépôt du projet et accédez au répertoire du projet :

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

2. Accédez au dossier ecommerce-ai-enhancements/starter :

   cd ecommerce-ai-enhancements/starter
   

3. Installez les dépendances à l'aide de pnpm :

   pnpm install
   

4. Démarrez le serveur de développement local :

   pnpm dev
   

   Ouvrez votre navigateur et accédez à http://localhost:5173 pour afficher la boutique Mont-Royal Plein Air.

(Facultatif) Installer l'extension WebMCP Inspector

Pour faciliter l'utilisation de WebMCP, vous pouvez installer l'inspecteur d'outils de contexte de modèle WebMCP. Une fois installé, vous devez obtenir une clé API Gemini pour l'utiliser :

• Accédez à AI Studio.
• Cliquez sur le bouton Create API Key (Créer une clé API) pour générer une clé API Gemini associée au projet que vous avez configuré précédemment.
• Ouvrez l'inspecteur d'outil de contexte de modèle WebMCP (il s'ouvre dans le panneau latéral), puis cliquez sur le bouton Update Gemini API Key (Mettre à jour la clé API Gemini).
• Collez votre clé API dans le pop-up et enregistrez-la.

Cette extension dispose d'un agent de base qui peut utiliser WebMCP, ce qui vous permet d'essayer votre site Web à travers lui au lieu d'appeler les outils WebMCP directement via les outils pour les développeurs.

3. Modèles d'IA intégrés sur le Web

Qu'est-ce que l'API Prompt ?

L'API Prompt permet aux applications Web d'accéder directement à un petit modèle de langage multimodal s'exécutant entièrement sur l'appareil de l'utilisateur. Comme l'inférence s'exécute localement :

• Latence cloud nulle : aucun aller-retour réseau ni mise en file d'attente des serveurs de backend.
• Confidentialité par défaut : les requêtes et tout contexte qui leur est transmis ne quittent jamais l'appareil.
• Sans frais : l'inférence s'exécute sur le matériel client sans facturation de jetons ni frais d'hébergement cloud.
• Fonctionnement hors connexion : fonctionne de manière fiable même sans connexion Internet active.

Dans Chrome, l'API Prompt est accessible via l'interface globale 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,
});

Bonnes pratiques pour la gestion de la mémoire :

• Vous pouvez clone() une session, en copiant l'état complet de sa fenêtre de contexte, et utiliser les clones de manière indépendante, ce qui réduit le temps nécessaire pour lancer une nouvelle session.
• Lorsque vous avez terminé d'utiliser une session, destroy()-la pour libérer des ressources.

Exercice 1 : Recommandations basées sur le parcours

Les sites d'e-commerce proposent généralement des carrousels ou des ventes incitatives d'articles "fréquemment achetés ensemble". Pour un site d'activités de plein air, il peut être plus utile de générer ces recommandations en fonction de l'historique de navigation.

Pour ce faire, vous allez créer un pipeline de recommandation en trois étapes :

1. Profileur de parcours : à l'aide de l'API Prompt, vous analyserez la chronologie de navigation du client pour tenter de déduire sa véritable intention d'aventure.
2. Requête de produit : à partir de cette intention, vous allez envoyer une requête API à un faux backend de produit pour obtenir des éléments associés.
3. Recommandation de produits : vous renverrez ces produits à l'API Product pour les classer, en renvoyant les cinq produits les plus cohérents avec ce que l'utilisateur regarde.

Tâche 1.1 : Initialisation de l'API Prompt

Au lieu d'initialiser l'API Prompt individuellement chaque fois que vous souhaitez l'utiliser, vous centralisez les appels dans un seul fichier, en mémorisant la création par invite système pour réduire le temps de démarrage pour plusieurs appels au même agent.

Accédez au fichier src/ai/prompt-api.ts et inspectez getPromptSession() sur les lignes 27 à 58 :

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

1. Réutiliser une session de base mise en cache Une carte de cache existe déjà sur la ligne 21, baseSessions, avec la requête système comme clé. Réutiliser des modèles de base au lieu d'en clone() de nouveaux réduit le temps de démarrage et hérite de la configuration de base sans que chaque session n'interfère avec les autres. Renvoyez le clone : les appelants peuvent interagir avec lui, y compris le destroy(), librement sans supprimer votre base mise en cache.
2. Détectez les fonctionnalités de l'API. Détectez si l'API existe et générez une erreur si ce n'est pas le cas.
3. Déclarez vos modalités et vos langues. Les modèles intégrés peuvent accepter des entrées multimodales. Vous devez déclarer les modes dont vous avez besoin et les langues que vous souhaitez prendre en charge. Tout le contenu que vous transmettez au LLM est en anglais.
4. Vérifiez la disponibilité avant de créer quoi que ce soit. Même si l'API existe, il est possible qu'aucun modèle ne réponde à vos besoins. Vérifiez si l'un d'eux existe. Sinon, générez une erreur. Si le rapport n'a pas encore été téléchargé, affichez la progression du téléchargement.
5. Créez la session. Configurez les options permettant de créer une session de l'API Prompt, ainsi que l'invite système, le cas échéant.

Tâche 1.2 : Implémenter le profileur de parcours

Accédez au fichier src/ai/journey-profiler.ts et inspectez la fonction cible sur les lignes 42 à 100 :

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

1. Utilisez la fonction de la tâche 1 pour générer une nouvelle session d'invite à utiliser.
2. Invitez le modèle avec le texte de requête fourni, en utilisant journeyProfileSchema comme schéma JSON pour le retour structuré.
3. Analysez la sortie de la requête et dédupliquez les catégories cibles.
4. Remplacez les retours de chaîne codés en dur par les résultats réels de votre requête.
5. Détruisez la session lorsqu'elle est terminée pour libérer de la mémoire.

Consultez src/utils/journey-helpers.ts pour découvrir comment la collecte de contexte est transformée en requête.

Tâche 1.3 : Implémenter le re-ranker de synergie

Accédez au fichier src/ai/synergy-reranker.ts et inspectez la fonction cible sur les lignes 30 à 71 :

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

1. Utilisez la fonction de la tâche 1 pour générer une nouvelle session d'invite à utiliser.
2. Envoyez une requête au modèle avec le texte de requête et le schéma généré fournis.
3. Analysez le résultat de la requête.
4. Renvoie la liste de recommandations assemblée à l'aide de assembleRecommendations.
5. Détruisez la session lorsqu'elle est terminée pour libérer de la mémoire.

Consultez src/utils/reranker-helpers.ts et src/utils/recommendation-schemas.ts pour découvrir comment le prompt et le schéma sont générés, et comment les recommandations sont assemblées à partir des résultats du prompt.

Vérifier le pipeline de recommandation

1. Ouvrez Chrome sur http://localhost:5173/catalog/tent-mont-tremblant-3p.
2. Faites défiler la page jusqu'à la section Pour vous.
3. Observez comment les cinq cartes associées sont mises à jour pour refléter les associations de kits intelligents (comme les empreintes au sol, les tapis de couchage et les piquets légers) plutôt que des produits aléatoires.
4. Ouvrez la console des outils pour les développeurs Chrome afin d'inspecter la durée d'exécution en temps réel des deux étapes d'inférence.

(Facultatif) Tâche 1.4 : Explorer d'autres modèles d'IA intégrés

Plusieurs autres modèles d'IA intégrés sont disponibles, y compris le modèle expert de l'API Translator. Les composants de cette base de code sont déjà connectés à un service qui écoute les modifications de la langue actuelle et demande leur traduction. Votre tâche consiste à tout connecter.

Accédez au fichier : src/ai/translator.ts

Inspectez la fonction cible createTranslator sur les lignes 29 à 45 :

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

1. Vérifiez que l'API Translator est prise en charge et que la langue cible n'est pas l'anglais (le contenu est en anglais par défaut).
2. Créez une paire de langues (de l'anglais vers la langue cible) et vérifiez si elle est disponible.
3. Créez des options pour le traducteur et associez un moniteur affichant la progression du téléchargement du modèle.
4. Renvoie le traducteur initialisé.

Ensuite, inspectez la fonction cible translate sur les lignes 50 à 58 :

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

5. Vérifiez si un traducteur est disponible avec getCachedTranslator en transmettant targetLang. Si ce n'est pas le cas, renvoyez le texte propre.
6. Si c'est le cas, utilisez le traducteur pour traduire le texte propre.

Accédez au fichier : src/ai/translator.ts

Inspectez la fonction cible render sur les lignes 204 :

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

7. Activer le composant de sélection de langue

Consultez src/utils/translator-helpers.ts pour découvrir comment fonctionnent le cache de traduction et l'abonnement.

4. Utiliser WebMCP pour améliorer l'expérience des agents

Qu'est-ce que WebMCP ?

Les utilisateurs commençant à utiliser des agents autonomes et de navigation conjointe, il est devenu important pour les sites Web de s'adapter. Les agents s'appuient traditionnellement sur l'actionnement (prise de captures d'écran et extraction du DOM et des arbres d'accessibilité) pour déterminer comment interagir avec un site. Cette méthode est lente, fragile et sujette aux erreurs, et elle gaspille les jetons utilisateur.

WebMCP permet de résoudre ce problème en permettant aux développeurs de fournir directement des outils aux agents pour interagir avec la page sur laquelle ils se trouvent. Les agents qui les prennent en charge peuvent utiliser ces outils comme un outil dans votre harnais de programmation, avec des entrées et des valeurs de retour claires et structurées que vous définissez.

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

Lorsqu'un agent se connecte à la page Web, il interroge document.modelContext.getTools(). Chaque outil enregistré expose les éléments suivants :

• name : identifiant de l'outil programmatique utilisé par les agents lors de l'exécution des outils (par exemple, 'get_product_specs').
• title : libellé lisible utilisé par les inspecteurs et les interfaces d'agent (par exemple, 'Get Product Specs').
• description : description en texte brut informant le modèle de ce que fait l'outil et du moment où l'appeler. C'est ainsi qu'un agent détermine s'il doit appeler l'outil. Soyez donc descriptif.
• inputSchema : schéma JSON définissant les arguments acceptés.
• annotations : conseils de comportement, tels que { readOnlyHint: true } pour les outils en lecture seule qui n'entraînent aucun effet secondaire sur l'état.
• execute : fonction asynchrone exécutée lorsque l'outil est appelé.

Bonnes pratiques : les bonnes pratiques concernant le niveau de précision des outils sont encore en cours d'évolution. Les outils plus précis avec lesquels les agents peuvent créer leurs propres parcours utilisateur semblent devenir une bonne pratique plutôt que des outils omnibus. C'est donc ce qui est présenté ici.

Tâche 2.1 : Outils de recommandation et de produit

Pour commencer, enregistrez un outil permettant aux agents de récupérer les recommandations que vous venez de créer lors de l'exercice précédent.

Accédez au fichier : src/components/product/ForYouSection.ts

Inspectez registerWebMCPTools() sur les lignes 71 à 94 :

private registerWebMCPTools(): void

1. Vérifiez si WebMCP est compatible.
2. Si tel est le cas, enregistrez l'outil.

• Choisissez un titre et une description qui incitent l'agent à choisir l'outil. Pensez à l'ingénierie des prompts.
• Il n'y a pas d'entrée, il suffit donc d'inclure un schéma JSON d'objet vide.
• Il s'agit d'un outil en lecture seule.
• Dans la fonction d'exécution, utilisez recommendationStore pour obtenir l'ensemble actuel de recommandations, puis renvoyez l'ID de produit actuel et l'ensemble de recommandations de produits.
• Ajoutez un signal d'abandon et capturez-le pour qu'il ne génère pas d'erreur. Cela garantit que l'outil est correctement supprimé lorsque le composant est démonté.

Accédez au fichier : src/views/ProductView.ts

3. Répétez la même procédure pour enregistrer un outil get_current_product, cette fois en renvoyant le produit complet ainsi que les recommandations.

Remarque : L'enregistrement des outils se fait au niveau des composants. Par conséquent, lorsque des composants sont assemblés pour créer une page, leurs outils sont inclus.

Tâche 2.2 : Outils du tiroir du panier

Accédez au fichier : src/components/cart/CartDrawer.ts

Inspectez registerWebMCPTools() sur les lignes 83 à 114 :

private registerWebMCPTools(): void

1. Enregistrez l'outil view_cart :

• Son inputSchema doit être un objet avec une seule option booléenne, openDrawer.
• Il doit être en lecture seule.
• Lire l'entrée dans le cadre de sa fonction execute, décider d'afficher ou de masquer le panier, actualiser recommendationStore, puis renvoyer le récapitulatif du panier

2. Enregistrez l'outil manage_cart :

• Son inputSchema doit être un objet avec items, qui est un tableau d'objets avec l'énumération action productID, add, remove et update, et l'entier quantity.
• Sa fonction execute doit transmettre les éléments à this.updateCart.

Tâche 2.3 : Outil de changement de langue

Exploitez tout le potentiel de WebMCP en exposant un outil linguistique à des agents externes.

Accédez au fichier : src/components/navigation/LanguagePicker.ts

Inspectez registerWebMCPTools() sur les lignes 61 à 63 :

private registerWebMCPTools(): void

1. Enregistrez l'outil switch_language :
   • L'élément inputSchema doit comporter une propriété language qui est une énumération de SUPPORTED_LANGUAGE_CODES.
   • Sa fonction execute doit appeler this.switchLanguage avec la langue fournie.

Tâche 2.4 : Stocker les outils de navigation

Permettez aux agents autonomes de parcourir le magasin, d'accéder aux pages produit, de parcourir les catégories ou de lancer des recherches.

Accédez au fichier : src/components/navigation/SiteHeader.ts

Inspectez registerWebMCPTools() sur les lignes 155 à 171 :

private registerWebMCPTools(): void

1. Vérifiez si WebMCP est compatible.
2. Enregistrez l'outil search :
   • Le schéma d'entrée accepte une chaîne query.
   • Dans execute, appelez this.search(input?.query).
3. Enregistrez l'outil go_to_catalog :
   • Le schéma d'entrée accepte les valeurs facultatives activity (énumération de ACTIVITIES) et category (énumération de PRODUCT_CATEGORIES).
   • Dans execute, appelez this.goToCatalog(input?.activity, input?.category).
4. Enregistrez l'outil get_categories_and_activities :
   • Outil en lecture seule sans paramètre d'entrée.
   • Dans execute, appelez this.getCategoriesAndActivities().
5. Enregistrez l'outil go_to_product :
   • Le schéma d'entrée nécessite une chaîne productId.
   • Dans execute, appelez this.goToProduct(input?.productId).

Valider avec l'inspecteur WebMCP

1. Actualisez http://localhost:5173/catalog/tent-mont-tremblant-3p dans Chrome et accédez à la page produit.
2. Ouvrez les outils pour les développeurs Chrome > Application > WebMCP.
3. Vous devriez voir vos outils WebMCP : get_recommendations, get_current_product, view_cart, manage_cart, switch_language, search, go_to_catalog, get_categories_and_activities et go_to_product.
4. Cliquez sur l'un d'eux pour afficher ses détails et ses paramètres.
5. Choisissez-en un avec des paramètres, choisissez-en plusieurs, puis cliquez sur Exécuter l'outil pour le voir en action.
6. (Facultatif) Si vous avez installé et configuré l'outil d'inspection du contexte de modèle WebMCP, ouvrez-le. Il s'ouvre dans le panneau latéral de Chrome. Utilisez l'interface de chat pour demander à l'agent d'effectuer une action qui, selon vous, devrait appeler l'un de vos outils, et voyez comment il réagit.

5. (Facultatif) Créer un agent sur site

Appeler les outils WebMCP sur la page

Les outils WebMCP ne sont pas réservés aux extensions de navigateur externes ni aux robots tiers. Votre propre application peut les appeler directement. En interrogeant document.modelContext.getTools(), votre code côté client peut découvrir et exécuter des outils de manière dynamique.

Vous pouvez l'utiliser pour créer un assistant shopping IA sur votre site, en transformant la barre de recherche en outil de découverte de produits basé sur des entrées en langage naturel. Au lieu d'écrire du code impératif personnalisé pour coordonner de nombreux filtres à facettes, votre barre de recherche peut transmettre des requêtes en langage naturel à l'API Prompt, qui décide des outils WebMCP à appeler sur la page.

Bonnes pratiques : bien que l'agent que vous créez remplace la barre de recherche, vous ne devez pas utiliser de LLM pour la recherche sur le site. Il existe des modèles et des algorithmes beaucoup plus efficaces, précis et bien établis pour cela. Il s'agit uniquement de montrer comment appeler les outils WebMCP de votre propre site de manière non déterministe.

Pour découvrir et appeler un outil WebMCP à partir de 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

Tâche 3.1 : Outils de facette de la barre latérale

Exposez chaque facette de la barre latérale du catalogue à WebMCP afin que les agents (et votre assistant de recherche sur la page) puissent activer/désactiver les filtres de manière programmatique.

Chaque composant de facette dans src/components/facets/ fournit déjà une méthode d'assistance sur sa classe et un schéma d'entrée exporté dans src/utils/filter-schemas.ts :

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

N'oubliez pas de vérifier la compatibilité avec WebMCP et de transmettre { signal: this.signal } avec .catch(() => {}), comme vous l'avez appris à l'étape 2.

Tâche 3.2 : Outils d'affichage du catalogue

Enregistrez maintenant les outils de réinitialisation des filtres, de recherche sémantique et de fiche au niveau du catalogue sur document.modelContext.

Accédez au fichier : src/views/CatalogView.ts

Inspectez registerWebMCPTools() sur les lignes 125 à 140 :

private registerWebMCPTools(): void

1. Vérifiez si WebMCP est compatible.
2. Enregistrez l'outil list_items :
   • Il ne prend aucun paramètre d'entrée et est en lecture seule.
   • Sa fonction execute doit appeler this.getItemsSummary().
3. Enregistrez l'outil reset_filters :
   • Elle ne prend aucun paramètre d'entrée.
   • Sa fonction execute doit appeler this.resetFilters().
4. Enregistrez l'outil semantic_catalog_filter :
   • Utilisez semanticCatalogFilterSchema.
   • Sa fonction execute doit appeler interpretAndApplySemanticFilter(input.query).

Tâche 3.3 : Orchestrer l'agent de filtrage sémantique

Il est maintenant temps de tout câbler. Cette tâche transforme la recherche en un pipeline sémantique qui alimente l'outil semantic_catalog_filter :

Accédez au fichier : src/ai/catalog-semantic-filter.ts

Inspectez prewarmSemanticFilterSession() sur les lignes 84 à 88 :

export async function prewarmSemanticFilterSession(): Promise<void>

1. Vérifiez si warmSession existe déjà. Si c'est le cas, renvoyez-le plus tôt.
2. Préchauffez une session de l'API Prompt avec SEMANTIC_FILTER_SYSTEM_PROMPT à l'aide de getPromptSession() et stockez-la dans warmSession. Encapsulez-le dans un bloc try/catch afin que la création de la recherche puisse toujours revenir à un état stable en cas d'échec du préchauffage.

Inspectez inferSearchFacets() sur les lignes 93 à 134 :

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

3. Récupérez la session préchauffée à partir de warmSession si elle est disponible (et réinitialisez warmSession sur null), ou créez une session à l'aide de getPromptSession(SEMANTIC_FILTER_SYSTEM_PROMPT).
4. Envoyez un prompt au modèle avec promptText, en utilisant semanticFilterSchema comme responseConstraint.
5. Analysez le fichier JSON renvoyé, stockez le résultat analysé dans le cache persistant avec cacheKey et détruisez la session dans un bloc finally.

Inspectez applyFacetsViaWebMCP() sur les lignes 139 à 270 :

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

6. Découvrez les outils enregistrés sur document.modelContext à l'aide de await document.modelContext.getTools().
7. Réinitialisez les filtres pour repartir de zéro en appelant await executeFacet('reset_filters', {}).
8. Appliquez simultanément les facettes actives à l'aide de await Promise.all(facetTasks).

Inspectez interpretAndApplySemanticFilter() sur les lignes 272 à 316 :

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

9. Déduisez les facettes de recherche en appelant inferSearchFacets(searchTerm, cachedJourney).
10. Appliquez les facettes inférées au catalogue à l'aide de applyFacetsViaWebMCP(searchTerm, parsed).

Vérifier l'agent sur la page

1. Accédez à http://localhost:5173/catalog.
2. Dans la barre de recherche en haut de l'écran, saisissez "lightweight 3 season tent for wet hikes".
3. Regardez l'API Prompt analyser la requête et appeler activity_filter (Randonnée), category_filter (Tentes) et condition_filter (Humide), ce qui permet de réduire instantanément le catalogue aux équipements correspondants sans que l'utilisateur ait à cocher manuellement des cases.

6. Ce que vous avez appris

Félicitations, Vous avez transformé une application d'e-commerce en une expérience intelligente axée sur les agents, entièrement optimisée par l'IA sur l'appareil et les API standards de la plate-forme Web.

Opérations effectuées :

• API Prompt sur l'appareil : nous avons synthétisé les chronologies de navigation des utilisateurs avec LanguageModel pour générer un contexte JourneyProfile en temps réel et créé un moteur de synergie rankComplementaryGear à l'aide de schémas JSON structurés (responseConstraint).
• Outils de composants WebMCP : outils modulaires et encapsulés enregistrés dans les composants d'UI (get_recommendations, get_current_product, view_cart, manage_cart) via document.modelContext.
• Architecture orientée agent : exécution d'outils testée et vérifiée à l'aide de l'extension Chrome WebMCP Inspector.
• Agent intégré à la page sur le site : outils orchestrés côté client directement dans le navigateur pour permettre la recherche multifacteur dans le catalogue en langage naturel à partir de la barre de recherche de l'en-tête du site.
• Modèles d'IA spécialisés sur l'appareil : vous avez exploré la traduction dynamique sur l'appareil à l'aide de Translator.

Points à retenir :

1. Latence nulle et confidentialité élevée : les modèles sur l'appareil comme Gemini Nano éliminent les clés API cloud, la latence réseau et les problèmes d'exfiltration de données.
2. Les sorties structurées sont essentielles : l'utilisation de schémas JSON avec responseConstraint transforme la génération de texte créatif en une logique d'application fiable et sécurisée.
3. WebMCP prépare le Web pour les agents IA : l'enregistrement des outils directement dans le DOM permet aux fonctionnalités d'assistance internes et aux agents de navigation autonomes externes d'effectuer des actions déterministes et vérifiées.
4. Laissez le modèle proposer, pas exécuter : en limitant le modèle à un enum de vos outils enregistrés et en envoyant vous-même le résultat, vous pouvez auditer le comportement de l'agent et l'empêcher d'inventer des actions.