Créer un agent de service client optimisé par l'IA à l'aide de Firebase AI Logic

1. Introduction

Dans cet atelier de programmation, vous allez ajouter un widget de chat intelligent pour le service client à une boutique d'e-commerce d'équipement de plein air appelée Rugged Terrain Guide. Vous allez utiliser Firebase AI Logic pour créer cet agent. Vous apprendrez à configurer un modèle de prompt côté serveur (product-agent) qui gère le persona de l'IA, les règles strictes concernant le budget de compensation et qui utilise dynamiquement le catalogue de produits comme contexte.

Opérations à effectuer :

  • Obtenez le code de démarrage pour l'application Web de cet atelier de programmation.
  • Configurez un projet Firebase.
  • Configurer et initialiser les services Firebase (comme Firebase AI Logic) dans une application Web
  • Configurez un modèle d'invite côté serveur dans la console Firebase.
  • Accédez au modèle à partir d'un appel au service d'IA générative depuis un frontend TypeScript de type React.

Ce dont vous avez besoin :

  • Un navigateur Web tel que Chrome.
  • Connaissances de base de TypeScript et Node.js
  • Un IDE ou un éditeur de texte de votre choix. Antigravity est un bon choix.

2. Télécharger le code de démarrage

  1. Dans votre terminal, clonez le dépôt de démarrage :
    git clone https://github.com/GoogleCloudPlatform/devrel-demos.git
  2. Accédez au répertoire du code et installez les dépendances :
    cd devrel-demos/codelabs/firebase-server-prompt-templates-codelab
npm install

3. Configurer un projet Firebase

Créer un projet Firebase

  1. Connectez-vous à la console Firebase à l'aide de votre compte Google.
  2. Cliquez sur le bouton pour créer un projet, puis saisissez un nom de projet (par exemple, rugged-terrain-ai).
  3. Cliquez sur Continuer.
  4. Si vous y êtes invité, lisez et acceptez les Conditions d'utilisation de Firebase, puis cliquez sur Continuer.
  5. (Facultatif) Activez l'assistance IA dans la console Firebase (appelée "Gemini dans Firebase").
  6. Pour cet atelier de programmation, vous n'avez pas besoin de Google Analytics. Désactivez donc l'option Google Analytics.
  7. Cliquez sur Créer un projet, attendez que votre projet soit provisionné, puis cliquez sur Continuer.

Passer à un forfait Firebase supérieur

Pour utiliser les services Firebase dans cet atelier de programmation, votre projet Firebase doit être associé au forfait Blaze avec paiement à l'usage, ce qui signifie qu'il est associé à un compte de facturation Cloud.

  • Un compte de facturation Cloud nécessite un mode de paiement, comme une carte de crédit.
  • Si vous débutez avec Firebase et Google Cloud, vérifiez si vous êtes éligible à un crédit de 300$et à un compte Cloud Billing pour un essai sans frais.
  • Si vous effectuez cet atelier de programmation dans le cadre d'un événement, demandez à l'organisateur si des crédits Cloud sont disponibles.

Pour passer à la formule Blaze, procédez comme suit :

  1. Dans la console Firebase, sélectionnez Passer à une formule supérieure.
  2. Sélectionnez le forfait Blaze. Suivez les instructions à l'écran pour associer un compte de facturation Cloud à votre projet.
    Si vous avez dû créer un compte de facturation Cloud lors de cette mise à niveau, vous devrez peut-être revenir au processus de mise à niveau dans la console Firebase pour la finaliser.

4. Configurer les services Firebase et associer votre application

Pour cet atelier de programmation, vous devez configurer Cloud Storage for Firebase et Firebase AI Logic dans votre projet Firebase. Vous devez également associer le code source de votre application à votre projet Firebase.

Configurer Cloud Storage for Firebase

