Premiers pas avec Google Antigravity

1. Introduction

Dans cet atelier de programmation, vous allez découvrir Google Antigravity (appelé Antigravity dans le reste du document), une plate-forme de développement agentique qui fait évoluer l'IDE vers l'ère de l'agent en premier.

Contrairement aux assistants de codage standards qui ne font que compléter les lignes, Antigravity fournit un "centre de contrôle" pour gérer les agents autonomes qui peuvent planifier, coder et même naviguer sur le Web pour vous aider à créer.

Antigravity est conçu comme une plate-forme "agent-first". Cela suppose que l'IA n'est pas seulement un outil d'écriture de code, mais un acteur autonome capable de planifier, d'exécuter, de valider et d'itérer des tâches d'ingénierie complexes avec un minimum d'intervention humaine.

Points abordés

  1. Installer et configurer Antigravity
  2. Découvrez les concepts clés d'Antigravity, comme le gestionnaire d'agents, l'éditeur, le navigateur et plus encore.
  3. Explorer quelques cas d'utilisation avec Antigravity

Prérequis

Antigravity est actuellement disponible en aperçu pour les comptes Gmail personnels. Il est fourni avec un quota sans frais pour utiliser les modèles de premier plan.

Antigravity doit être installé localement sur votre système. Le produit est disponible sur Mac, Windows et certaines distributions Linux. En plus de votre propre machine, vous aurez besoin des éléments suivants :

  • Navigateur Web Chrome
  • Un compte Gmail (compte Gmail personnel).

Cet atelier de programmation s'adresse aux utilisateurs et aux développeurs de tous niveaux, y compris aux débutants.

2. Installation

Nous allons commencer par installer Antigravity. Le produit est actuellement disponible en aperçu. Vous pouvez utiliser votre compte Gmail personnel pour commencer à l'utiliser.

Accédez à la page Téléchargements et cliquez sur la version du système d'exploitation qui s'applique à votre cas. Lancez le programme d'installation de l'application et installez-la sur votre ordinateur. Une fois l'installation terminée, lancez l'application Antigravity. Un écran semblable à celui-ci doit s'afficher :

29fada39721093c.png

Veuillez cliquer sur Suivant à chaque fois. Les étapes clés sont détaillées ci-dessous :

  • Choose setup flow: : cette option vous permet d'importer vos paramètres VS Code ou Cursor existants. Nous allons repartir de zéro.
  • Choose an Editor theme type. Nous allons choisir le thème sombre, mais c'est à vous de décider, selon vos préférences.
  • How do you want to use Antigravity agent :

cf89c9d16394914c.png

Pour mieux comprendre, sachez que cette option n'est pas définitive et peut être modifiée à tout moment, même lorsque vous interagissez avec l'agent.

Avant d'examiner les options, regardons deux propriétés spécifiques (que vous voyez à droite de la boîte de dialogue) :

Règle d'exécution du terminal

Il s'agit de donner à l'agent la possibilité d'exécuter des commandes (applications/outils) dans votre terminal. Trois options s'offrent à vous.

  • Off : n'exécutez jamais automatiquement les commandes de terminal (sauf celles figurant dans une liste d'autorisation configurable).
  • Auto : l'agent décide s'il faut exécuter automatiquement une commande de terminal donnée. Si elle a besoin de votre autorisation, elle le déterminera et vous la demandera.
  • Turbo : exécute toujours automatiquement les commandes de terminal (sauf celles figurant dans une liste de refus configurable).

Règles relatives aux avis

Au fur et à mesure que l'agent effectue sa tâche, il crée différents artefacts (plan de tâche, plan d'implémentation, etc.). La règle d'examen est définie de manière à ce que vous puissiez déterminer qui décide si un examen est nécessaire. Vous pouvez choisir de toujours l'examiner ou de laisser l'agent décider. Par conséquent, trois options sont également disponibles ici.

  • Always Proceed : l'agent ne demande jamais d'avis
  • Agent Decides : l'agent décidera quand demander un examen.
  • Request Review : l'agent demande toujours un avis

Maintenant que nous avons compris cela, les quatre options ne sont que des préréglages spécifiques pour l'exécution et l'examen du terminal pour trois d'entre elles, et une quatrième option disponible où nous pouvons le contrôler complètement. Ces quatre options sont disponibles pour que vous puissiez choisir le degré d'autonomie que vous souhaitez accorder à l'agent pour exécuter des commandes dans le terminal et faire examiner les artefacts avant de passer à la tâche suivante.

