Diese Seite wurde von der Cloud Translation API übersetzt.

Erste Schritte mit Google Antigravity

1. Einführung

In diesem Codelab erfahren Sie mehr über Google Antigravity (im restlichen Dokument als „Antigravity“ bezeichnet), eine agentenbasierte Entwicklungsplattform, die die IDE in das Zeitalter der Agenten weiterentwickelt.

Anders als bei Standard-Coding-Assistenten, die nur Zeilen automatisch vervollständigen, bietet Antigravity eine „Mission Control“ zum Verwalten autonomer Agents, die planen, programmieren und sogar im Web suchen können, um Sie beim Entwickeln zu unterstützen.

Antigravity ist als „Agent-First“-Plattform konzipiert. Dabei wird davon ausgegangen, dass die KI nicht nur ein Tool zum Schreiben von Code ist, sondern ein autonomer Akteur, der in der Lage ist, komplexe Engineering-Aufgaben mit minimalem menschlichen Eingriff zu planen, auszuführen, zu validieren und zu wiederholen.

Lerninhalte

Antigravity installieren und konfigurieren
Schlüsselkonzepte von Antigravity kennenlernen, z. B. Agent Manager, Editor und Browser
Einige Anwendungsfälle mit Antigravity

Voraussetzungen

Antigravity ist derzeit als Vorschauversion für private Gmail-Konten verfügbar. Es enthält ein kostenloses Kontingent für die Verwendung von Premium-Modellen.

Antigravity muss lokal auf Ihrem System installiert sein. Das Produkt ist für Mac, Windows und bestimmte Linux-Distributionen verfügbar. Neben Ihrem eigenen Computer benötigen Sie Folgendes:

Chrome-Webbrowser
Ein Gmail-Konto (privates Gmail-Konto).

Dieses Codelab richtet sich an Nutzer und Entwickler aller Erfahrungsstufen, auch an Anfänger.

2. Installation

Wir beginnen mit der Installation von Antigravity. Das Produkt ist derzeit als Vorschauversion verfügbar. Sie können es mit Ihrem privaten Gmail-Konto verwenden.

Rufen Sie die Seite Downloads auf und klicken Sie auf die entsprechende Betriebssystemversion für Ihren Fall. Starten Sie das Installationsprogramm der Anwendung und installieren Sie die Anwendung auf Ihrem Computer. Starten Sie nach Abschluss der Installation die Antigravity-App. Sie sollten einen Bildschirm ähnlich dem folgenden sehen:

Klicken Sie jeweils auf Weiter, um fortzufahren. Die wichtigsten Schritte sind unten aufgeführt:

Choose setup flow:: Dadurch wird die Option zum Importieren aus Ihren vorhandenen VS Code- oder Cursor-Einstellungen aufgerufen. Wir beginnen von vorn.
Choose an Editor theme type. Wir werden das dunkle Design verwenden, aber das liegt ganz bei dir.
How do you want to use Antigravity agent:

Sehen wir uns das genauer an. Die Einstellungen sind nicht in Stein gemeißelt und können jederzeit geändert werden, auch während Sie mit dem Agent interagieren.

Bevor wir uns die Optionen ansehen, betrachten wir zwei bestimmte Properties, die rechts im Dialogfeld angezeigt werden:

Richtlinie für die Terminalausführung

Dabei geht es darum, dem Agent die Möglichkeit zu geben, Befehle (Anwendungen/Tools) in Ihrem Terminal auszuführen. Hier haben Sie drei Möglichkeiten.

Off: Terminalbefehle niemals automatisch ausführen (außer Befehle in einer konfigurierbaren Zulassungsliste)
Auto: Der Agent entscheidet, ob ein bestimmter Terminalbefehl automatisch ausgeführt wird. Falls die App Ihre Berechtigung benötigt, wird sie Sie danach fragen.
Turbo: Terminalbefehle immer automatisch ausführen (außer Befehle in einer konfigurierbaren Sperrliste)

Richtlinie für Rezensionen

Während der Agent seine Aufgabe erledigt, erstellt er verschiedene Artefakte (Aufgabenplan, Implementierungsplan usw.). Die Überprüfungsrichtlinie ist so festgelegt, dass Sie bestimmen können, wer entscheidet, ob eine Überprüfung erforderlich ist. Sollten Sie es immer überprüfen oder den Agenten entscheiden lassen? Dementsprechend gibt es auch hier drei Möglichkeiten.

