Zum Hauptinhalt springen

Google Antigravity Tutorial: Erstelle ein Finance-Risk-Dashboard

Erfahre, wie Google Antigravity Prompts in komplette Apps verwandelt. Baue ein Finanz-Dashboard mit Gemini 3 und KI-gestütztem Browser-Testing.
· 12 Min. lesen

Entdecke KI

Google Antigravity ist eine agentenbasierte IDE, die leistungsstarke Modelle wie Gemini 3 mit einem Agent-first-Workflow kombiniert. Anstatt Tools, Terminals und Browsersessions manuell zu konfigurieren, arbeitest du mit einem KI-Agenten zusammen, der Arbeit in Aufgaben planen, Befehle ausführen, Code bearbeiten und sogar in deinem Browser interagieren kann, um deine App zu testen und zu dokumentieren.

In diesem Tutorial zeige ich dir Schritt für Schritt, wie du mit Google Antigravity ein funktionierendes Personal Finance Risk Dashboard erstellst. Du lernst, wie du:

  • Antigravity mit agentenunterstützter Entwicklung installierst und einrichtest
  • Den Agenten per Prompt eine Next.js-, Tailwind- und shadcn/ui-App aufsetzen lässt
  • Den automatisch erzeugten Umsetzungsplan prüfst und verfeinerst
  • Den Agenten deine App mit der Antigravity-Erweiterung im Browser testen lässt
  • An Features wie Hell-/Dunkelmodus und Debugging mit Computer Use iterierst

Am Ende hast du ein mehrseitiges Dashboard, das Risikostufen für Sparen, Anleihen, Indexfonds und Krypto visualisiert – inklusive interaktiver Steuerung und moderner Fintech-UI – erstellt aus einem einzigen Prompt. Schau dir außerdem unsere Anleitung zur Gemini 3 API und das Gemini 3 Flash Tutorial an.

Disclaimer: Dieses Tutorial dient ausschließlich Bildungszwecken und stellt keine Finanzberatung dar. Triff Anlageentscheidungen nur nach eigener Recherche oder in Rücksprache mit einer qualifizierten Finanzexpertin bzw. einem qualifizierten Finanzexperten.

Was ist Google Antigravity?

Google Antigravity ist eine Agent-first-Entwicklungsplattform, die deine IDE zum Mission Control für KI-Agenten macht. Kernstück ist die synchronisierte Steuerung von Editor, Terminal und Browser durch Agenten. So können sie Arbeit planen, Code ändern, Befehle ausführen und das Verhalten Ende-zu-Ende an einem Ort verifizieren. 

Anstatt Skripte und Tools manuell zu verknüpfen, beschreibst du das gewünschte Ergebnis und überlässt Antigravitys Agenten die Schwerstarbeit. Sie können:

  • Eine grobe Anforderung in einen Aufgabenplan oder eine Implementierungs-Checkliste übersetzen
  • Terminalbefehle ausführen, um Projekte zu erstellen, Abhängigkeiten zu installieren und Dev-Server zu starten
  • Code im gesamten Workspace bearbeiten – von Layout-Dateien bis zu Shared Components
  • Über eine Browser-Erweiterung deine App öffnen, Flows durchklicken und Screenshots oder Walkthrough-Aufnahmen als Artifacts festhalten.

Antigravity basiert auf Googles Gemini 3 Modellen, unterstützt aber auch andere Anbieter wie Claude Sonnet 4.5 und GPT-OSS. Es bietet zwei Hauptoberflächen: eine Editor-Ansicht, die sich wie eine IDE anfühlt (falls du Cursor oder VS Code genutzt hast), und eine Agent Manager-Ansicht als Mission Control für länger laufende Aufgaben über mehrere Workspaces. Zusammen erleichtern sie das Arbeiten auf Aufgabenebene, während die Agenten die Implementierungsdetails übernehmen.

Google Antigravity Demo: Ein Finance-Risk-Dashboard erstellen