Voici les quatre options disponibles :

  • Développement piloté par les agents
  • Développement assisté par un agent
  • Développement axé sur les avis
  • Configuration personnalisée

L'option de développement assisté par l'agent offre un bon équilibre et est recommandée, car elle permet à l'agent de prendre une décision et de revenir vers l'utilisateur pour approbation.

Faites votre choix. Pour l'instant, nous allons opter pour l'approche recommandée.

  • Configure your Editor : choisissez vos préférences.
  • Sign in to Google : Comme indiqué précédemment, Antigravity est disponible en mode Aperçu et sans frais si vous disposez d'un compte Gmail personnel. Connectez-vous dès maintenant à votre compte. Assurez-vous de créer un profil Chrome pour cela. Le navigateur s'ouvre et vous permet de vous connecter. Si l'authentification réussit, un message semblable à celui ci-dessous s'affiche et vous redirige vers l'application Antigravity. Laissez-vous porter par le mouvement.
  • Terms of Use : vous pouvez choisir d'activer ou non l'option, puis cliquer sur Suivant.

Vous arriverez alors au moment de vérité, où Antigravity vous attendra pour collaborer avec vous. Nous sommes prêts à commencer.

3. Gestionnaire d'agents

Antigravity est basé sur la version Open Source de Visual Studio Code (VS Code), mais modifie radicalement l'expérience utilisateur pour donner la priorité à la gestion des agents plutôt qu'à l'édition de texte. L'interface est divisée en deux fenêtres principales distinctes : l'éditeur et le gestionnaire d'agents. Cette séparation des responsabilités reflète la distinction entre la contribution individuelle et la gestion de l'ingénierie.

Gestionnaire d'agents : centre de pilotage

Lorsqu'il lance Antigravity, l'utilisateur n'est généralement pas accueilli par une arborescence de fichiers, mais par le Gestionnaire d'agents, comme illustré ci-dessous :

d5ae91fc746e1bba.png

Cette interface sert de tableau de bord Mission Control. Il est conçu pour l'orchestration de haut niveau, permettant aux développeurs de générer, de surveiller et d'interagir avec plusieurs agents fonctionnant de manière asynchrone dans différents espaces de travail ou tâches.

Dans cette vue, le développeur agit en tant qu'architecte. Ils définissent des objectifs généraux. Voici quelques exemples :

  • Refactoriser le module d'authentification
  • Mettre à jour l'arborescence des dépendances
  • Générer une suite de tests pour l'API Billing

Comme l'indique le diagramme ci-dessus, chacune de ces requêtes génère une instance d'agent dédiée. L'UI fournit une visualisation de ces flux de travail parallèles, affichant l'état de chaque agent, les artefacts qu'ils ont produits (plans, résultats, différences) et toutes les demandes d'approbation humaine en attente.

Cette architecture répond à une limite clé des IDE précédents, qui offraient une expérience de chatbot linéaire et synchrone. Dans une interface de chat traditionnelle, le développeur doit attendre que l'IA ait fini de générer du code avant de poser la question suivante. Dans la vue Gestionnaire d'Antigravity, un développeur peut envoyer cinq agents différents travailler sur cinq bugs différents simultanément, ce qui multiplie efficacement son débit.

Si vous cliquez sur Suivant ci-dessus, vous pouvez ouvrir un espace de travail.

ec72712ea24bf6d5.png

Pensez à l'espace de travail tel que vous le connaissiez dans VS Code, et le tour est joué. Nous pouvons ouvrir un dossier local en cliquant sur le bouton, puis en sélectionnant un dossier pour commencer. Dans mon cas, j'avais un dossier nommé my-agy-projects dans mon dossier personnel, que j'ai sélectionné. Vous pouvez utiliser un dossier complètement différent.

Notez que vous pouvez ignorer complètement cette étape si vous le souhaitez et que vous pourrez ouvrir un espace de travail à tout moment par la suite.