Always Proceed: Agent fordert nie eine Rezension an
Agent Decides: Der Agent entscheidet, wann er um eine Überprüfung bittet.
Request Review: Der Kundenservicemitarbeiter bittet immer um eine Rezension.

Nachdem wir das verstanden haben, sind die vier Optionen nichts anderes als bestimmte Voreinstellungen für die Ausführung im Terminal. Für drei davon gibt es Richtlinien für die Überprüfung. Die vierte Option bietet die Möglichkeit, die Ausführung vollständig anzupassen. Mit diesen vier Optionen können wir festlegen, wie viel Autonomie Sie dem Agenten geben möchten, um Befehle im Terminal auszuführen und Artefakte überprüfen zu lassen, bevor er mit der Aufgabe fortfährt.

Die vier Optionen sind:

Agent-gesteuerte Entwicklung
Agent-gestützte Entwicklung
Rezensionsgesteuerte Entwicklung
Benutzerdefinierte Konfiguration

Die Option für die Entwicklung mit Unterstützung durch den Agent bietet ein gutes Gleichgewicht und wird empfohlen, da der Agent eine Entscheidung treffen und den Nutzer um Genehmigung bitten kann.

Wählen Sie also eine Option aus. Idealerweise entscheiden Sie sich erst einmal für den empfohlenen Ansatz.

Configure your Editor: Wählen Sie Ihre Einstellungen aus.
Sign in to Google: Wie bereits erwähnt, ist Antigravity im Vorschaumodus verfügbar und kostenlos, wenn Sie ein privates Gmail-Konto haben. Melden Sie sich jetzt mit Ihrem Konto an. Achten Sie darauf, dass dafür ein neues Chrome-Profil erstellt wird. Dadurch wird der Browser geöffnet und Sie können sich anmelden. Bei erfolgreicher Authentifizierung wird eine Meldung wie die unten stehende angezeigt und Sie werden zur Antigravity-App zurückgeleitet. Lass dich treiben.
Terms of Use: Sie können entscheiden, ob Sie die Funktion aktivieren möchten, und dann auf Weiter klicken.

Sie werden dann zum entscheidenden Moment weitergeleitet, in dem Antigravity mit Ihnen zusammenarbeiten kann. Wir sind bereit.

3. Agent Manager

Antigravity basiert auf dem Open-Source-Projekt Visual Studio Code (VS Code), verändert die Benutzeroberfläche jedoch radikal, um die Verwaltung von Agents gegenüber der Textbearbeitung zu priorisieren. Die Benutzeroberfläche ist in zwei separate Hauptfenster unterteilt: Editor und Agent Manager. Diese Trennung der Zuständigkeiten spiegelt die Unterscheidung zwischen individuellen Beiträgen und dem Engineering-Management wider.

Agent Manager: Mission Control

Beim Starten von Antigravity wird dem Nutzer in der Regel nicht ein Dateibaum, sondern der Agent Manager angezeigt, wie unten dargestellt:

Diese Oberfläche dient als Mission Control-Dashboard. Es ist für die Orchestrierung auf hoher Ebene konzipiert und ermöglicht es Entwicklern, mehrere Agents zu starten, zu überwachen und mit ihnen zu interagieren, die asynchron in verschiedenen Arbeitsbereichen oder Aufgaben ausgeführt werden.

In dieser Ansicht fungiert der Entwickler als Architekt. Sie definieren übergeordnete Ziele, z. B.:

Authentifizierungsmodul umgestalten
Abhängigkeitsbaum aktualisieren
Testsuite für die Billing API generieren

Wie im Diagramm oben zu sehen ist, wird für jede dieser Anfragen eine eigene Agent-Instanz erstellt. Die Benutzeroberfläche bietet eine Visualisierung dieser parallelen Arbeitsabläufe und zeigt den Status jedes Agents, die von ihm erstellten Artefakte (Pläne, Ergebnisse, Unterschiede) und alle ausstehenden Anfragen zur Genehmigung durch Menschen an.