Cet atelier de programmation utilise Cloud Storage pour Firebase afin de stocker les descriptions de produits.

  1. Dans la console Firebase, accédez à Bases de données et stockage > Stockage.
  2. Cliquez sur Commencer.
  3. Sélectionnez un emplacement pour votre bucket Storage par défaut.
    Les buckets situés dans les régions US-WEST1, US-CENTRAL1 et US-EAST1 peuvent profiter du niveau"Toujours sans frais" pour Google Cloud Storage. Les buckets situés dans toutes les autres régions sont soumis aux tarifs et à l'utilisation de Google Cloud Storage.
  4. Cliquez sur Mode Production. Dans les étapes ci-dessous, vous allez mettre à jour ces règles de sécurité pour qu'elles soient spécifiques à cet atelier de programmation.
  5. Cliquez sur Créer.
  6. Mettez à jour vos règles de sécurité :
    1. Une fois le bucket provisionné, accédez à l'onglet Règles.
    2. Copiez et collez les règles suivantes :
      rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /products.txt {
      allow read;
    }
  }
}
    3. Cliquez sur Publier.
  7. Importez les descriptions de produits à partir du code de démarrage :
    1. Cliquez sur l'onglet Fichiers de votre bucket Storage.
    2. Cliquez sur Importer un fichier, puis importez le fichier products.txt à partir du code de démarrage. Vous trouverez ce fichier à l'adresse suivante : src/data/products.txt.

Configurer Firebase AI Logic

Firebase AI Logic est le principal service Firebase que vous utiliserez dans cet atelier de programmation.

  1. Dans la console Firebase, accédez à Services d'IA > Logique d'IA.
  2. Cliquez sur Commencer.
  3. Sur la fiche API Vertex AI Gemini, cliquez sur Premiers pas avec cette API, puis suivez les instructions à l'écran. Ce flux vous permettra d'activer les API requises pour utiliser Firebase AI Logic avec l'API Vertex AI Gemini.
  4. (Facultatif) Sélectionnez Activer le monitoring de l'IA pour observer diverses métriques et utilisations au niveau de l'application. Vous obtiendrez ainsi une visibilité complète sur vos requêtes via Firebase AI Logic.

Associer votre code à votre projet Firebase

Lorsque vous configurez Firebase AI Logic, vous êtes invité à créer une application Web Firebase et à ajouter votre configuration à votre code source.

  1. Lorsque vous y êtes invité dans le flux de configuration de Firebase AI Logic, cliquez sur l'icône Web () pour enregistrer une application Web.
  2. Nommez l'application (par exemple, Rugged Web).
  3. Copiez l'objet firebaseConfig à partir des instructions de configuration.

Ensuite, modifiez le code de démarrage :

  1. Dans votre éditeur de code, ouvrez src/firebase.ts.
  2. Remplacez le firebaseConfig existant par celui que vous avez copié depuis la console Firebase.

Votre fichier devrait se présenter comme suit :

import { getAI, getTemplateGenerativeModel, VertexAIBackend } from "firebase/ai";
import { initializeApp } from "firebase/app";

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.firebasestorage.app",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);

const ai = getAI(app, { backend: new VertexAIBackend() });

5. Créer le modèle de requête côté serveur

Au lieu de coder en dur des requêtes d'IA complexes dans l'application cliente, vous utiliserez la syntaxe Dotprompt pour gérer les instructions de manière sécurisée sur le serveur.

Cela empêche les utilisateurs finaux de voir les règles secrètes "Budget de compensation".

  1. Dans la console Firebase, accédez à la section Vertex AI ou Gestion des requêtes.
  2. Créez un modèle de prompt et nommez-le product-agent.
  3. Définissez le modèle sur gemini-2.5-flash.
  4. Définissez le schéma d'entrée exactement comme suit :
    input:
  schema:
    query:
      type: string
      description: the customers ask of the robot
    productId?:
      type: string
      description: the product the customer is looking at right now
    history?:
      type: array
      description: list of previous history between the user and system
      items:
        type: object
        required: [role, contents]
        properties:
          role:
            type: string
          contents:
            type: string
  5. Copiez le contenu de agent-product.prompt à partir du répertoire racine dans le champ Requête et instructions système facultatives. Cette instruction indique au modèle comment se comporter en tant qu'opérateur robuste et injecte le catalogue de produits de manière sécurisée.
  6. Dans la console Firebase, enregistrez et publiez le modèle product-agent.

6. Appeler le modèle d'IA

Maintenant que le modèle est défini de manière sécurisée sur le serveur, il vous suffit de l'appeler depuis le frontend de votre application.

  1. Dans votre éditeur de code, revenez à src/firebase.ts.
  2. Sous l'initialisation, utilisez getTemplateGenerativeModel pour vous connecter au modèle :
    const model = getTemplateGenerativeModel(ai);