In diesem Abschnitt bauen wir mit Google Antigravity ein Personal Finance Risk Dashboard. Der Agent verwandelt einen einzigen Prompt in ein Next.js-Projekt, das verschiedene Anlageprodukte und ihre Risikoprofile modelliert.

Am Ende hast du:

  • Ein mehrseitiges Dashboard für Sparen, Anleihen, Indexfonds und Krypto
  • Interaktive Regler für den Zeithorizont
  • Eine ausgereifte UI mit Hell-/Dunkelmodus
  • Verständnis, wie Antigravity-Agenten ein vollständiges Feature planen, umsetzen, testen und iterieren

Schritt 1: Google Antigravity installieren

Lade Google Antigravity von der offiziellen Website herunter und wähle den Installer passend zu deiner Maschine.

Klicke auf Download für macOS (oder dein Betriebssystem). Anschließend gelangst du zur Plattformauswahl, um das passende Binary zu wählen und die Installation abzuschließen.

Download page

Für dieses Tutorial habe ich einen Mac mit Apple Silicon verwendet, die Oberfläche unterscheidet sich jedoch nicht zwischen den Systemen. 

Nach dem Download richtest du Google Antigravity wie jede andere Anwendung ein und startest es.

Schritt 2: Ersteinrichtung

Beim ersten Start führt dich Antigravity mit einem Onboarding-Assistenten durch die Einrichtung.

Schritt 2.1: Einrichtungs-Flow wählen

Wenn du Power-User von Cursor oder VS Code bist und deren Einstellungen für Antigravity übernehmen möchtest, wähle die entsprechenden Optionen. Ich starte jedoch gern neu – wähle also Start fresh und klicke auf Next.

Set up

Schritt 2.2: Antigravity-Agent einrichten

Als Nächstes siehst du einen Bildschirm zur Agent-Nutzung. Für dieses Tutorial wähle:

  • Agentenunterstützte Entwicklung (empfohlen): Der Agent übernimmt den Großteil der Arbeit, du bleibst aber im Loop und kannst Pläne und Änderungen prüfen.
  • Terminalausführung (Auto): Erlaubt dem Agenten, sichere, routinemäßige Terminalbefehle automatisch auszuführen, ohne jedes Mal nachzufragen.
  • Review-Richtlinie (Agent entscheidet): Der Agent legt fest, wann er eine explizite Review benötigt und wann er allein fortfahren kann.
  • Standard-Allowlist für den Browser verwenden: Begrenzt den Browserzugriff des Agenten auf eine vorab genehmigte Liste sicherer Domains und Aktionen – für zusätzliche Sicherheit.

Klicke auf Next, um die Einrichtung abzuschließen.

Set up

Sobald die Einrichtung abgeschlossen ist, erstellst du einen Workspace für unser Experiment.

Schritt 3: Einen neuen Workspace anlegen

Nach der Einrichtung landest du auf dem Antigravity-Startbildschirm. Klicke nun auf Open Folder und lege ein neues Verzeichnis für dieses Projekt an bzw. wähle es aus, z. B. ~/Antigravity/personal-finance-dashboard. Dieser Ordner wird deine Next.js-App.

Rechts siehst du das Agent-Panel, in dem du ein Modell auswählen und Prompts senden kannst.

Set up

Schritt 4: Die App erstellen

Wähle bei geöffnetem Workspace ein Modell (zum Beispiel Gemini 3 Pro oder Claude Sonnet 4.5 oder GPT OSS 120B) im Agent-Panel. Füge dann folgenden Prompt ein:

Build me a Next.js app called “Personal Finance Risk Dashboard” that shows different risk profiles for Savings, Bonds, Index Funds, and Crypto, each on its own page. 
For every product, display risk level, volatility, and projected returns (with a slider for time horizon), 
and use Tailwind plus shadcn/ui to make the UI look like a polished, responsive fintech dashboard

Hinweis: Zum Zeitpunkt dieses Tutorials habe ich das Modell Gemini 3 Pro (low) ausprobiert, bin aber auf Fehler gestoßen. Probiere gern das Modell, das zu deinem Use Case passt. 