Diese Architektur behebt eine wichtige Einschränkung früherer IDEs, die eher wie Chatbots funktionierten und linear und synchron waren. In einer herkömmlichen Chatoberfläche muss der Entwickler warten, bis die KI den Code generiert hat, bevor er die nächste Frage stellen kann. In der Manager-Ansicht von Antigravity kann ein Entwickler fünf verschiedene Agents gleichzeitig mit fünf verschiedenen Bugs beauftragen und so den Durchsatz effektiv vervielfachen.

Wenn Sie oben auf Weiter klicken, haben Sie die Möglichkeit, einen Arbeitsbereich zu öffnen.

Stellen Sie sich Workspace so vor, wie Sie es aus VS Code kennen. Wir können einen lokalen Ordner öffnen, indem wir auf die Schaltfläche klicken und dann einen Ordner auswählen. In meinem Fall hatte ich einen Ordner mit dem Namen my-agy-projects in meinem Home-Ordner und habe diesen ausgewählt. Sie können auch einen ganz anderen Ordner verwenden.

Hinweis: Sie können diesen Schritt auch überspringen und einen Arbeitsbereich später öffnen.

Nachdem Sie diesen Schritt abgeschlossen haben, wird das Fenster „Agent Manager“ angezeigt, das unten zu sehen ist:

Die Anwendung ist sofort darauf ausgerichtet, eine neue Unterhaltung im ausgewählten Arbeitsbereichordner (my-agy-projects) zu starten. Sie können Ihr vorhandenes Wissen über die Arbeit mit anderen KI-Anwendungen (Cursor, Gemini CLI) nutzen und @ und andere Methoden verwenden, um beim Prompten zusätzlichen Kontext einzufügen.

Sehen Sie sich sowohl das Drop-down-Menü Planning als auch das Drop-down-Menü Model Selection an. Im Drop-down-Menü „Modellauswahl“ können Sie eines der derzeit verfügbaren Modelle auswählen, das Ihr Agent verwenden soll. Die Liste ist unten aufgeführt:

Ebenso stellen wir fest, dass sich der Agent im Standardmodus Planning befindet. Wir können aber auch den Fast-Modus verwenden.

Sehen wir uns an, was in der Dokumentation dazu steht:

Planning: Ein Agent kann Aufgaben planen, bevor er sie ausführt. Für ausführliche Recherchen, komplexe Aufgaben oder die Zusammenarbeit. In diesem Modus organisiert der Agent seine Arbeit in Aufgabengruppen, erstellt Artefakte und führt andere Schritte aus, um seine Arbeit gründlich zu recherchieren, zu durchdenken und zu planen, damit die Qualität optimal ist. Hier sehen Sie viel mehr Ausgaben.
Fast: Ein Agent führt Aufgaben direkt aus. Für einfache Aufgaben, die schneller erledigt werden können, z. B. das Umbenennen von Variablen, das Ausführen einiger Bash-Befehle oder andere kleinere, lokale Aufgaben. Das ist hilfreich, wenn die Geschwindigkeit ein wichtiger Faktor ist und die Aufgabe einfach genug ist, sodass die Qualität nicht beeinträchtigt wird.

Wenn Sie mit dem Thinking-Budget und ähnlichen Begriffen in Agents vertraut sind, können Sie sich vorstellen, dass Sie die Denkweise des Agents steuern und so direkten Einfluss auf das Thinking-Budget haben. Wir verwenden jetzt die Standardeinstellungen. Denken Sie aber daran, dass die Verfügbarkeit des Gemini 3 Pro-Modells zum Zeitpunkt der Einführung für alle auf begrenzte Kontingente beschränkt ist. Sie erhalten also entsprechende Meldungen, wenn Sie diese kostenlosen Kontingente für die Nutzung von Gemini 3 aufgebraucht haben.

Sehen wir uns jetzt den Agent Manager (das Fenster) etwas genauer an, damit Sie die grundlegenden Bausteine, die Navigation in Antigravity und mehr verstehen. Das Fenster „Agent Manager“ wird unten angezeigt:

Sehen Sie sich dazu das obige Diagramm mit den Nummern an:

Inbox: Hier können Sie alle Ihre Unterhaltungen an einem Ort verfolgen. Wenn Sie Agents mit Aufgaben beauftragen, werden diese im Posteingang angezeigt. Sie können auf den Posteingang klicken, um eine Liste aller aktuellen Unterhaltungen aufzurufen. Wenn Sie auf eine der Unterhaltungen tippen, werden alle ausgetauschten Nachrichten, der Status der Aufgaben, die Ergebnisse des Agents und auch Informationen dazu angezeigt, ob der Agent auf eine Genehmigung Ihrerseits für die Aufgaben wartet. So können Sie später ganz einfach zu einer Aufgabe zurückkehren, an der Sie bereits gearbeitet haben. Eine sehr praktische Funktion.
Start Conversation: Klicken Sie darauf, um eine neue Unterhaltung zu beginnen. Sie werden dann direkt zum Eingabefeld mit Ask anything weitergeleitet.
Workspaces: Wir haben Arbeitsbereiche erwähnt und gesagt, dass Sie in jedem beliebigen Arbeitsbereich arbeiten können. Sie können jederzeit weitere Arbeitsbereiche hinzufügen und beim Starten der Unterhaltung einen beliebigen Arbeitsbereich auswählen.
Playground: Dies ist eine gute Möglichkeit, um einfach eine Unterhaltung mit dem Agenten zu beginnen. Wenn Sie diese dann in einen Arbeitsbereich umwandeln möchten, in dem Sie eine strengere Kontrolle über die Dateien usw. haben, können Sie das tun. Stellen Sie sich das als Scratch-Bereich vor.
Editor View: Bisher befinden wir uns in der Ansicht „Agent Manager“. Sie können jederzeit zur Editoransicht wechseln. Dadurch werden Ihr Arbeitsbereichordner und alle generierten Dateien angezeigt. Sie können die Dateien dort direkt bearbeiten oder Inline-Anweisungen im Editor eingeben, damit der Agent etwas gemäß Ihren geänderten Empfehlungen/Anweisungen ausführt oder ändert. Wir werden die Editoransicht in einem späteren Abschnitt ausführlich behandeln.
Browser: Schließlich kommen wir zu einem der klaren Unterscheidungsmerkmale, die Antigravity so leistungsstark machen: die enge Integration in den Chrome-Browser. Im nächsten Abschnitt richten wir den Browser ein.

4. Antigravity Browser einrichten

Gemäß der Dokumentation ruft der Agent einen Browser-Unteragenten auf, wenn er mit dem Browser interagieren möchte, um die jeweilige Aufgabe zu erledigen. Der Browser-Unteragent führt ein Modell aus, das speziell für die Seiten entwickelt wurde, die im von Antigravity verwalteten Browser geöffnet sind. Das ist ein anderes Modell als das, das Sie für den Hauptagenten ausgewählt haben.

Dieser Sub-Agent hat Zugriff auf eine Vielzahl von Tools, die zur Steuerung Ihres Browsers erforderlich sind, z. B. zum Klicken, Scrollen, Tippen und Lesen von Konsolenlogs. Gemini kann auch Ihre geöffneten Seiten über DOM-Erfassung, Screenshots oder Markdown-Parsing lesen und Videos aufnehmen.

Das bedeutet, dass wir die Antigravity-Browsererweiterung starten und installieren müssen. Dazu starten wir eine Unterhaltung im Playground und gehen die Schritte durch.

Wählen Sie Playground aus und weisen Sie dem Agent die folgende Aufgabe go to antigravity.google zu, wie unten dargestellt:

Aufgabe senden Sie sehen, wie der Agent die Aufgabe analysiert, und können den Denkprozess nachvollziehen. Irgendwann wird der Vorgang korrekt fortgesetzt und es wird erwähnt, dass der Browser-Agent eingerichtet werden muss (siehe unten). Klicken Sie auf Einrichtung.

Dadurch wird der Browser geöffnet und eine Meldung zur Installation der Erweiterung angezeigt, wie unten dargestellt:

Klicken Sie auf „Weiter“, um zur Chrome-Erweiterung zu gelangen, die Sie dann installieren können.

Nachdem Sie die Erweiterung erfolgreich installiert haben, beginnt Antigravity Agent mit der Arbeit und weist darauf hin, dass Sie die Berechtigung für die Ausführung der Aufgabe erteilen müssen. Im geöffneten Browserfenster sollten Aktivitäten angezeigt werden:

Wechseln Sie zurück zur Agent Manager-Ansicht. Dort sollte Folgendes angezeigt werden:

Genau das haben wir erwartet, da wir den Agent gebeten haben, die Website antigravity.google zu besuchen. Gewähren Sie die Berechtigung. Die Website wird dann wie unten dargestellt sicher aufgerufen:

Artefakte prüfen

Jetzt kommt der interessante Teil. Sobald der Agent seine Arbeit abgeschlossen hat, sollten Sie die gesamte Arbeit sehen können. Dazu gehören Artefakte, die Grundlage für Ihr Vertrauen in Bezug auf die geplante Arbeit, die bisherige Arbeit und die Art und Weise, wie Sie diese überprüft haben, bilden.

Artefakte schließen die Vertrauenslücke. Wenn ein Kundenservicemitarbeiter behauptet, „Ich habe den Fehler behoben“, musste der Entwickler den Code bisher lesen, um das zu überprüfen. In Antigravity erstellt der Agent ein Artefakt, um dies zu beweisen.

Antigravity konzentriert sich darauf, je nach Aufgabe wichtige Artefakte zu erstellen. Das kann vom Aufgabenplan über den Implementierungsplan bis hin zum Walkthrough-Plan (mit Bestätigung) reichen. Diese Pläne sollten Folgendes enthalten:

Task Lists & Plans: Bevor Code geschrieben wird, generiert der Agent einen strukturierten Plan. Der Nutzer kann diesen Plan prüfen, bearbeiten und genehmigen.
Code Diffs: Standardisierte Ansichten mit Unterschieden, die genau zeigen, welche Zeilen sich ändern.
Screenshots: Der Agent erfasst den Status der Benutzeroberfläche vor und nach einer Änderung.
Browser Recordings: Für dynamische Interaktionen (z.B. „Klicken Sie auf die Schaltfläche zum Anmelden, warten Sie, bis das Drehrad angezeigt wird, und prüfen Sie, ob das Dashboard geladen wird.“), zeichnet der Kundenservicemitarbeiter ein Video seiner Sitzung auf. Der Entwickler kann sich dieses Video ansehen, um zu prüfen, ob die funktionale Anforderung erfüllt ist, ohne die App selbst auszuführen.
Test Results: Strukturierte Logs von bestandenen/fehlgeschlagenen Tests, die vom Agent generiert und ausgeführt werden.

Rechts oben neben „Änderungen in der Agent Manager-Ansicht überprüfen“ sollte eine Schaltfläche zum Ein- und Ausblenden der Artefakte angezeigt werden. Wenn sie aktiviert ist, sehen Sie die Liste der generierten Artefakte:

Sie sollten die Artefaktansicht wie unten sehen. In diesem Fall haben wir den Agent angewiesen, die Seite „antigravity.google“ aufzurufen. Daher hat er einen Screenshot erstellt, ein Video davon generiert usw.

Entwickler können mit diesen Artefakten über „Kommentare im Google Docs-Stil“ interagieren. Sie können eine bestimmte Aktion oder Aufgabe auswählen, einen Befehl eingeben und ihn dann an den Agent senden. Der Agent berücksichtigt dieses Feedback und passt seine Antwort entsprechend an. Sie können interaktive Google-Dokumente verwenden, in denen Sie dem Autor Feedback geben und der Autor darauf reagiert.

5. Posteingang noch einmal aufrufen

Wenn Sie bereits einige Unterhaltungen mit den Agents gestartet haben, sollten Sie sich jetzt Ihren Posteingang im Agent Manager-Fenster ansehen. Hier werden alle Unterhaltungen angezeigt. Klicken Sie auf eine der Unterhaltungen, um den Verlauf, die erstellten Artefakte und weitere Informationen aufzurufen. Nachdem wir die erste Unterhaltung geführt haben, wird sie in unserem Posteingang angezeigt, wie unten zu sehen ist:

Wenn Sie auf diese Unterhaltung klicken, werden die Details angezeigt:

Sie können die Unterhaltung auch von hier aus fortsetzen.

6. Der Editor

