1. Introduction
Dans cet atelier pratique, vous allez vous exercer à des compétences de développement modernes en orchestrant Antigravity pour créer une application complète basée sur le cloud. Vous apprendrez également à utiliser le serveur MCP Developer Knowledge et les compétences agentiques pour améliorer les connaissances de l'agent et la qualité de sa sortie.
Nous allons créer le "Cat Delivery System" (système de livraison de chats), une application qui génère des images de chats à l'aide de Gemini 3.1 Flash Image, également connu sous le nom de 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 un frontend moderne à l'aide de lit et de vite. Tout cela sans écrire une seule ligne de code manuellement.
Points abordés
- Utiliser la CLI Antigravity en mode rapide et en mode planification
- Donner à Antigravity l'accès à la documentation pour les développeurs Google à 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 d'utilisation d'un terminal
- Lecture et compréhension du code
- Connaissances de base des agents de codage IA
- Connaissances de base des concepts cloud
2. Configuration
Suivez les instructions ci-dessous pour initialiser le projet Google Cloud nécessaire à cet atelier de programmation. Une fois le projet initialisé, 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 pouvez modifier ce nom à tout moment.
- 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 :
Le provisionnement et la connexion à l'environnement prennent quelques instants seulement. Une fois l'opération terminée, le résultat devrait ressembler à ceci :
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 la CLI Antigravity
Dans cet atelier, vous allez utiliser Antigravity (AGY). Il s'agit de l'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 (CLI AGY) 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, il existe également un SDK pour 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 devrait s'ouvrir en bas de l'écran, affichant 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 la CLI Antigravity :
agy
Une fois agy lancé, vous serez invité à vous authentifier. Sélectionnez Utiliser un projet Google Cloud :
Un lien s'affiche alors à l'écran. Copiez le lien fourni et collez-le dans un autre onglet de votre navigateur en mode navigation privée.
Utilisez les mêmes identifiants d'étudiant que ceux 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érer un script rapide pour renvoyer des anecdotes sur les chats
Nous allons maintenant générer un script rapide pour vous donner une idée du fonctionnement de la CLI AGY.
Demandez à AGY d'écrire un court script qui renvoie des faits sur les chats et exécutez-le pour vous :
Write a simple node script that returns cat trivia and run it for me
AGY réfléchira un moment et écrira le script pour vous.
Lorsque AGY 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ésumé 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'apprécie qu'il ait même ajouté un dessin ASCII d'un chat pour moi.
Vous voudrez peut-être en savoir plus sur ce qu'il a créé pour vous. Bien que vous puissiez ouvrir l'éditeur et inspecter le code source (je vous encourage vivement à le faire), vous pouvez également demander à AGY d'annoter et de vous 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 pour les développeurs Google et l'interroger
Bien que les agents et les modèles deviennent de plus en plus intelligents chaque jour, la qualité de la réponse 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 à partir d'une source faisant autorité. Il peut ainsi éviter de prendre des décisions incorrectes en se basant sur des connaissances internes ou des suppositions.
Le serveur MCP Developer Knowledge permet aux agents de codage de rechercher la documentation officielle pour les développeurs de Google pour 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 de 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 à la CLI AGY, 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. Le résultat qui s'affiche doit ressembler à ceci :
Le serveur MCP Developer Knowledge est configuré. Voyons maintenant comment il fonctionne.
Générer un script pour créer des images de chats à l'aide de Nano Banana 2
Nous allons créer un script simple qui génère des images de chats à l'aide de Nano Banana 2 pour montrer les capacités du serveur 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.
Tout d'abord, activez l'API AI Platform. Il s'agit de l'API qui permet à votre projet d'effectuer des appels à l'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 serveur MCP Developer Knowledge est utile pour répondre aux questions via la documentation officielle, mais parfois les informations dont nous avons besoin sont très spécialisées et ne se trouvent pas dans la documentation. Dans ce cas, nous pouvons utiliser une autre norme ouverte : les compétences agentiques.
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 que l'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 créer l'agent de livraison de chats, nous allons utiliser le SDK Antigravity comme harnais d'agent. Pour minimiser les frictions et simplifier l'implémentation de l'agent de codage, nous allons également utiliser la compétence officielle du SDK Antigravity.
Créer un espace de travail et installer des dépendances
Tout d'abord, créez un dossier pour le projet final :
mkdir -p ~/cat-delivery && cd ~/cat-delivery
Utilisez ensuite le gestionnaire de paquets 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 ouvrir des marketplaces, vous pouvez utiliser la CLI Skill 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 à partir de GitHub. Cette commande peut être utilisée pour installer des compétences à 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. Les plug-ins d'Antigravity 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. Ils sont utiles pour créer des extensions cohérentes dans un seul bundle 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 pour le développement Web rédigées par l'équipe Google Chrome.
Relancez agy pour voir ces compétences en action. Dans l'invite d'agy, saisissez /skills pour ouvrir le menu des compétences :
/skills
Le résultat qui s'affiche doit ressembler à ceci :
Maintenant que nous avons configuré les compétences MCP et agentiques, Antigravity est prêt à travailler sur notre projet avec toutes les informations dont il a besoin pour réussir.
Planifier l'application
Antigravity possède deux modes de fonctionnement : rapide et planification. En mode rapide, Antigravity commence immédiatement à travailler sur la tâche. Il est conçu pour les tâches autonomes plus simples. Le mode planification est conçu pour les tâches complexes, dans lesquelles 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, sélectionnez Gemini 3.5 Flash (Low). Le mot "low" entre parenthèses signifie le niveau de réflexion du modèle. Gemini 3.5 Flash avec un niveau de réflexion Low est un modèle très rapide et efficace avec une bonne économie de jetons. Si vous choisissez Medium ou High comme niveau de réflexion, vous dépenserez plus de jetons et de temps pour le raisonnement avant que le modèle ne renvoie une réponse.
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) suffit.
Générer le plan
Repassez Antigravity en mode planification :
/planning
Envoyez ensuite le prompt suivant 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 verrez qu'en phase de recherche, Antigravity peut appeler à la fois le serveur MCP Developer Knowledge et une ou plusieurs compétences :
Une fois le plan terminé, vous serez invité à l'examiner :
Veuillez prêter une attention particulière à l'angle inférieur droit de l'écran : un message indique 1 artifact et un conseil d'utiliser /artifact pour l'examiner. Dans Antigravity, les fichiers de support 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).
En saisissant la commande /artifact dans le prompt, vous pourrez voir le plan et le commenter si vous devez apporter des modifications.
/artifact
Le résultat qui s'affiche doit ressembler à ceci :
Notez qu'il existe un fichier nommé implementation_plan.md avec les options permettant de l'ouvrir, de l'approuver ou de le refuser. Appuyez sur Entrée pour l'ouvrir. 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.
Une section importante à vérifier est le "Plan de validation". Vous pouvez y vérifier et ajouter des étapes de validation afin 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 avec le temps. Outre le plan, Antigravity crée également une liste de tâches (task.md) pour suivre chaque élément qu'il doit implémenter ou chaque action qu'il doit effectuer. Une fois terminé, il crée un fichier de procédure pas à pas (walkthrough.md) expliquant les objectifs atteints. Vous pouvez inspecter tous ces éléments en utilisant à nouveau la commande /artifact.
Vous pouvez ouvrir ces fichiers à tout moment et y ajouter des commentaires. Une fois envoyés à l'agent, ils seront mis en file d'attente pour exécution, tout comme un prompt mis en file d'attente. Il est recommandé de commenter ces fichiers pour fournir à l'agent un contexte supplémentaire sur votre requête.
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 Antigravity en mode rapide avec /fast :
/fast
Utilisez le prompt suivant 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 agentiques. 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 codage agentique.