Der Agent antwortet dann in etwa so:

Direkt im Anschluss schlägt Antigravity einen Terminalbefehl vor, um das Projekt zu erstellen. Klicke einfach auf Accept, damit der Agent den Befehl ausführt und im Hintergrund eine vollständige Checkliste für die App erstellt.

Unten siehst du einen Screenshot der Hintergrundschritte im Seiten-Terminal, beginnend mit der Installation der Abhängigkeiten.

Du kannst es laufen lassen und die Logs beobachten.

Schritt 5: Das Artifact "Task checklist" prüfen

Nach dem Scaffolden erzeugt der Agent ein Artifact namens Task checklist für das gesamte Projekt.

Jeder Abschnitt enthält Checkboxen wie:

  • Next.js-Projekt mit TypeScript und Tailwind CSS initialisieren
  • shadcn/ui-Komponentenbibliothek einrichten
  • Seiten für Sparen/Anleihen/Indexfonds/Krypto mit Risikoprofil
  • Dark Mode, Animationen und responsives Layout implementieren
  • Navigation und Regler-Funktionalität testen

Sobald die Liste steht, arbeitet der Agent die Aufgaben nacheinander ab. Jetzt kannst du in der Explorer-Seitenleiste nachsehen, was der Agent erstellt hat:

image7.png

Du hast jetzt ein Standard-Setup mit Next.js, Tailwind und shadcn/ui-Dateien, bereit für die Anpassung.

Schritt 6: Den Umsetzungsplan prüfen

Neben der Checkliste erzeugt Antigravity ein detaillierteres Artifact namens Implementation Plan:

Der Abschnitt User Review Required umfasst typischerweise:

  • Designansatz: Enthält Informationen zu Dark Mode, Verläufen, Animationen und responsivem Design.
  • Datenmodell: Beinhaltet alle Risikometriken – Sparen, Anleihen, Indexfonds und Krypto – für unsere Finanzrisiko-App.
  • Kernstruktur der Anwendung: Beschreibt, wie die Hauptlayout-Dateien angepasst werden, um globale Styles, Typografie, Metadaten, Homepage und Dark-Mode-Theme einzurichten.
  • Produktseiten: Listet dedizierte Next.js-Seiten wie /savings, /bonds, /index-funds, /crypto auf und welche Angaben zu Risiko, Volatilität und Rendite dort erscheinen.
  • Geteilte Komponenten: Definiert wiederverwendbare UI-Komponenten wie Navigationsleiste, Risikoprofil-Karten, Renditerechner und Produktübersichten für Start- und Produktseiten.
  • Utilities und Typen: Umfasst TypeScript-Utilities in lib/financial-data.ts mit Produktdaten, Risikoprofilen, Berechnungen projizierter Renditen und Helfern zum Formatieren von Beträgen und Prozenten.
  • Verifikationsplan: Skizziert, wie die App getestet wird – Dev-Server starten, jede Seite und jeden Regler manuell prüfen, Dark Mode und Responsiveness validieren und mit dem Browser-Agent eine vollständige Tour mit Screenshots aufnehmen.

Wir können die Risikowerte für realistischere Daten anpassen oder zusätzliche Anforderungen ergänzen. Hinterlasse Kommentare in den Task-/Implementation-Plan-Artifacts, wenn der Agent den Kurs anpassen soll.

image12.png

Wenn der Plan passt, klicke in der Registerkarte Implementation Plan auf Proceed. Daraufhin beginnt der Agent, Quelldateien im Verzeichnis src/ zu erstellen und zu ändern. Er baut einzelne Seiten für Sparen, Anleihen, Indexfonds und Krypto. 

Dabei entstehen wiederverwendbare Komponenten für Karten, Regler und Charts. Außerdem werden Tailwind- und shadcn/ui-Styles appweit angewendet.

Zum Schluss siehst du neue Background Steps und Progress Updates zu jeder Codeänderung.

Schritt 7: Testen und Verifizieren 