Der Editor behält die Vertrautheit von VS Code bei, sodass erfahrene Entwickler ihre Gewohnheiten beibehalten können. Dazu gehören der Standard-Datei-Explorer, die Syntaxhervorhebung und das Erweiterungs-Ökosystem.

Sie können oben rechts im Agent Manager auf die Schaltfläche Editor öffnen klicken, um den Editor aufzurufen.

Der Editor wird durch „Agent Awareness“ ergänzt.

Inline Command: Der Editor unterstützt Vibe Coding und Inline-Anweisungen. Nutzer können Code markieren und den Agenten anweisen, "Make this more efficient" oder "Add comments explaining this logic".
Agent Side Panel : Im Bereich auf der rechten Seite des Editors können Sie direkt mit dem Agenten interagieren. Sie können hier neue Unterhaltungen starten oder Anweisungen geben, um Ihren Code zu ändern.

Wenn wir uns einige Anwendungsfälle ansehen, die mit der Webentwicklung zu tun haben und in denen der Agent mehrere Code-Dateien erstellt, können wir uns die Dateien im Editor ansehen, Änderungen vornehmen und direkt mit dem Agent interagieren.

7. Zwischen Editor und Agent Manager wechseln

Antigravity geht davon aus, dass sowohl Editor als auch Agent Manager separate Fenster sind und beide benötigt werden. Sie können entweder über die Schaltfläche Agent Manager öffnen oben rechts im Editor oder über die Schaltfläche Editor öffnen oben rechts im Agent Manager zwischen den beiden wechseln.

Alternativ können Sie auch die folgende Tastenkombination verwenden, um zwischen den beiden Modi zu wechseln: Cmd + E

8. Anwendungsfälle

Nachdem wir uns nun einen Überblick über das Produkt verschafft haben, sehen wir uns einige Anwendungsfälle an. Antigravity ist eine Agent-First-Plattform. Das bedeutet, dass wir in den meisten Fällen einfach eine Anweisung an den Agenten erhalten. Der Agent führt dann die Aufgabe selbstständig aus, fragt bei Bedarf nach Berechtigungen, erstellt die Artefakte und benachrichtigt uns, wenn die Aufgabe erledigt ist. Aus diesem Grund können wir nicht jede einzelne Ausgabe der Agent-Unterhaltung in den folgenden Anwendungsfällen erstellen. Wir stellen Ihnen die Anleitung und einige notwendige Screenshots der erwarteten Ergebnisse zur Verfügung. Ihre Ergebnisse können jedoch etwas abweichen.

Die Anwendungsfälle, die wir behandeln, reichen von der Automatisierung einiger Aufgaben mit externen Websites über das Generieren und Überprüfen von Unit-Testfällen für ein Projekt bis hin zur vollständigen Entwicklung einer Website. Los gehts.

Nachrichten-Highlights

Dies ist ein einfacher Anwendungsfall, kann aber die Grundlage dafür sein, mit dem Webbrowser Websites zu besuchen, Informationen zu extrahieren, Aktionen auszuführen und dann Daten an den Nutzer zurückzugeben.

In diesem Fall rufen wir die Google News-Website auf und extrahieren einige Informationen. Sie können aber ganz einfach eine Website Ihrer Wahl testen.

Achten Sie darauf, dass Sie sich in Agent Manager befinden und Playground ausgewählt haben, wie unten gezeigt:

Geben Sie dann den folgenden Befehl ein:

Dadurch wird der Agent-Prozess gestartet und es wird festgelegt, dass der Browser gestartet werden muss usw. Achten Sie genau auf den Denkprozess und darauf, wie der Agent seine Arbeit erledigt. Wenn alles gut geht, sollte der Antigravity-Browser gestartet und die Website wie unten dargestellt aufgerufen werden. Der blaue Rahmen um die Website zeigt an, dass der Agent jetzt den Browser steuert und auf der Website navigiert, um die Informationen abzurufen.

Wenn die Arbeit abgeschlossen ist, sollten auch die Artefakte generiert werden, wie unten dargestellt:

Hier sehen Sie ein Beispiel für die Ausführung durch den Agent:

Links sehen Sie den Denkprozess. Sie können auch durch die Punkte scrollen und sich die Wiedergabe und andere Daten ansehen.