export const callCustomerSupportModel = async (query: string, productId?: string, history?: { role: string, contents: string }[]) => {
    // Generate content using the published 'product-agent' template
    const result = await model.generateContent('product-agent', {
        query,
        productId,
        history,
    });
    return result.response.text();
}

7. Sécuriser l'agent avec Firebase App Check

Les modèles d'IA sont puissants, mais ils peuvent également être utilisés de manière abusive si les points de terminaison publics ne sont pas protégés. Vous devez toujours utiliser Firebase App Check pour vous assurer que seule votre application Web réelle peut appeler le modèle génératif Vertex AI, en bloquant les robots et les clients non autorisés.

  1. Dans la console Firebase, accédez à Créer > App Check.
  2. Cliquez sur l'onglet Applications, développez votre application Web (Rugged Web), puis cliquez sur le fournisseur reCAPTCHA Enterprise.
  3. Sélectionnez Créer une clé reCAPTCHA Enterprise et remplissez l'invite :
    • Nom : Codelab Key
    • Domaines : ajoutez localhost et 127.0.0.1 pour autoriser votre serveur Vite local à envoyer des requêtes.
  4. Cliquez sur Enregistrer pour enregistrer l'application.
  5. Une fois enregistré, la console Firebase affichera votre clé de site. Copiez cette chaîne.
  6. Dans votre éditeur de code, ouvrez de nouveau src/firebase.ts.
  7. Ajoutez les importations suivantes en haut du fichier :
    import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check";
  8. Ajoutez l'initialisation App Check juste après votre appel initializeApp(firebaseConfig) et collez la clé de site que vous avez copiée :
    // Initialize App Check
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaEnterpriseProvider('YOUR_RECAPTCHA_ENTERPRISE_SITE_KEY'),
  useLimitedUseAppCheckTokens: true
});
  9. Mettez à jour votre appel de fonction getAI() pour utiliser ces jetons. Apportez la modification suivante :
    const ai = getAI(app, { backend: new VertexAIBackend(), useLimitedUseAppCheckTokens: true });
    En définissant la valeur de useLimitedUseAppCheckTokens sur "true", vous vous assurez que des jetons éphémères sont appliqués pour limiter les utilisations abusives que votre backend pourrait subir.

8. Exécuter l'application

Maintenant que votre configuration Firebase est en place et que le widget de chat d'assistance est connecté, il est temps d'exécuter l'application.

  1. Dans votre terminal, exécutez le serveur de développement Vite :
    npm run dev
  2. Ouvrez l'URL locale fournie (généralement http://localhost:5173/).
  3. Cliquez sur le bouton d'action flottant Assistance tactique en bas à droite.
  4. Essayez de poser des questions sur les produits, par exemple :
    • "Je cherche une veste imperméable"
    • "Mon bonnet Sub-Zero est défectueux. Que puis-je faire ?"
    • Continuez à repousser les limites pour déclencher la logique de "budget d'apaisement" de l'IA !

9. (Facultatif) Nettoyer les ressources de l'atelier de programmation

Pour éviter d'éventuels frais sur votre compte de facturation Google Cloud, vous pouvez supprimer les ressources créées lors de cet atelier de programmation.

  1. Accédez à la console Firebase.
  2. Sélectionnez le projet rugged-terrain-ai.
  3. Accédez à Paramètres du projet (icône en forme de roue dentée).
  4. Faites défiler la page jusqu'en bas, puis cliquez sur Supprimer le projet.
  5. Suivez les instructions à l'écran pour confirmer la suppression.

10. Félicitations !

🎊 Mission accomplie ! Vous avez intégré un agent de service client IA robuste et basé sur des modèles.

Ce que vous avez accompli :

  • Firebase initialisé et le backend Vertex AI sur une application cliente.
  • Configuration d'un modèle d'invite côté serveur sécurisé à l'aide de Handlebars et de schémas d'entrée stricts pour définir le comportement complexe de l'agent.
  • Appel dynamique d'un LLM, transmettant de manière sécurisée l'historique des discussions et les ID de produits contextuels sans exposer la logique de prompt interne au client.

Étape suivante

  • Firebase App Check : sécurisez vos points de terminaison d'IA contre les utilisations abusives.