Nach Abschluss der Implementierung wechselt Antigravity zu Testing and Verification. Du siehst einen neuen Fortschrittseintrag, in dem Antigravity um Browserzugriff per Schaltfläche Setup oder Deny bittet. Klicke einfach auf Setup, um fortzufahren.

image6.png

Bevor der Agent mit dem Browser interagieren kann, brauchst du die offizielle Erweiterung.

Besuche den Eintrag im Chrome Web Store und klicke auf Add to Chrome.

Nach der Installation siehst du während der Browsersteuerung des Agenten einen Leuchtrahmen um den Bildschirm, wie unten zu sehen:

image29.png

Dieser Schein zeigt an, dass der Antigravity-Agent den Browser aktiv nutzt, also klickt, scrollt und die App im Rahmen der Verifikation testet.

Schritt 8: Das Walkthrough-Artifact prüfen

Nach Abschluss der Tests siehst du eine finale Zusammenfassung der Progress Updates wie folgt:

image10 (2).png

Das Artifact Walkthrough enthält in der Regel:

  • Screenshots jeder Seite
  • Eine aufgezeichnete Browsersitzung, in der der Agent durch die App klickt
  • Eine Beschreibung der getesteten Punkte (Beispiel: “Verified Savings page slider updates projected returns in real time”)

Wenn alles passt, klicke auf Accept all, um die Änderungen zu übernehmen.

So sieht unsere finale App aus:

image25.png

image2 (1).png

image13.png

image28.png

image4.png

Schritt 9: Das Dashboard bearbeiten

Jetzt iterieren wir an der UI. Angenommen, du möchtest einen Hell-/Dunkelmodus-Schalter in der Kopfzeile und ein paar Charts pro Seite hinzufügen. Im Task- oder Implementation Plan – oder direkt im Agent-Panel – kannst du Folgendes anfragen:

image15.png

Antigravity wird dann:

  • Die Layout-Komponenten um einen Theme-Schalter erweitern (vermutlich mit shadcn/ui-Theme-Utilities)
  • Chart-Komponenten hinzufügen, austauschen oder entfernen
  • Die App neu starten und den Schalter im Browser testen

Klicke jetzt auf Submit – sowohl unser früherer Kommentar als auch dieser werden umgesetzt.

Schritt 10: Fehler prüfen und debuggen 

In der Praxis führen Reviews oft zu einigen Fehlern – teils modellbedingt. Antigravity arbeitet mit Computer Use trotzdem weiter daran.

Selbst wenn der Agent auf Fehler stößt, kann er:

  • Die Fehlermeldung im Terminal lesen
  • Die App im Browser öffnen und das Problem reproduzieren
  • Screenshots und Aufnahmen des fehlerhaften Zustands erstellen
  • Diese visuellen Hinweise und Logs zur Fehlerbehebung nutzen

image27.png

Du kannst mitverfolgen, indem du das Walkthrough öffnest oder die neuen Progress Updates zu den Debugging-Schritten prüfst.

An diesem Punkt hast du:

  • Einen Agenten per Prompt eine komplette Next.js + Tailwind + shadcn/ui-App scaffolden lassen
  • Einen strukturierten Implementation Plan geprüft und bearbeitet
  • Antigravity das Setup, Coding, Testen und die Browser-Verifikation überlassen
  • Mit Kommentaren und zusätzlichen Prompts an der UI iteriert
  • Dem Agenten beim Debuggen per Computer Use und Screenshots zugesehen

Jetzt ist unsere finale App bereit zur Review.

Schritt 11: Endergebnis

Nach Iterationen am Schalter und Layout erhältst du eine finale Anwendung, in der die Charts entfernt wurden und der Hell-/Dunkelmodus-Schalter im gesamten Dashboard funktioniert.

Dark Mode:

image25.png

Light Mode:

image9.png

Im folgenden Video siehst du unser Dashboard in Aktion: 

Fazit

Google Antigravity verlagert Entwicklung weg vom manuellen Coden im Editor hin zur Zusammenarbeit mit einem Agenten, der komplette Features planen, umsetzen und verifizieren kann.