Une fois cette étape terminée, vous serez dans la fenêtre "Agent Manager" (Gestionnaire d'agents), comme indiqué ci-dessous :

156224e223eeda36.png

Vous remarquerez que l'application est immédiatement configurée pour démarrer une nouvelle conversation dans le dossier de l'espace de travail (my-agy-projects) qui a été sélectionné. Notez que vous pouvez utiliser vos connaissances existantes sur l'utilisation d'autres applications d'IA (Cursor, Gemini CLI) et utiliser @ ainsi que d'autres méthodes pour inclure du contexte supplémentaire lors de la création de requêtes.

Examinez les menus déroulants Planning et Model Selection. Le menu déroulant "Sélection du modèle" vous permet de choisir l'un des modèles disponibles pour votre agent. La liste est présentée ci-dessous :

fb0744dc43911365.png

De même, nous constatons que l'agent est en mode Planning par défaut. Mais nous pouvons aussi choisir le mode Fast.

f403e40ad480efc9.png

Voyons ce que dit la documentation à ce sujet :

  • Planning : un agent peut planifier avant d'exécuter des tâches. Utilisez-le pour des recherches approfondies, des tâches complexes ou des travaux collaboratifs. Dans ce mode, l'agent organise son travail en groupes de tâches, produit des artefacts et prend d'autres mesures pour rechercher, réfléchir et planifier son travail de manière approfondie afin d'obtenir une qualité optimale. Vous verrez beaucoup plus de résultats ici.
  • Fast : un agent exécutera les tâches directement. Utilisez-le pour les tâches simples qui peuvent être effectuées plus rapidement, comme renommer des variables, lancer quelques commandes Bash ou d'autres tâches plus petites et localisées. Cela peut être utile lorsque la rapidité est un facteur important et que la tâche est suffisamment simple pour que la qualité ne soit pas un problème.

Si vous connaissez le budget de réflexion et les termes similaires dans les agents, considérez qu'il s'agit de la capacité à contrôler la réflexion de l'agent, ce qui a un impact direct sur le budget de réflexion. Nous allons utiliser les paramètres par défaut pour le moment, mais n'oubliez pas qu'au moment du lancement, le modèle Gemini 3 Pro sera disponible pour tous les utilisateurs selon des quotas limités. Vous verrez donc des messages appropriés si vous avez épuisé ces quotas sans frais pour l'utilisation de Gemini 3.

Passons maintenant un peu de temps sur le gestionnaire d'agents (fenêtre) ici et comprenons quelques éléments, afin de clarifier les éléments de base, la façon de naviguer dans Antigravity et plus encore. La fenêtre du gestionnaire d'agents est présentée ci-dessous :

22f6dcf7b3edc583.png

Veuillez vous référer au schéma ci-dessus avec les numéros :

  1. Inbox : considérez-le comme un moyen de suivre toutes vos conversations au même endroit. Lorsque vous envoyez des agents effectuer des tâches, celles-ci apparaissent dans la boîte de réception. Vous pouvez cliquer sur la boîte de réception pour obtenir la liste de toutes les conversations en cours. En appuyant sur l'une des conversations, vous accédez à tous les messages échangés, à l'état des tâches, à ce que l'agent a produit ou même si une tâche est en attente de votre approbation. C'est un excellent moyen de revenir plus tard à une tâche précédente sur laquelle vous travailliez. Une fonctionnalité très pratique.
  2. Start Conversation : cliquez dessus pour démarrer une nouvelle conversation. Vous serez alors directement redirigé vers le champ de saisie Ask anything.
  3. Workspaces : nous avons mentionné les espaces de travail et le fait que vous pouvez travailler dans l'espace de travail de votre choix. Vous pouvez ajouter d'autres espaces de travail à tout moment et en sélectionner un au début de la conversation.
  4. Playground : c'est un excellent moyen de commencer une conversation avec l'agent, puis de la convertir en espace de travail si vous souhaitez mieux contrôler les fichiers, etc. Considérez-le comme une zone de test.
  5. Editor View : pour l'instant, nous sommes dans la vue "Gestionnaire d'agents". Si vous le souhaitez, vous pouvez à tout moment passer à la vue Éditeur. Le dossier de votre espace de travail et tous les fichiers générés s'affichent. Vous pouvez modifier directement les fichiers ou même fournir des conseils et des commandes intégrés dans l'éditeur pour que l'agent puisse effectuer une action ou apporter des modifications en fonction de vos recommandations ou instructions. Nous aborderons la vue Éditeur en détail dans une section ultérieure.
  6. Browser : Enfin, nous arrivons à l'un des éléments différenciateurs qui rendent Antigravity très puissant : son intégration étroite au navigateur Chrome. Dans la section suivante, nous allons configurer le navigateur.

4. Configurer le navigateur Antigravity

Comme indiqué dans la documentation, lorsque l'agent souhaite interagir avec le navigateur, il appelle un sous-agent de navigateur pour gérer la tâche à accomplir. Le sous-agent de navigateur exécute un modèle spécialisé pour fonctionner sur les pages ouvertes dans le navigateur géré par Antigravity, qui est différent du modèle que vous avez sélectionné pour l'agent principal.

Ce sous-agent a accès à divers outils nécessaires pour contrôler votre navigateur, y compris pour cliquer, faire défiler, taper, lire les journaux de la console et plus encore. Il peut également lire vos pages ouvertes grâce à la capture DOM, aux captures d'écran ou à l'analyse Markdown, et prendre des vidéos.

Cela signifie que nous devons lancer et installer l'extension de navigateur Antigravity. Pour ce faire, commençons une conversation dans l'atelier et suivons les étapes.

Sélectionnez Playground et demandez à l'agent de suivre go to antigravity.google, comme indiqué ci-dessous :

51a373d3da23db56.png

Envoyez la tâche. Vous verrez l'agent analyser la tâche et vous pourrez examiner son processus de réflexion. À un moment donné, il procédera correctement et mentionnera qu'il doit configurer l'agent de navigateur, comme indiqué ci-dessous. Cliquez sur Configurer.

e7119f40e093afd2.png

Le navigateur s'ouvre et affiche un message vous invitant à installer l'extension, comme indiqué ci-dessous :

9a5a43c17980e46c.png

Vous serez alors redirigé vers l'extension Chrome que vous pourrez installer.

f3468f0e5f3bb075.png

Une fois l'extension installée, Antigravity Agent se met au travail et vous indique qu'il a besoin de votre autorisation pour effectuer sa tâche. Vous devriez voir une activité dans la fenêtre de navigateur qui s'est ouverte :

7f0367e00ac36d5a.png

Revenez à la vue Agent Manager. Vous devriez voir ce qui suit :

b9d89e1ebefcfd76.png

C'est exactement ce à quoi nous nous attendions, car nous avons demandé à l'agent de visiter le site Web antigravity.google. Accordez-lui l'autorisation. Vous constaterez que le site Web a été consulté de manière sécurisée, comme indiqué ci-dessous :

77fcc38b5fb4ca7c.png

Inspecter les artefacts

Passons maintenant à la partie intéressante. Une fois que l'agent a terminé son travail, vous devriez pouvoir le voir dans son intégralité. Cela inclut les artefacts, qui sont la base sur laquelle vous établissez votre confiance en termes de travail que vous prévoyez d'effectuer, de ce que vous avez fait jusqu'à présent et de la manière dont vous l'avez vérifié.

Les artefacts comblent le manque de confiance. Auparavant, lorsqu'un agent affirmait avoir corrigé le bug, le développeur devait lire le code pour le vérifier. Dans Antigravity, l'agent produit un artefact pour le prouver.

Antigravity se concentre sur la production d'artefacts clés en fonction de la tâche. Il peut s'agir du plan de tâches, du plan d'implémentation et enfin du plan de procédure pas à pas (avec validation). Dans ces plans, vous devez envisager d'inclure les éléments suivants :

  • Task Lists & Plans : avant d'écrire du code, l'agent génère un plan structuré. L'utilisateur peut consulter, modifier et approuver ce plan.
  • Code Diffs : vues diff standardisées indiquant exactement les lignes qui seront modifiées.
  • Screenshots : l'agent capture l'état de l'UI avant et après une modification.
  • Browser Recordings : pour les interactions dynamiques (par exemple, "Clique sur le bouton de connexion, attends que le spinner disparaisse, vérifie que le tableau de bord se charge"), l'agent enregistre une vidéo de sa session. Le développeur peut regarder cette vidéo pour vérifier que l'exigence fonctionnelle est respectée sans avoir à exécuter l'application lui-même.
  • Test Results : journaux structurés des tests réussis/échoués générés et exécutés par l'agent.

En haut à droite, à côté de l'option "Examiner les modifications dans la vue Agent Manager", vous devriez voir un bouton permettant d'activer ou de désactiver les artefacts. Si les artefacts sont activés, vous pouvez voir la liste des artefacts générés :

5320f447471c43eb.png

La vue "Artifacts" (Artefacts) devrait s'afficher, comme illustré ci-dessous. Dans notre cas, nous avons demandé à l'agent de consulter la page antigravity.google. Il a donc capturé une capture d'écran, créé une vidéo, etc.

19d9738bb3c7c0c9.png

Les développeurs peuvent interagir avec ces artefacts à l'aide de "commentaires de type Google Docs". Vous pouvez sélectionner une action ou une tâche spécifique, fournir une commande comme vous le souhaitez, puis l'envoyer à l'agent. L'agent ingère ensuite ces commentaires et itère en conséquence. Pensez à utiliser des documents Google Docs interactifs, dans lesquels vous fournissez des commentaires à l'auteur, qui les prend ensuite en compte.

5. Revoir la boîte de réception

Si vous avez commencé quelques conversations avec les agents, vous devriez maintenant consulter votre boîte de réception dans la fenêtre de l'Agent Manager. Toutes les conversations s'affichent. Cliquez sur l'une des conversations pour afficher son historique, les artefacts produits et plus encore. Dans notre cas, après avoir exécuté la première conversation, notre boîte de réception affiche la conversation, comme indiqué ci-dessous :

1a2a1bbdd4464ecf.png

Cliquez sur cette conversation pour afficher les détails :

b7e493765cfb1b1a.png

Vous pouvez également poursuivre la conversation à partir de là.

6. L'éditeur

L'éditeur conserve la familiarité de VS Code, ce qui permet de respecter la mémoire musculaire des développeurs expérimentés. Il inclut l'explorateur de fichiers standard, la mise en surbrillance de la syntaxe et l'écosystème d'extensions.

Vous pouvez cliquer sur le bouton Ouvrir l'éditeur en haut à droite de l'Agent Manager pour accéder à l'éditeur.

91f3c96b81d993b9.png

L'éditeur est amélioré grâce à la "conscience de l'agent".

  • Inline Command : l'éditeur est compatible avec le vibe coding et les instructions intégrées. Les utilisateurs peuvent mettre en surbrillance du code et demander à l'agent de "Make this more efficient" ou "Add comments explaining this logic".
  • Agent Side Panel : utilisez le panneau situé à droite de l'éditeur pour interagir directement avec l'agent. Vous pouvez lancer de nouvelles conversations ou donner des instructions pour modifier votre code.

Nous allons examiner quelques cas d'utilisation liés au développement Web, dans lesquels l'agent crée plusieurs fichiers de code. Nous pourrons ensuite consulter l'éditeur pour voir les fichiers, apporter des modifications et interagir directement avec l'agent à partir de là.

7. Basculer entre l'éditeur et le Gestionnaire d'agents

Gardez à l'esprit qu'Antigravity est subjectif, car l'éditeur et le gestionnaire d'agents sont des fenêtres distinctes et les deux sont clairement nécessaires. Vous pouvez passer de l'un à l'autre en cliquant sur le bouton Ouvrir le Gestionnaire d'agents en haut à droite lorsque vous êtes dans l'éditeur, ou sur le bouton Ouvrir l'éditeur en haut à droite lorsque vous êtes dans le Gestionnaire d'agents.

Vous pouvez également utiliser le raccourci clavier suivant pour basculer entre les deux modes : Cmd+E.

8. Cas d'utilisation

Maintenant que nous avons une compréhension de base du produit, examinons quelques cas d'utilisation pour le voir en action. Notez qu'Antigravity est une plate-forme axée sur les agents. Cela signifie que, dans la plupart des cas, nous donnons simplement une instruction à l'agent, qui s'en va ensuite de son côté, effectue sa tâche, demande des autorisations si nécessaire, produit les artefacts, puis nous informe si la tâche est terminée. Par conséquent, nous ne pouvons pas produire chaque résultat de la conversation de l'agent dans chacun des cas d'utilisation suivants. Nous vous fournirons les instructions et quelques captures d'écran nécessaires des résultats attendus, mais vos résultats peuvent être légèrement différents.

Les cas d'utilisation que nous allons aborder vont de l'automatisation de quelques tâches avec des sites externes à la génération et à la vérification de cas de tests unitaires pour un projet, en passant par le développement complet d'un site Web. Commençons.

Actualités en bref

Il s'agit d'un cas d'utilisation simple, mais il peut servir de base pour utiliser le navigateur Web afin de visiter des sites Web, d'extraire des informations, d'effectuer des actions, puis de renvoyer des données à l'utilisateur.

Dans ce cas, nous allons accéder au site Google Actualités et en extraire des informations. Toutefois, vous pouvez facilement tester un site de votre choix et voir ce qu'il se passe.

Assurez-vous d'être dans Agent Manager et d'avoir sélectionné Playground, comme indiqué ci-dessous :

cffa12c98a68cb6c.png

Donnez ensuite l'instruction suivante :

8513d489eea0b014.png

Cela lancera le processus de l'agent et déterminera qu'il doit lancer le navigateur, etc. Vous devez porter une attention particulière au processus de réflexion et voir comment l'agent effectue son travail. Si tout se passe bien, le navigateur Antigravity devrait se lancer et accéder au site, comme indiqué ci-dessous. La bordure bleue autour du site indique que l'agent contrôle désormais le navigateur et navigue sur le site pour obtenir les informations.

9d594588f2ffe6bc.png

Une fois l'opération terminée, vous devriez également voir les artefacts générés, comme indiqué ci-dessous :

dc6cf4e7d8425df8.png

Voici un exemple d'exécution par l'agent :

fb7397cd2cce0682.png

Notez qu'à gauche, nous avons le processus de réflexion. Vous pouvez également parcourir les points et afficher la lecture et d'autres données.

À essayer

  • Une fois que vous avez compris cela, choisissez un site Web disponible à partir duquel vous souhaitez que l'agent obtienne ou résume des données. Pensez à un site Web qui, selon vous, comporte des tableaux de bord et des graphiques, et demandez-lui de choisir quelques valeurs.
  • Essayez le prompt suivant : Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

Générer un site Web dynamique avec Python et Flask

Passons maintenant à la génération d'une application Web complète. L'application Web que nous allons créer est un site qui fournit des informations sur un événement technique d'une journée, avec des conférences tout au long de la journée par plusieurs intervenants.

Une fois de plus, assurez-vous d'être dans Agent Manager et d'avoir sélectionné Playground.

Saisissez le prompt suivant :

I would like to generate a website that is a 1-day technical conference informational site.

The website should have the following functionality:
        1. A home page that shows the current date, location, schedule and time table.
        2. The 1-day event is a list of 8 talks in total.
        3. Each talk has 1 or 2 max. speakers. 
        4. A talk has an ID, Title, Speakers, Category (1 or 2), Description and time of the talk.
        5. Each speaker has a First Name, Last Name and LinkedIn url.
        6. Allow for users to search by category, speaker, title.
        7. Give a lunch break of 60 minutes.
        8. Use dummy data for events and speakers, come up with a schedule, the event is about Google Cloud Technologies.
        9. Tech Stack: Python and Flask framework on server side. Front-end is basic HTML, CSS and JavaScript. 
        10. Test out the site on your own for all functionality and provide a detailed README on how to setup, run and make any further changes. 
11. Launch the web application for me to review. 

Vous pouvez commencer la conversation en saisissant la requête ci-dessus :

Au fur et à mesure que l'agent effectue sa tâche, il crée les artefacts :

  • Artefact de tâche
  • Artefact d'implémentation
  • Artefact du tutoriel

L'artefact de tâche ci-dessous correspond à la séquence initiale de tâches que l'agent a déchiffrée et qu'il doit effectuer en fonction de la tâche qui lui a été confiée. Voici un exemple de capture d'écran de l'exécution :

c95d82e1c040698f.png

Vous pouvez ensuite cliquer sur l'artefact Plan d'implémentation. Voici un exemple de capture d'écran :

632169a236bc62cc.png

Enfin, vous avez l'artefact Procédure pas à pas. Il contient tout ce que l'agent a fait, comme indiqué ci-dessous :

e3f6152d6f54d4f9.png

Notez qu'il a démarré le serveur et m'a fourni l'URL. Je clique dessus et j'obtiens l'application. Vous trouverez ci-dessous un exemple de capture d'écran :

abf879f2ce53d055.png

Si vous passez à l'éditeur, vous remarquerez que l'écran contient le dossier dans lequel l'application Python Flask est générée. Vous remarquerez également que Agent mode est tagué à droite. Vous pouvez également poursuivre la conversation à cet endroit.

b0fea8aa65c3a1c5.png

Imaginons maintenant que nous voulions ajouter d'autres conférences à l'événement. Nous pouvons rester dans l'éditeur et dans le panneau de l'agent, puis donner une instruction comme Add two more talks to the schedule.

L'agent analysera alors l'exigence, mettra à jour la tâche et le plan d'implémentation, puis validera également la fonctionnalité mise à jour. Voici un exemple de conversation :

ba8455e6f68973e9.png

Si vous le souhaitez, vous pouvez revenir au Gestionnaire d'agents. Ce processus devrait vous aider à comprendre comment passer d'Agent Manager à Éditeur, apporter les modifications nécessaires, etc.

Remarque : Lors de l'exécution de cette tâche, l'agent a essayé de démarrer le serveur Flask sur le port 5000, qui était utilisé sur la machine actuelle. Il a continué à essayer le prochain port libre jusqu'à ce qu'il décide d'utiliser le port 8080 et qu'il puisse démarrer le serveur.

À essayer

  • Ajoutez les fonctionnalités supplémentaires que vous souhaitez à l'application. Fournissez les détails à l'agent et observez comment il s'y prend pour accomplir sa tâche en modifiant d'abord la liste des tâches, puis le plan d'implémentation, etc.
  • Demandez à l'agent de générer un fichier README ou plus de documentation pour l'application.

Générer une application de productivité simple

Nous allons maintenant générer une application Web de minuteur Pomodoro simple.

Assurez-vous d'être dans Agent Manager et d'avoir sélectionné Playground. Saisissez le prompt suivant :

Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.

Remarquez comment il s'y prend pour créer la liste de tâches et le plan d'implémentation, puis comment il s'y attelle. Continuez à suivre le flux. Il peut arriver que vous soyez invité à l'examiner. Vous trouverez ci-dessous un exemple d'exécution.

5be0a668e5a67d85.png

Dans ce cas, il doit également lancer le navigateur Antigravity, effectuer ses propres tests, puis confirmer que les tests ont réussi. L'un des éléments générés était un artefact multimédia contenant la vidéo de sa validation. C'est un excellent moyen de voir ce qui a été testé. J'ai également suggéré des modifications de style, car elles n'avaient pas été appliquées, et l'IA a pu les effectuer.

L'application finale ressemblait à celle ci-dessous et était plutôt réussie.

c9ab6bca97a51a8c.png

Nous pouvons ajouter une jolie image de minuteur à l'application. Il vous suffit de donner une instruction de suivi comme indiqué ci-dessous :

Add an image to the application that displays a timer.

L'agent a donc ajouté une tâche à l'artefact "Task" :

498dd946d4e9ae55.png

Il a ensuite généré une image au fur et à mesure de l'exécution de sa tâche :

c291da9bdb37ff96.png

Enfin, l'application affichait l'image comme nous l'avions demandé :

de8f418ba8e4600d.png

À essayer

  • Notez que l'arrière-plan de l'icône en forme de sablier dans l'application n'est pas transparent. Essayez de demander à l'agent de rendre l'arrière-plan transparent.
  • Essayez quelques variantes de l'application que vous souhaitez générer. Testez les styles et les images, demandez des modifications, etc.

Générer des tests unitaires, des stubs de simulation et valider des tests

Le dernier cas d'utilisation que nous allons essayer ici consiste à générer des tests unitaires pour un fichier de code spécifique que nous possédons, et à demander à l'agent d'exécuter les tests et de les valider.

Pour ce faire, nous allons utiliser un espace de travail qui ne contient qu'un seul fichier Python, comme indiqué ci-dessous :

from typing import Dict

# --- Custom Exceptions ---
class InventoryShortageError(Exception):
    """Raised when there is not enough item stock."""
    pass

class PaymentFailedError(Exception):
    """Raised when the payment gateway rejects the transaction."""
    pass

class InvalidOrderError(Exception):
    """Raised when the order violates business rules."""
    pass

# --- External Service Interfaces (To be Mocked) ---
class InventoryService:
    def get_stock(self, product_id: str) -> int:
        """Connects to DB to check stock."""
        raise NotImplementedError("Real connection required")

    def decrement_stock(self, product_id: str, quantity: int):
        """Connects to DB to reduce stock."""
        raise NotImplementedError("Real connection required")

class PaymentGateway:
    def charge(self, amount: float, currency: str) -> bool:
        """Connects to Stripe/PayPal."""
        raise NotImplementedError("Real connection required")

# --- Main Business Logic ---
class Order:
    def __init__(self, 
                 inventory_service: InventoryService, 
                 payment_gateway: PaymentGateway,
                 customer_email: str,
                 is_vip: bool = False):
        
        self.inventory = inventory_service
        self.payment = payment_gateway
        self.customer_email = customer_email
        self.is_vip = is_vip
        self.items: Dict[str, Dict] = {} # {product_id: {'price': float, 'qty': int}}
        self.is_paid = False
        self.status = "DRAFT"

    def add_item(self, product_id: str, price: float, quantity: int = 1):
        """Adds items to the cart. Rejects invalid prices or quantities."""
        if price < 0:
            raise ValueError("Price cannot be negative")
        if quantity <= 0:
            raise ValueError("Quantity must be greater than zero")

        if product_id in self.items:
            self.items[product_id]['qty'] += quantity
        else:
            self.items[product_id] = {'price': price, 'qty': quantity}

    def remove_item(self, product_id: str):
        """Removes an item entirely from the cart."""
        if product_id in self.items:
            del self.items[product_id]

    @property
    def total_price(self) -> float:
        """Calculates raw total before discounts."""
        return sum(item['price'] * item['qty'] for item in self.items.values())

    def apply_discount(self) -> float:
        """
        Applies business logic:
        1. VIPs get flat 20% off.
        2. Regulars get 10% off if total > 100.
        3. No discount otherwise.
        """
        total = self.total_price
        
        if self.is_vip:
            return round(total * 0.8, 2)
        elif total > 100:
            return round(total * 0.9, 2)
        
        return round(total, 2)

    def checkout(self):
        """
        Orchestrates the checkout process:
        1. Validates cart is not empty.
        2. Checks stock for all items.
        3. Calculates final price.
        4. Charges payment.
        5. Updates inventory.
        """
        if not self.items:
            raise InvalidOrderError("Cannot checkout an empty cart")

        # 1. Check Inventory Logic
        for product_id, data in self.items.items():
            available_stock = self.inventory.get_stock(product_id)
            if available_stock < data['qty']:
                raise InventoryShortageError(f"Not enough stock for {product_id}")

        # 2. Calculate Final Price
        final_amount = self.apply_discount()

        # 3. Process Payment
        try:
            success = self.payment.charge(final_amount, "USD")
            if not success:
                raise PaymentFailedError("Transaction declined by gateway")
        except Exception as e:
            # Catching generic network errors from the gateway
            raise PaymentFailedError(f"Payment gateway error: {str(e)}")

        # 4. Decrement Stock (Only occurs if payment succeeded)
        for product_id, data in self.items.items():
            self.inventory.decrement_stock(product_id, data['qty'])

        self.is_paid = True
        self.status = "COMPLETED"
        
        return {"status": "success", "charged_amount": final_amount}

Assurez-vous d'avoir le fichier Python ci-dessus localement dans un dossier et chargez-le en tant qu'espace de travail dans Antigravity.

Il s'agit d'un service de commande simple qui présente les fonctionnalités clés suivantes dans la fonction checkout :

  1. Valide que le panier n'est pas vide.
  2. Vérifiez le stock de tous les articles.
  3. Calcule le prix final.
  4. Paiement des frais.
  5. Met à jour l'inventaire.

Nous allons attribuer à l'agent la tâche de générer des cas de tests unitaires, de fournir des implémentations Mock et d'exécuter les tests pour s'assurer qu'ils réussissent.

Nous allons ouvrir le dossier de notre espace de travail spécifique. Vous remarquerez que nous pouvons désormais utiliser le symbole @ pour faire référence au fichier. Par exemple, nous pouvons effectuer les opérations suivantes :

8368856e51a7561a.png

Une explication s'affiche concernant ce fichier :

b69c217d3372d802.png

Nous pouvons lui demander de générer une meilleure visualisation à l'aide de la requête suivante :

Can you visually show this class for better understanding

da5bd701323818d4.png

L'étape suivante consiste à générer les tests unitaires et à demander à l'agent de les tester. J'ai saisi le prompt suivant :

generate unit tests for this module and test it out with mock implementations.

Il a généré l'artefact de tâche suivant et a effectué sa tâche.

21425379db336dc6.png

Vous pouvez également consulter les détails des tests exécutés :

48f3320cd76b5cd8.png

L'un des fichiers qu'il a générés était également le fichier de test. Voici une capture d'écran de cette page :

8ee68905942825d.png

À essayer

Prenez votre propre code et voyez ce que vous pouvez demander à l'agent de faire, qu'il s'agisse d'ajouter des fonctionnalités ou de refactoriser des parties de votre code.

9. Félicitations

Félicitations, vous avez installé Antigravity, la plate-forme de développement axée sur les agents, et vous avez compris comment l'utiliser. Les différents cas d'utilisation que nous avons testés devraient vous aider à définir vos propres exigences et à découvrir comment Antigravity peut vous aider à les satisfaire.

Documents de référence