Utiliser les compétences d'agent d'IA (avec Gemini CLI et Agent Skills pour Firebase)

1. Introduction

Dans cet atelier, vous allez apprendre à créer des compétences agentiques pour fournir aux LLM un accès à des connaissances et des workflows personnalisés. Vous allez créer une compétence locale accessible depuis Gemini CLI.

Objectifs de l'atelier

• Créer vos propres compétences agentiques pour vos sujets préférés
• Utiliser Gemini CLI pour interroger votre compétence
• Installer les compétences agentiques officielles pour Firebase et les utiliser pour créer et déployer une application

Points abordés

• Structurer une compétence
• Écrire un fichier SKILL.md
• Utiliser des compétences locales avec Gemini CLI

2. Configuration du projet

1. Si vous ne possédez pas encore de compte Google, vous devez en créer un.
   • Utilisez un compte personnel au lieu d'un compte professionnel ou scolaire. Les comptes professionnels et scolaires peuvent être soumis à des restrictions qui vous empêchent d'activer les API nécessaires pour cet atelier.
2. Connectez-vous à la console Google Cloud.
3. Activez la facturation dans la console Cloud.
   • L'exécution de cet atelier ne devrait pas coûter plus de 1 $en ressources Cloud.
   • Vous pouvez suivre les étapes à la fin de cet atelier pour supprimer des ressources et éviter des frais supplémentaires.
   • Les nouveaux utilisateurs peuvent bénéficier de l'essai sans frais de 300$.
4. Créez un projet ou choisissez de réutiliser un projet existant.
   • Si une erreur concernant le quota de projet s'affiche, réutilisez un projet existant ou supprimez-en un pour en créer un.

3. Ouvrir l'éditeur Cloud Shell

1. Cliquez sur ce lien pour accéder directement à l'éditeur Cloud Shell.
2. Si vous êtes invité à autoriser à tout moment aujourd'hui, 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
4. Dans le terminal, définissez votre projet à l'aide de la commande suivante :
   • Format:

     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 lister tous vos ID de projet avec :

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
5. Le message suivant doit s'afficher :

   Updated property [core/project].
   

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

4. Créer votre compétence personnalisée

Les compétences agentiques sont des répertoires contenant au minimum un fichier SKILL.md qui fournit des instructions et des connaissances à un agent d'IA. Dans cette section, vous allez créer une compétence qui apprend à Gemini CLI vos sujets préférés.

1. Créez un répertoire pour cet atelier et accédez-y :

   mkdir ~/agent-skills-lab && cd ~/agent-skills-lab
   

2. Créez un répertoire pour la compétence de votre projet :

   mkdir -p ~/agent-skills-lab/.agents/skills/my-favorite-things
   

3. Créez et ouvrez un fichier SKILL.md pour votre compétence :

   cloudshell edit ~/agent-skills-lab/.agents/skills/my-favorite-things/SKILL.md
   

   La commande cloudshell edit ouvre le fichier SKILL.md dans l'éditeur au-dessus du terminal.
4. Ajoutez le contenu suivant au fichier SKILL.md :

   ---
   name: my-favorite-things
   description: Provides personal information about my favorite color, food, and programming language. Use this skill when the user asks questions about my personal preferences or favorite things.
   ---
   
   # Knowledge
   
   - **Favorite Color:** Blue
   - **Favorite Food:** Pizza
   - **Favorite Programming Language:** Python
   
   If asked about one of my favorite things, please respond with the information provided above.
   

Avec un seul fichier SKILL.md, vous avez créé votre première compétence. Il est temps d'utiliser cette compétence dans Gemini CLI.

5. Utiliser votre compétence depuis Gemini CLI

Maintenant que vous avez créé une compétence, elle est déjà détectable par Gemini CLI, car elle se trouve dans le répertoire .agents/skills.

1. Démarrez Gemini CLI :

   gemini
   

   Gemini CLI doit reconnaître la nouvelle compétence. Vous devrez peut-être appuyer sur Enter pour accepter certains paramètres par défaut.

Remarque : Gemini CLI est préinstallé dans Cloud Shell.

1. Demandez à Gemini de lister les compétences disponibles dans son contexte :

   /skills
   

   my-favorite-things doit s'afficher dans la liste des compétences disponibles.
2. Demandez à Gemini votre couleur préférée :

   What is my favorite color?
   

   Gemini CLI doit utiliser la compétence my-favorite-things pour répondre à votre question. Si vous y êtes invité, autorisez Gemini CLI à utiliser la compétence.

Le résultat doit indiquer que Gemini CLI a utilisé votre compétence et a répondu par "Bleu" ou "Ma couleur préférée est le bleu".

