Tutoriel Google Antigravity : créer un tableau de bord de risques financiers

Étape 5 : passer en revue l'Artifact de checklist des tâches

Une fois le squelette en place, l'agent génère un Artifact de checklist des tâches pour l'ensemble du projet.

Chaque section contient des cases à cocher, par exemple :

• Initialiser un projet Next.js avec TypeScript et Tailwind CSS
• Configurer la bibliothèque de composants shadcn/ui
• Page Épargne/Obligations/Fonds indiciels/Crypto avec profil de risque
• Mettre en œuvre le mode sombre, des animations et un layout responsive
• Tester la navigation et la fonctionnalité des curseurs

Une fois cette liste prête, l'agent enchaîne tâche par tâche. À ce stade, vous pouvez ouvrir la barre latérale Explorer pour voir ce que l'agent a créé :

Vous disposez maintenant d'une structure Next.js, Tailwind et shadcn/ui standard, prête à être personnalisée pour cette application.

Étape 6 : passer en revue le plan de mise en œuvre

En parallèle de la checklist, Antigravity génère un Artifact de plan de mise en œuvre plus détaillé :

La section User Review Required inclut généralement :

• Approche de design : informations sur le mode sombre, les dégradés, les animations et le responsive de l'application.
• Modèle de données : les métriques de risque pour l'épargne, les obligations, les fonds indiciels et la crypto de notre application de risque financier.
• Structure applicative centrale : description des modifications des fichiers de layout principaux pour définir styles globaux, typographies, métadonnées, page d'accueil et thème sombre.
• Pages produit : la liste des pages Next.js dédiées comme /savings, /bonds, /index-funds, /crypto, et les informations spécifiques affichées (risque, volatilité, rendement).
• Composants partagés : définition des composants UI réutilisables (barre de navigation, cartes de profil de risque, calculateur de rendement, cartes d'aperçu des produits) utilisés sur la page d'accueil et les pages produit.
• Utilitaires et types : utilitaires TypeScript de lib/financial-data.ts contenant données produits, profils de risque, calculs de rendements projetés et fonctions d'aide pour le formatage des montants et pourcentages.
• Plan de vérification : détail de la stratégie de test : démarrage du serveur de dév, contrôle manuel de chaque page et curseur, validation du mode sombre et du responsive, et enregistrement d'un parcours complet avec captures via l'agent navigateur.

Nous pouvons ajuster les valeurs de risque pour des données plus réalistes ou ajouter des exigences. Enfin, laissez des commentaires dans les Artifacts Task/Implementation Plan si vous souhaitez que l'agent ajuste sa trajectoire.

Lorsque le plan vous convient, cliquez sur Proceed dans l'onglet Implementation Plan. L'agent commencera alors à modifier et créer des fichiers source dans le répertoire src/, construisant des pages distinctes pour Épargne, Obligations, Fonds indiciels et Crypto.

Au passage, il créera des composants réutilisables pour les cartes, curseurs et graphiques, et appliquera les styles Tailwind et shadcn/ui à l'ensemble de l'app.

Enfin, vous verrez de nouvelles Background Steps et Progress Updates pour chaque modification de code.

Étape 7 : tests et vérification

Une fois la mise en œuvre terminée, Antigravity passe en phase de tests et vérification. Un nouvel élément de progression apparaît : Antigravity vous demandera d'utiliser le navigateur via les boutons Setup ou Deny. Cliquez simplement sur Setup pour continuer.

Avant que l'agent puisse interagir avec le navigateur, vous avez besoin de l'extension officielle.

Rendez-vous sur la fiche du Chrome Web Store et cliquez sur Add to Chrome.

Après l'installation, lorsque l'agent contrôle le navigateur, un halo apparaît autour de l'écran, comme ci-dessous :

Ce halo indique que l'agent Antigravity utilise activement le navigateur : il clique, fait défiler et teste l'application dans le cadre de la vérification.

Étape 8 : passer en revue l'Artifact de démonstration

Une fois les tests terminés, vous verrez un récapitulatif final dans Progress Updates, comme suit :

L'Artifact de Walkthrough contient généralement :

• Des captures d'écran de chaque page
• Un enregistrement de session navigateur où l'agent parcourt l'application
• Un récit de ce qui a été testé (ex. : « Vérifié que le curseur de la page Épargne met à jour les rendements projetés en temps réel »)

Si tout est conforme, cliquez sur Accept all pour appliquer les changements.

Voici notre application finale :

Étape 9 : modifier le tableau de bord

Itérons maintenant sur l'UI. Supposons que vous souhaitiez ajouter un interrupteur sombre/clair dans l'en-tête du tableau de bord et quelques graphiques sur chaque page. Dans la Task ou l'Implementation Plan, ou directement depuis le panneau Agent, vous pouvez demander :

Antigravity va :

• Mettre à jour les composants de layout pour inclure un interrupteur de thème (probablement via les utilitaires de thème de shadcn/ui)
• Ajouter, remplacer ou supprimer des composants de graphiques
• Relancer l'application et tester l'interrupteur dans le navigateur

Cliquez ensuite sur Submit : nos deux commentaires (précédent et nouveau) seront pris en compte.

Étape 10 : analyser les erreurs et déboguer

En pratique, les relectures entraînent souvent des erreurs (selon le modèle), mais Antigravity continue à travailler grâce au Computer Use.

Même en cas d'erreurs, l'agent peut :

• Lire le message d'erreur dans le terminal
• Ouvrir l'application dans le navigateur et reproduire le problème
• Prendre des captures et des enregistrements de l'état en panne
• S'appuyer sur ces indices visuels et logs pour corriger le bug

Vous pouvez suivre le processus en ouvrant le Walkthrough ou en consultant les nouvelles Progress Updates liées au débogage.

À ce stade, vous avez :

• Demandé à un agent de générer une application complète Next.js + Tailwind + shadcn/ui
• Passé en revue et modifié un plan de mise en œuvre structuré
• Laissé Antigravity gérer la configuration, le codage, les tests et la vérification via le navigateur
• Itéré sur l'UI à l'aide de commentaires et de prompts supplémentaires
• Observé l'agent déboguer via computer use et captures d'écran

Notre application finale est maintenant prête pour relecture.

Étape 11 : résultat final

Après itération sur l'interrupteur et le layout, vous obtenez une application finale où les graphiques sont retirés et où le mode clair/sombre fonctionne sur l'ensemble du tableau de bord.

Mode sombre :

Mode clair :

Vous pouvez voir notre tableau de bord en action dans la vidéo ci-dessous :

Conclusion

Google Antigravity fait évoluer le développement, du codage manuel dans un éditeur à une collaboration avec un agent capable de planifier, implémenter et vérifier des fonctionnalités complètes.

Dans un même flux de travail, nous avons vu :

• Planification : checklist des tâches et Artifact de plan de mise en œuvre
• Exécution : la plupart des actions effectuées par l'agent via des commandes terminal, des éditions de fichiers et la construction de l'UI
• Vérification : automatisation du navigateur, enregistrements de démonstration et résumés de tests
• Itération : affinages guidés par commentaires (mode sombre/clair, ajustements de layout), l'agent étant à l'écoute des retours utilisateur
• Débogage : investigation automatisée des erreurs via computer use, ce qui facilite le débogage

Vous pouvez maintenant réutiliser ce schéma pour d'autres démos :

• Un tableau de bord d'intensité d'entraînement
• Un explorateur du bruit urbain
• Une interface de livraison de repas riche en fonctionnalités

Si vous souhaitez en savoir plus sur la création d'agents IA, je vous recommande le cours Building AI Agents with Google ADK.