Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Commandes et contrôle : orchestrer le développement d'applications avec Gemini et MCP

1. Introduction

Dans cet atelier pratique, vous allez mettre en pratique des compétences de développement modernes en orchestrant Antigravity pour créer une application cloud complète. Vous allez également apprendre à utiliser les compétences MCP et d'agent Developer Knowledge pour améliorer les connaissances de l'agent et la qualité de ses résultats.

Nous allons créer le "Cat Delivery System", une application qui génère des images de chats à l'aide de Gemini 3.1 Flash Image, également appelé Nano Banana 2. Le backend de l'application sera développé à l'aide du SDK Antigravity et déployé sur Cloud Run. Nous allons également créer une interface moderne à l'aide de lit et vite. Le tout sans écrire une seule ligne de code manuellement.

Points abordés

Utiliser la CLI Antigravity en mode Fast et Planning
Donner accès à Antigravity à la documentation Google Developers à l'aide du serveur MCP Developer Knowledge
Installer des compétences personnalisées dans la CLI Antigravity
Utiliser Antigravity pour déployer et auditer des applications

Prérequis

Expérience avec l'utilisation d'un terminal
Lire et comprendre le code
Connaissances de base des agents de codage d'IA
Connaissances de base des concepts du cloud

2. Configuration

Suivez les instructions ci-dessous pour initialiser le projet Google Cloud nécessaire à cet atelier de programmation. Après avoir initialisé le projet, nous vous recommandons d'exécuter cet atelier de programmation sur Cloud Shell, car il est fourni avec tous les outils nécessaires à son exécution.

Si vous préférez exécuter cet atelier de programmation dans votre environnement local, vous devrez installer Python, uv et un éditeur de code avant de continuer. Sauf indication contraire, toutes les instructions de cet atelier de programmation supposent que vous l'exécutez dans Cloud Shell.

Configuration de l'environnement au rythme de chacun

Connectez-vous à la console Google Cloud, puis créez un projet ou réutilisez un projet existant. (Si vous ne possédez pas encore de compte Gmail ou Google Workspace, vous devez en créer un.)

Le nom du projet est le nom à afficher pour les participants au projet. Il s'agit d'une chaîne de caractères non utilisée par les API Google. Vous pourrez toujours le modifier.
L'ID du projet est unique parmi tous les projets Google Cloud et non modifiable une fois défini. La console Cloud génère automatiquement une chaîne unique (en général, vous n'y accordez d'importance particulière). Dans la plupart des ateliers de programmation, vous devrez indiquer l'ID de votre projet (généralement identifié par PROJECT_ID). Si l'ID généré ne vous convient pas, vous pouvez en générer un autre de manière aléatoire. Vous pouvez également en spécifier un et voir s'il est disponible. Après cette étape, l'ID n'est plus modifiable et restera donc le même pour toute la durée du projet.
Pour information, il existe une troisième valeur (le numéro de projet) que certaines API utilisent. Pour en savoir plus sur ces trois valeurs, consultez la documentation.

Vous devez ensuite activer la facturation dans la console Cloud pour utiliser les ressources/API Cloud. L'exécution de cet atelier de programmation est très peu coûteuse, voire sans frais. Pour désactiver les ressources et éviter ainsi que des frais ne vous soient facturés après ce tutoriel, vous pouvez supprimer le projet ou les ressources que vous avez créées. Les nouveaux utilisateurs de Google Cloud peuvent participer au programme d'essai sans frais pour bénéficier d'un crédit de 300 $.

Démarrer Cloud Shell

Bien que Google Cloud puisse être utilisé à distance depuis votre ordinateur portable, nous allons nous servir de Google Cloud Shell pour cet atelier de programmation, un environnement de ligne de commande exécuté dans le cloud.

Dans la console Google Cloud, cliquez sur l'icône Cloud Shell dans la barre d'outils supérieure :

Activer Cloud Shell

Le provisionnement et la connexion à l'environnement prennent quelques instants seulement. Une fois l'opération terminée, le résultat devrait ressembler à ceci :

Capture d'écran du terminal Google Cloud Shell montrant que l'environnement est connecté

Cette machine virtuelle contient tous les outils de développement nécessaires. Elle comprend un répertoire d'accueil persistant de 5 Go et s'exécute sur Google Cloud, ce qui améliore nettement les performances du réseau et l'authentification. Vous pouvez effectuer toutes les tâches de cet atelier de programmation dans un navigateur. Vous n'avez rien à installer.

3. Configurer et authentifier Antigravity CLI