Vous avez réussi ! Vous avez créé une compétence et l'avez testée à l'aide de Gemini CLI.

Pour terminer votre session, saisissez /quit, puis appuyez sur Enter pour quitter Gemini CLI.

6. (Facultatif) Créer et déployer une application sur Firebase Hosting

En plus de créer vos propres compétences, vous pouvez installer celles créées par d'autres utilisateurs. Cela illustre l'utilisation de compétences portables, c'est-à-dire des modules autonomes de connaissances, d'instructions et de workflows qui peuvent être facilement partagés et réutilisés.

Les compétences agentiques pour Firebase sont un excellent exemple de ces modules portables. Elles sont conçues pour aider les assistants d'IA à comprendre les bonnes pratiques Firebase et à exécuter des tâches complexes avec une plus grande précision et un coût de jeton inférieur.

Utilisez maintenant les compétences agentiques pour Firebase afin de créer une application Web "To Do" avec authentification utilisateur et base de données, puis déployez-la sur Firebase Hosting.

Configurer votre projet

1. Si vous êtes toujours dans Gemini CLI, saisissez /quit pour quitter.
2. Créez un répertoire pour votre projet et accédez-y :

   mkdir ~/todo-app && cd ~/todo-app
   

3. Connectez-vous à Firebase avec votre compte Google. Utilisez l'indicateur --no-localhost, car vous êtes dans Cloud Shell :

   firebase login --no-localhost
   

   1. Interagissez avec les invites de la CLI:
      • Lorsque vous êtes invité à répondre à la question Enable Gemini in Firebase features?, saisissez Y (pour Yes) et appuyez sur Enter.
      • Lorsque vous êtes invité à répondre à la question Allow Firebase to collect CLI and Emulator Suite usage and error reporting information?, saisissez Y (pour Yes) et appuyez sur Enter.
   2. Autorisez dans le navigateur:
      • Une URL s'affiche dans le terminal. Cliquez sur le lien pour ouvrir la page de connexion dans un nouvel onglet du navigateur.
      • Étape 1 sur 3 (Confirmer la commande) : cliquez sur Oui, je viens d'exécuter cette commande.
      • Étape 2 sur 3 (Confirmer l'ID de session) : assurez-vous que l'ID de session correspond à ce qui s'affiche dans votre terminal, puis cliquez sur Oui, il s'agit de mon ID de session.
      • Étape 3 sur 3 (Copier le code) : cliquez sur Copier pour copier le code d’autorisation dans le presse-papiers.
   3. Terminez la connexion:
      • Revenez au terminal Cloud Shell et collez le code d'autorisation à l'invite ? Enter authorization code:.
      • Appuyez sur Enter.
   Un message de confirmation doit s'afficher : ✔ Success! Logged in as .

Conseil : Lorsque vous collez le code d'autorisation dans Cloud Shell, recherchez une boîte de dialogue Chrome vous demandant des autorisations pour le presse-papiers et assurez-vous qu'elle est activée. Vous pouvez utiliser Ctrl+Shift+V (Windows) ou CMD+Shift+V (Mac) pour coller le code dans le terminal.

Installer les compétences agentiques pour Firebase

Maintenant que vous avez créé le répertoire de votre projet, vous devez y installer les compétences agentiques pour Firebase.

Vous pouvez installer les compétences agentiques pour Firebase avec la CLI de compétences dans votre terminal :

npx skills add firebase/agent-skills

Lors de l'installation, vous serez invité à sélectionner les compétences à installer. Utilisez les touches fléchées pour parcourir la liste et la barre d'espace pour sélectionner ces compétences.

• firebase-basics
• firebase-hosting-basics
• firebase-auth-basics
• firebase-firestore-enterprise-native-mode

Pour les invites suivantes, vous pouvez accepter les valeurs par défaut en appuyant sur Enter.

Cette commande télécharge et installe des compétences, y compris firebase-basics et firebase-hosting-basics, ce qui les rend disponibles pour une utilisation dans Gemini CLI avec votre compétence my-favorite-things.

Pour en savoir plus sur les compétences agentiques pour Firebase, consultez les compétences disponibles.

Créer et déployer une application Web de base

1. Activez les API requises pour votre projet :

   gcloud services enable \
     cloudresourcemanager.googleapis.com \
     firebase.googleapis.com
   

2. Activez Firebase dans votre projet Google Cloud actuel :

   firebase projects:addfirebase ${GOOGLE_CLOUD_PROJECT}
   

3. Démarrez Gemini CLI :

   gemini
   

4. Demandez à Gemini de générer un index.html de base :

   Generate an index.html file with the content "Hello Firebase Hosting" and
   deploy the application to Firebase Hosting using the current Google Cloud
   Project.
   

   Gemini vous demandera de créer index.html et d'exécuter firebase. Appuyez sur Enter pour l'autoriser à le faire.Gemini CLI doit utiliser les compétences agentiques pour Firebase afin de créer et de déployer votre site Web. Guidez l'agent avec des approbations si nécessaire.

Une fois le déploiement terminé, une URL pour votre application Web doit s'afficher. Utilisez ctrl+click (Windows) ou cmc+click (Mac) pour ouvrir des liens dans le terminal de l'éditeur Cloud Shell. Accédez à l'URL de votre application déployée.

Ajouter Firebase Authentication

1. Démarrez Gemini CLI si ce n'est pas déjà fait :

   gemini
   

   Gemini peut poser des questions telles que "Faites-vous confiance à ce dossier ?". Appuyez sur Enter pour accepter les valeurs par défaut.
2. Demandez maintenant à Gemini d'ajouter la connexion avec Google :

   Generate HTML, CSS, and Javascript for a single page application.
   It should use Google Sign-in with Firebase Authentication.
   A user should be able to sign in with their Google Account.
   Deploy when you are done and give the URL to the user.
   

   Gemini peut vous demander de créer ou de mettre à jour des fichiers tels que index.html, style.css et script.js. Autorisez-le à le faire. Gemini peut vous demander d'effectuer certaines actions dans la console Firebase. La CLI est capable d'effectuer la plupart de ces opérations si vous lui demandez d'essayer, mais il peut être nécessaire d'effectuer les étapes manuellement (comme l'activation de Google OAuth) si votre instance Cloud Shell est installée avec une ancienne version de la CLI Firebase.

Une fois le déploiement terminé, une URL pour votre application Web doit s'afficher. Utilisez ctrl+click (Windows) ou cmc+click (Mac) pour ouvrir des liens dans le terminal de l'éditeur Cloud Shell. Accédez à l'URL de votre application déployée.

Pour que vos dernières modifications s'affichent, vous devrez peut-être effectuer une "actualisation forcée" avec ctrl+shift+R (Windows) ou cmd+shift+R (Mac).

Ajouter Cloud Firestore

1. Démarrez Gemini CLI si ce n'est pas déjà fait :

   gemini
   

   Gemini peut poser des questions telles que "Faites-vous confiance à ce dossier ?". Appuyez sur Enter pour accepter les valeurs par défaut.
2. Demandez à Gemini d'ajouter Firestore pour enregistrer les tâches :

   Update the application to save tasks in Cloud Firestore for the signed-in user.
   A user should be able to add new tasks and see a list of their tasks.
   Deploy when you are done and give the URL to the user.
   

   Gemini met à jour les fichiers. Autorisez-le à le faire.

Une fois le déploiement terminé, une URL pour votre application Web doit s'afficher. Utilisez ctrl+click (Windows) ou cmc+click (Mac) pour ouvrir des liens dans le terminal de l'éditeur Cloud Shell. Accédez à l'URL de votre application déployée.

Pour que vos dernières modifications s'affichent, vous devrez peut-être effectuer une "actualisation forcée" avec ctrl+shift+R (Windows) ou cmd+shift+R (Mac).

Si votre application ne fonctionne pas comme prévu, continuez à utiliser Gemini CLI pour obtenir la fonctionnalité souhaitée. Exemple : shell Hide the task form when the user is logged out. Update the security rules so the user can see their TODOs.

Continuez à expérimenter avec l'atelier pour ajouter les fonctionnalités que vous souhaitez voir dans votre nouvelle application Firebase.

7. Conclusion

Félicitations ! Vous avez créé une compétence et appris à installer des compétences supplémentaires pour Gemini CLI.

(Facultatif) Effectuer un nettoyage

Si vous souhaitez effectuer un nettoyage, vous pouvez supprimer votre projet Cloud pour éviter des frais supplémentaires.

Si vous le souhaitez, supprimez le projet :

gcloud projects delete $GOOGLE_CLOUD_PROJECT

Vous pouvez également supprimer les ressources inutiles de votre disque Cloud Shell pour libérer de l'espace.

1. Supprimez le répertoire de l'atelier (cela supprime à la fois la compétence et l'application) :

   rm -rf ~/agent-skills-lab
   

2. Supprimez le répertoire de l'application "To Do" (si vous l'avez créé en dehors) :

   rm -rf ~/todo-app
   

Si vous devez réinitialiser Cloud Shell à son état par défaut, vous pouvez suivre la documentation officielle pour obtenir des instructions sur la façon de le faire en toute sécurité.