In einem Workflow haben wir gesehen:

  • Planung: Mit Task checklist und Implementation Plan als Artifacts
  • Umsetzung: Größtenteils agentengesteuert – per Terminalbefehlen, Datei-Edits und UI-Aufbau
  • Verifikation: Mit Browser-Automatisierung, Walkthrough-Aufnahmen und Testzusammenfassungen
  • Iteration: Überwiegend kommentargetriebene Verfeinerungen (Hell-/Dunkelmodus, Layout-Tweaks), bei denen der Agent auf Nutzerkommentare hin arbeitet.
  • Debugging: Abschließend eine automatisierte Fehlersuche via Computer Use – das macht Debugging leicht.

Dieses Muster kannst du jetzt für andere Demo-Apps wiederverwenden:

  • Ein Dashboard für Trainingsintensität
  • Ein Stadtlärm-Explorer
  • Eine funktionskomplette Food-Delivery-UI

Wenn du mehr über den Bau von KI-Agenten lernen willst, empfehle ich den Kurs "Building AI Agents with Google ADK".

Google Antigravity FAQs

Unterstützt Google Antigravity außer JavaScript und Next.js auch andere Programmiersprachen?

Ja. Auch wenn Antigravity anfangs stark auf Web-Frameworks wie JavaScript, TypeScript, React und Next.js ausgerichtet ist, ist es für mehrsprachige Workflows konzipiert. Die KI-Agenten der Plattform können über verschiedene Projekttypen hinweg planen und Befehle ausführen, sodass der Sprachsupport mit der Zeit erweitert werden dürfte.

Welche aktuellen Ratenlimits oder welches Preismodell hat Google Antigravity?

Google Antigravity befindet sich derzeit in der Public Preview und ist kostenlos nutzbar. Für Aufgaben mit Gemini 3 Pro und anderen unterstützten Modellen gibt es großzügige Ratenlimits. Diese werden periodisch zurückgesetzt; Preise für zukünftige kostenpflichtige Stufen sind noch nicht angekündigt.

Wie stellt Antigravity sicher, dass die Arbeit eines KI-Agenten korrekt und prüfbar ist?

Antigravity erzeugt automatisch sogenannte “Artifacts”, die jede Phase der Agentenarbeit dokumentieren, darunter Aufgabenlisten, Umsetzungspläne, Terminal-Logs, Screenshots und aufgezeichnete Browser-Walkthroughs. Diese Audit-Spur hilft Entwicklerinnen und Entwicklern, jeden Schritt des Agenten nachzuvollziehen und zu prüfen.

Können in Antigravity mehrere Agenten parallel laufen?

Ja. In Antigravity können mehrere KI-Agenten parallel erstellt und verwaltet werden. Jeder Agent kann sich auf unterschiedliche Aufgaben oder Workspaces konzentrieren (zum Beispiel einer für Code-Implementierung, ein anderer für Tests oder Doku-Updates) – echte parallele Agenten-Workflows sind damit möglich.

Welche Hardware- oder Betriebssystemanforderungen hat Antigravity?

Antigravity ist für macOS, Windows und Linux verfügbar. Es läuft am besten auf modernen Systemen mit ausreichend RAM und Rechenleistung für KI-unterstützte Aufgaben. Für macOS werden Versionen ab Monterey empfohlen; für Windows ist eine 64-Bit-Installation erforderlich.

Aashi Dutt

Autor

Aashi Dutt

LinkedInTwitter

Ich bin Google Developers Expertin für ML (Gen AI), dreifache Kaggle-Expertin und Women-Techmakers-Botschafterin mit über drei Jahren Erfahrung in der Tech-Branche. 2020 habe ich ein Health-Tech-Startup mitgegründet und absolviere derzeit einen Master in Informatik an der Georgia Tech mit Schwerpunkt Machine Learning.

Themen

KI-AgentenKünstliche IntelligenzGroße Sprachmodelle

Ähnlich

Mehr anzeigen →