Dans cet atelier, vous allez travailler avec Antigravity (AGY). Agent de codage de Google qui utilise les modèles Gemini de Google pour vous aider à créer des logiciels. Il existe une application de bureau AGY, une interface de ligne de commande (AGY CLI) et un environnement de développement intégré (IDE) qui vous permet d'afficher et de modifier le code avec l'agent. Dans cet atelier, vous allez utiliser la CLI AGY.

De plus, un SDK permet de créer vos propres agents à usage général à l'aide du harnais d'agent Antigravity (considérez le harnais comme le moteur d'Antigravity).

Lancer et authentifier AGY

Appuyez sur le bouton "Ouvrir l'éditeur" pour ouvrir l'éditeur Cloud Shell.

Une fois l'éditeur ouvert, vous pouvez agrandir la fenêtre à l'aide du bouton "Agrandir" dans la barre de menu :

Ouvrez le panneau du terminal à l'aide du menu Terminal > Nouveau terminal ou du raccourci clavier Ctrl+` (Ctrl+accent grave) :

Une nouvelle fenêtre de terminal doit s'ouvrir en bas de l'écran et afficher l'invite Bash :

Ensuite, dans le terminal, créez un répertoire de travail pour votre premier exercice et accédez-y :

mkdir -p ~/hello-agy && cd ~/hello-agy

Dans ce terminal, saisissez agy pour lancer Antigravity CLI :

agy

Une fois agy lancé, vous serez invité à vous authentifier. Sélectionnez Utiliser un projet Google Cloud :

Un lien s'affiche à l'écran. Copiez le lien fourni et collez-le dans un autre onglet de votre navigateur en mode navigation privée.

Utilisez les identifiants élève fournis pour cet atelier afin de vous connecter.

Copiez le code d'autorisation et collez-le dans agy :

Lorsque vous êtes invité à saisir un ID de projet, utilisez l'ID du projet qui s'affiche dans le panneau latéral de cette page.

Enfin, sélectionnez l'emplacement Google Cloud global :

Génère un script rapide pour renvoyer des anecdotes sur les chats.

Générons maintenant un script rapide pour nous faire une idée du fonctionnement de l'interface de ligne de commande AGY.

Demandez à AGY d'écrire un script court qui renvoie des informations sur les chats, puis exécutez-le pour vous :

Write a simple node script that returns cat trivia and run it for me

AGY réfléchira pendant un moment et écrira le script pour vous.

Lorsque AGY vous demande l'autorisation d'exécuter le script de nœud, sélectionnez Oui et appuyez sur Entrée.

Voici à quoi ressemblait la demande d'autorisation pour moi :

Requesting permission for: node cat-trivia.js

Do you want to proceed?
> 1. Yes
  2. Yes, and always allow in this conversation for commands that start with 'node cat-trivia\.js'
  3. Yes, and always allow for commands that start with 'node cat-trivia\.js' (Persist to settings.json)
  4. No

Une fois le script exécuté, AGY vous fournit un récapitulatif de ce qu'il a fait. Voici ce qu'il m'a dit :

I have created and executed a simple Node.js script that returns cat trivia.

### Created File

• cat-trivia.js: A standalone Node.js script that fetches random cat facts from a public API ( https://catfact.ninja/fact ) with built-in fallbacks and ASCII art.

### Execution Output

Running the script using  node cat-trivia.js  produced the following output:

     _._     _,-'""`-._
    (,-.`._,'(       |\`-/|
        `-.-' \ )-`( , o o)
              `-    \`_`"'-

    🐱 Here is your Cat Trivia:
    ----------------------------------------
    "In 1987 cats overtook dogs as the number one pet in America."
    ----------------------------------------

J'aime bien qu'il m'ait même ajouté un dessin ASCII de chat.

Vous pouvez maintenant en savoir plus sur ce qu'il a créé pour vous. Vous pouvez ouvrir l'éditeur et inspecter le code source (je vous encourage vivement à le faire), mais vous pouvez également demander à AGY d'annoter et d'expliquer le code :

Explain the code you generated please

Lisez l'explication et posez des questions complémentaires si vous souhaitez en savoir plus.

Enfin, pour terminer cette tâche, fermez agy en appuyant deux fois sur Ctrl+D.

4. Se connecter à la documentation Google pour les développeurs et l'interroger

Bien que les agents et les modèles deviennent plus intelligents chaque jour, la qualité des réponses dépend fortement de la précision et de l'actualité de leurs connaissances. C'est pourquoi il est important de fournir à l'agent des outils permettant d'extraire la documentation pour les développeurs à jour d'une source fiable. Il peut ainsi éviter de prendre des décisions incorrectes basées sur des connaissances internes ou des suppositions.

Le serveur MCP Google Developer Knowledge permet aux agents de codage de rechercher la documentation officielle de Google pour les produits Firebase, Google Cloud, Android, Maps et de nombreux autres produits Google.

En connectant votre agent directement à la bibliothèque officielle de documentation de Google, vous vous assurez que le code et les conseils qu'il utilise sont à jour et basés sur un contexte faisant autorité.

Pour commencer, activez l'API Developer Knowledge :

gcloud services enable developerknowledge.googleapis.com

Configurer le serveur MCP Developer Knowledge

Suivez les étapes ci-dessous pour créer l'espace de travail de ce projet et configurer le serveur MCP Developer Knowledge pour Antigravity :

Les fichiers de configuration Antigravity pour votre utilisateur sont stockés dans le dossier .gemini de votre répertoire d'accueil. Le schéma ci-dessous en présente une version simplifiée avec les principaux éléments que vous trouverez :

~/.gemini
├── antigravity/
├── antigravity-cli/
│   ├── brain/            # Conversations and artifacts
│   └── settings.json     # CLI settings
├── config/
│   ├── plugins/          # Global / shared plugins
│   └── mcp_config.json   # Global / shared MCP config
├── skills/               # Global / shared skills
│   └── {skill_name}/
│       ├── SKILL.md      # Skill definition
│       └── ...           # [optional] support files, scripts, etc.
└── GEMINI.md             # Global rules

Pour ajouter le serveur MCP Developer Knowledge à l'AGY CLI, modifiez le fichier mcp_config.json dans le dossier ~/.gemini/config.

Tout d'abord, assurez-vous que le dossier de configuration existe et créez un fichier mcp_config.json vide :

mkdir -p ~/.gemini/config && touch mcp_config.json

Ouvrez ensuite ce fichier dans l'éditeur Cloud Shell à l'aide de la commande ci-dessous :

cloudshell edit ~/.gemini/config/mcp_config.json

Enfin, ajoutez la configuration suivante à mcp_config.json. Veuillez noter que vous devez remplacer [[PROJECT_ID]] par l'ID de votre projet. Vous trouverez l'ID de votre projet dans le panneau latéral de ces instructions.

~/.gemini/config/mcp_config.json

{
  "mcpServers": {
    "google-developer-knowledge": {
      "url": "https://developerknowledge.googleapis.com/mcp",
      "authProviderType": "google_credentials",
      "oauth": {
        "scopes": [
          "https://www.googleapis.com/auth/cloud-platform"
        ]
      },
      "timeout": 30000,
      "headers": {
        "X-goog-user-project": "[[PROJECT_ID]]"
      }
    }
  }
}

Vous pouvez maintenant vérifier si le serveur MCP a été chargé correctement à l'aide de la commande à barre oblique /mcp. L'écran qui s'affiche devrait ressembler à ce qui suit :

Le MCP Developer Knowledge est configuré. Voyons maintenant comment il fonctionne.

Générer un script pour créer des photos de chats avec Nano Banana 2

Créons un script simple qui génère des images de chats à l'aide de Nano Banana 2 pour illustrer les fonctionnalités du MCP Developer Knowledge.

Vous devrez exécuter les commandes suivantes dans le terminal. Vous pouvez fermer agy en appuyant deux fois sur Ctrl+D pour revenir au shell.

Commencez par activer l'API AI Platform. Il s'agit de l'API qui permet à votre projet d'effectuer des appels d'API Gemini :

gcloud services enable aiplatform.googleapis.com

Créez un espace de travail pour le générateur de chatons :

mkdir -p ~/nano-banana-kitten && cd ~/nano-banana-kitten

Initialisez le gestionnaire de dépendances :

uv init

Lancez maintenant Antigravity et envoyez-lui le prompt suivant :

Write a script that uses Nano Banana 2 through Vertex AI to generate a picture of a cute kitten, and run the script for me. Use the google-developer-knowledge MCP when researching.

Appuyez sur Ctrl+O pour développer les étapes de réflexion intermédiaires et les lire. Vous devriez voir AGY utiliser le service google-developer-knowledge pour effectuer des requêtes, écrire un script, l'exécuter pour vous et corriger les erreurs qu'il trouve.

Afficher l'image du chat =^_^=

5. Créer l'agent de livraison de chats

Le MCP Google Developer Knowledge est utile pour répondre aux questions à l'aide de la documentation officielle, mais il arrive que les informations dont nous avons besoin soient très spécialisées et introuvables dans la documentation. Dans ce cas, nous pouvons utiliser une autre norme ouverte : les compétences de l'agent.

Les compétences agentiques sont un format ouvert et léger qui permet d'étendre les capacités des agents IA avec des connaissances et des workflows spécialisés. La caractéristique déterminante d'une compétence est ce qu'on appelle la divulgation progressive : au lieu de charger tout le contenu de la compétence dès le début, l'agent n'active la compétence que lorsque cela est nécessaire, en chargeant les informations requises à la demande et en économisant de précieux jetons.

Pour finaliser l'agent de livraison de chats, nous utiliserons le SDK Antigravity comme harnais d'agent. Pour minimiser les frictions et simplifier l'implémentation de l'agent de codage, nous utiliserons également la compétence officielle du SDK Antigravity.

Créer un espace de travail et installer les dépendances

Commencez par créer un dossier pour le projet final :

mkdir -p ~/cat-delivery && cd ~/cat-delivery

Ensuite, utilisez le gestionnaire de packages uv pour initialiser ce dossier et installer quelques dépendances :

uv init && uv add fastapi uvicorn

Installer la compétence Python du SDK AGY

Pour installer des compétences à partir du code source et des places de marché ouvertes, vous pouvez utiliser la Skill CLI de Vercel. Exécutez la commande suivante dans le terminal pour installer la compétence google-antigravity-sdk. Assurez-vous de l'exécuter à partir du dossier de l'espace de travail de l'atelier (~/cdslab).

npx skills add Google-Antigravity/antigravity-sdk-python --skill google-antigravity-sdk --agent antigravity-cli --yes

Le résultat de cette commande devrait ressembler à ceci :

Notez que la commande npx skills add Google-Antigravity/antigravity-sdk-python a automatiquement cloné le dépôt antigravity-sdk-python depuis GitHub. Cette commande peut être utilisée pour installer des skills à partir de n'importe quel dépôt GitHub, à condition qu'il comporte un dossier skills.

Installer des compétences à partir de plug-ins

Une autre façon d'installer des compétences consiste à utiliser le système de plug-ins. Dans Antigravity, les plug-ins vous permettent d'inclure non seulement des compétences, mais aussi des serveurs MCP, des règles et des hooks dans le même package. Elles sont utiles pour créer des extensions cohérentes dans un même package de déploiement.

Comme nous créons une application Web, installez le plug-in modern-web-guidance à l'aide de la commande ci-dessous :

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

Ce plug-in inclut une compétence qui contient les bonnes pratiques de développement Web rédigées par l'équipe Google Chrome.

Relancez agy pour voir ces compétences en action. Dans le prompt d'agy, saisissez /skills pour ouvrir le menu des compétences :

/skills

Vous devriez obtenir un résultat semblable au suivant :

Maintenant que nous avons configuré les compétences du MCP et de l'agent, Antigravity est prêt à travailler sur notre projet avec toutes les informations dont il a besoin pour réussir.

Planifier l'application

Antigravity dispose de deux modes de fonctionnement : rapide et planification. En mode rapide, Antigravity commence à travailler sur la tâche immédiatement. Ce mode est conçu pour les tâches simples et autonomes. Le mode Planification est conçu pour les tâches complexes. L'agent élabore d'abord un plan que vous pouvez examiner et modifier avant de commencer l'implémentation.

Pour activer le mode Planification, vous pouvez utiliser la commande à barre oblique /planning :

/planning

Vous pouvez revenir au mode rapide avec /fast :

/fast

Lorsque vous basculez entre le mode Planification et le mode Rapide, il peut également être utile de changer de modèle. Pour ce faire, utilisez la commande /model :

/model

La liste des modèles disponibles peut être légèrement différente selon votre environnement et votre mode d'authentification :

Pour ce tutoriel, choisissez Gemini 3.5 Flash (Low). Le mot "faible" entre parenthèses indique le niveau de réflexion du modèle. Gemini 3.5 Flash avec une réflexion faible est un modèle très rapide et efficace avec une bonne économie de jetons. Si vous choisissez le niveau de réflexion Moyen ou Élevé, le modèle passera plus de temps à réfléchir et utilisera plus de jetons avant de vous répondre.

Par exemple, dans des scénarios réels, vous pouvez utiliser le modèle le plus performant avec un niveau de réflexion élevé pour la planification et un modèle plus rapide pour l'implémentation. Mais pour notre projet, Gemini 3.5 Flash (Low) est suffisant.

Génération du plan

Repasser en mode planification dans Antigravity :

/planning

Envoyez ensuite la requête suivante pour créer le plan d'implémentation :

Create an application named "Cat Delivery System". This application will be an agent that generates cat pictures using Gemini 3.1 Flash Image (aka Nano Banana 2). The user will interact with the agent whenever it feels the need for a cat picture in their life, whether it be to make them smile, laugh or just brighten their day. Cat pictures can take any form the user desires: anime, cartoon, photorealistic, 3D render, etc. The only rule is ABSOLUTELY NO DOGS - steer the user towards cats if necessary. P.S.: capybaras are allowed.

The tech stack should be as follows:
- uv package manager
- Backend: agent using Antigravity SDK
- Frontend: simple chat window, light mode, lit / vite
- Model: Gemini 3.5 Flash for the root agent, Gemini 3.1 Flash Image for image generation

TODO:
- backend should serve a static frontend
- define the contract between frontend and backend before starting implementation
- use Google Cloud Project auth

Vous allez voir que, dans la phase de recherche, Antigravity peut invoquer à la fois le MCP Developer Knowledge et une ou plusieurs compétences :

Une fois le plan terminé, vous serez invité à l'examiner :

Veuillez porter une attention particulière au coin inférieur droit de l'écran : un message indique 1 artefact et vous invite à utiliser /artifact pour l'examiner. Dans Antigravity, les fichiers d'assistance tels que les plans, les listes de tâches et les procédures pas à pas sont appelés "artefacts" pour les différencier des fichiers standards qui font partie de la solution (par exemple, le code source).

Saisissez la commande /artifact dans la requête pour afficher le plan et le commenter si vous devez l'ajuster.

/artifact

L'écran qui s'affiche devrait ressembler à ce qui suit :

Notez qu'un fichier nommé implementation_plan.md contient les options permettant d'ouvrir, d'approuver ou de refuser. Pour l'ouvrir, appuyez sur Entrée. Voici un exemple de plan sur mon système :

Vous pouvez faire défiler l'écran vers le haut et vers le bas à l'aide des touches fléchées, et ajouter un commentaire sur n'importe quelle ligne en appuyant sur la touche C.

La section "Plan de validation" est importante à vérifier. C'est ici que vous pouvez valider et ajouter des étapes de validation pour que le modèle sache qu'il a terminé la tâche.

Ajoutez des commentaires au plan jusqu'à ce qu'il vous convienne, puis appuyez sur ÉCHAP pour revenir en arrière. Appuyez ensuite sur "Y" pour confirmer l'envoi des commentaires à l'agent :

Une fois que vous avez appuyé sur "Y", l'agent commence immédiatement à travailler. L'agent peut demander d'autres confirmations d'appel d'outil à mesure qu'il progresse dans l'implémentation.

Vous remarquerez peut-être que le nombre d'artefacts augmente au fil du temps. En plus du plan, Antigravity créera également une liste de tâches (task.md) pour suivre chaque élément à implémenter ou chaque action à effectuer. Une fois terminé, il créera un fichier de procédure pas à pas (walkthrough.md) expliquant les objectifs atteints. Vous pouvez inspecter tous ces éléments à l'aide de la commande /artifact.

Vous pouvez ouvrir ces fichiers à tout moment et y ajouter des commentaires. Lorsque vous les enverrez à l'agent, ils seront mis en file d'attente pour exécution, tout comme une requête en file d'attente. Il est recommandé d'ajouter des commentaires à ces fichiers pour fournir à l'agent des informations supplémentaires sur votre demande.

6. Déployer l'agent dans le cloud

Vous êtes maintenant prêt à le déployer dans le cloud à l'aide de Cloud Run. Comme cette tâche ne nécessite pas de plan élaboré, nous pouvons utiliser le mode rapide.

Passez en mode rapide avec /fast :

/fast

Utilisez la requête suivante pour demander à Antigravity de déployer l'agent CDS sur Cloud Run :

Deploy the agent and frontend to Cloud Run.

TODO:
- backend should serve a static frontend
- frontend and backend are deployed in the same container

Acceptance Criteria
- Agent is deployed to cloud run
- Frontend is live and renders with no errors
- Backend is live and responds to requests with no errors

7. Félicitations !

Dans cet atelier, vous avez pratiqué le développement moderne avec Antigravity, y compris comment étendre ses capacités avec les serveurs MCP et les compétences des agents. Vous avez également créé une application complète à l'aide du SDK Antigravity et de Gemini 3.1 Flash Image. Votre parcours d'apprentissage ne s'arrête pas là : consultez d'autres ateliers de programmation sur cette plate-forme et continuez à développer vos compétences en programmation agentique.