Mögliche Aktivitäten

Wenn Sie das verstanden haben, wählen Sie eine Website aus, die verfügbar ist und von der der Agent einige Daten abrufen/zusammenfassen soll. Nehmen Sie eine Website, von der Sie wissen, dass sie Dashboards und Diagramme enthält, und bitten Sie sie, einige Werte auszuwählen.
Probieren Sie den folgenden Prompt aus: Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

Dynamische Website mit Python + Flask erstellen

Lassen Sie uns nun eine vollständige Webanwendung generieren. Die Webanwendung, die wir erstellen werden, ist eine Website, die Informationen zu einer eintägigen technischen Veranstaltung mit Vorträgen von mehreren Referenten enthält.

Achten Sie noch einmal darauf, dass Sie sich im Agent Manager befinden und die Playground ausgewählt haben.

Geben Sie den folgenden Prompt ein:

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.

Sie können die Unterhaltung mit dem oben genannten Prompt beginnen:

Während der Agent seine Aufgabe ausführt, erstellt er die Artefakte:

Aufgabenartefakt
Implementierungsartefakt
Artefakt für die Schritt-für-Schritt-Anleitung

Das unten angegebene Task-Artefakt war die ursprüngliche Abfolge von Aufgaben, die der Agent basierend auf der ihm zugewiesenen Aufgabe entschlüsselt hat. Unten sehen Sie einen Beispiel-Screenshot von der Ausführung:

Klicken Sie dann auf das Artefakt Implementierungsplan. Hier sehen Sie einen Beispiel-Screenshot:

Und schließlich gibt es noch das Artefakt Walkthrough. Es enthält alles, was der Agent getan hat, wie unten dargestellt:

Der Server wurde gestartet und die URL wurde bereitgestellt. Wenn ich darauf klicke, wird die Anwendung geöffnet. Unten sehen Sie einen Beispiel-Screenshot:

Wenn ich zum Editor wechsle, sehe ich auf dem Bildschirm den Ordner, in dem die Python Flask-Anwendung generiert wird. Außerdem sehen Sie, dass Agent mode rechts getaggt ist. Dort können Sie die Unterhaltung auch fortsetzen.

Angenommen, wir möchten der Veranstaltung weitere Vorträge hinzufügen. Wir können im Editor und im Agent-Bereich bleiben und einen Befehl wie Add two more talks to the schedule eingeben.

Der Agent analysiert die Anforderung, aktualisiert die Aufgabe und den Implementierungsplan und validiert dann auch die aktualisierte Funktion. Hier sehen Sie ein Beispiel für einen Unterhaltungsverlauf:

Sie können jederzeit zum Agent Manager zurückkehren. So können Sie den Prozess besser nachvollziehen, wenn Sie von Agent Manager zu Editor wechseln, Änderungen vornehmen usw.

Hinweis:Bei der Ausführung dieser Aufgabe hat der Agent versucht, den Flask-Server auf Port 5000 zu starten, der auf dem aktuellen Computer verwendet wurde. Es wurde immer wieder der nächste kostenlose Port versucht, bis schließlich Port 8080 verwendet wurde und der Server gestartet werden konnte.

Mögliche Aktivitäten

Fügen Sie der Anwendung zusätzliche Funktionen hinzu. Geben Sie dem Agent die Details an und beobachten Sie, wie er seine Aufgabe erledigt, indem er zuerst die Aufgabenliste und dann den Implementierungsplan usw. ändert.
Bitten Sie den Agent, eine README-Datei oder weitere Dokumentation für die Anwendung zu erstellen.

Einfache Produktivitäts-App erstellen

Wir generieren jetzt eine einfache Pomodoro-Timer-Webanwendung.

Prüfen Sie, ob Sie sich in Agent Manager befinden und Playground ausgewählt haben. Geben Sie den folgenden Prompt ein:

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

Beachten Sie, wie die Aufgabenliste und der Implementierungsplan erstellt werden. Achten Sie weiterhin auf den Ablauf. Es kann Situationen geben, in denen Sie zur Überprüfung aufgefordert werden. Unten sehen Sie einen Beispiel-Lauf.

In diesem Fall sollte auch der Antigravity-Browser gestartet, eigene Tests durchgeführt und dann bestätigt werden, dass die Tests erfolgreich waren. Unter anderem wurde ein Media-Artefakt generiert, das das Video der Überprüfung enthält. So können Sie gut nachvollziehen, was getestet wurde. Ich habe auch einige Stiländerungen vorgeschlagen, da sie nicht übernommen wurden, und das hat funktioniert.

Die endgültige App sah so aus wie unten und sie sieht ziemlich gut aus.

Wie wäre es, wenn wir der Anwendung ein schönes Timerbild hinzufügen? Wir müssen lediglich eine Folgeanweisung wie unten ausgeben:

Add an image to the application that displays a timer.

Der Agent hat dem Task-Artefakt eine neue Aufgabe hinzugefügt:

Dann wurde ein Bild generiert, während die Aufgabe ausgeführt wurde:

Schließlich wurde das Bild in der App wie gewünscht angezeigt:

Mögliche Aktivitäten

Der Hintergrund des Sanduhrsymbols in der Anwendung ist nicht transparent. Bitten Sie den Agenten, das transparent zu machen.
Probieren Sie einige Varianten der Anwendung aus, die Sie generieren möchten. Probieren Sie verschiedene Stile und Bilder aus und bitten Sie um Änderungen.

Unittests und Mock-Stubs generieren und Tests validieren

Der letzte Anwendungsfall, den wir hier ausprobieren, ist das Generieren von Unittests für eine bestimmte Code-Datei, die wir haben, und das Ausführen und Validieren der Tests durch den Agenten.

Dazu erstellen wir einen Arbeitsbereich mit einer einzelnen Python-Datei, wie unten dargestellt:

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}

Achten Sie darauf, dass Sie die oben genannte Python-Datei lokal in einem Ordner haben und sie als Arbeitsbereich in Antigravity laden.

Dies ist ein einfacher Order-Dienst mit den folgenden Schlüsselfunktionen in der Funktion checkout:

Prüft, ob der Warenkorb nicht leer ist.
Prüfen Sie den Lagerbestand aller Artikel.
Berechnet den Endpreis.
Gebührenzahlung
Aktualisiert das Inventar.

Wir weisen dem Agent die Aufgabe zu, Unittest-Fälle zu generieren, Mock-Implementierungen bereitzustellen und die Tests auszuführen, um sicherzustellen, dass sie erfolgreich sind.

Wir öffnen unseren spezifischen Arbeitsbereichordner. Sie sehen, dass wir jetzt auch das Symbol @ verwenden können, um auf die Datei zu verweisen. Wir könnten beispielsweise Folgendes tun:

Es wird eine Erklärung dazu angezeigt, was diese Datei ist:

Mit dem folgenden Prompt können wir eine bessere Visualisierung generieren lassen:

Can you visually show this class for better understanding

Als Nächstes generiere ich die Einheitentests und bitte den Agent, sie auszuführen. Ich gebe den folgenden Prompt ein:

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

Es wurde das folgende Aufgabenartefakt generiert und die Aufgabe wurde ausgeführt.

Sie können sich auch die Details der ausgeführten Tests ansehen:

Eine der generierten Dateien war auch die Testdatei. Ein Screenshot davon ist unten zu sehen:

Mögliche Aktivitäten

Sie können Ihren eigenen Code verwenden und den Agenten bitten, verschiedene Aufgaben zu erledigen, z. B. Funktionen hinzuzufügen oder Teile Ihres Codes zu refaktorieren.

9. Glückwunsch

Sie haben Antigravity, die Agent-first-Entwicklungsplattform, erfolgreich installiert und wissen, wie Sie sie verwenden. Die verschiedenen Anwendungsfälle, die wir ausprobiert haben, sollen Ihnen helfen, Ihre eigenen Anforderungen zu berücksichtigen und zu prüfen, wie Antigravity Sie bei der Erfüllung dieser Anforderungen unterstützen kann.

Referenzdokumente

Offizielle Website : https://antigravity.google/
Dokumentation: https://antigravity.google/docs
Anwendungsfälle : https://antigravity.google/use-cases
Download : https://antigravity.google/download
YouTube-Kanal für Google Antigravity : https://www.youtube.com/@googleantigravity