Cursus
AI-agents bouwen met Google ADK
1 uur
7.6K
Google Antigravity is een agent-gedreven IDE die krachtige modellen zoals Gemini 3 koppelt aan een workflow waarin de agent centraal staat. In plaats van handmatig tools, terminals en browsersessies te configureren, werk je samen met een AI-agent die werk als taken kan plannen, commando’s kan uitvoeren, code kan bewerken en zelfs met je browser kan omgaan om je app te testen en te documenteren.
In deze tutorial laat ik je zien hoe je een werkend Personal Finance Risk Dashboard bouwt met Google Antigravity. Je ziet hoe je:
- Antigravity installeert en configureert met agent-ondersteunde ontwikkeling
- De agent prompt om een Next.js-, Tailwind- en shadcn/ui-applicatie op te zetten
- Het automatisch gegenereerde implementatieplan beoordeelt en verfijnt
- De agent je app in de browser laat testen met de Antigravity-extensie
- Itereert op features zoals donker/licht-modus en debuggen met computer use
Aan het eind heb je een dashboard met meerdere pagina’s dat risiconiveaus visualiseert voor Savings, Bonds, Index Funds en Crypto, compleet met interactieve bedieningselementen en een moderne fintech-UI, gebouwd via één enkele prompt. Ik raad ook aan om onze gids voor de Gemini 3 API en de Gemini 3 Flash-tutorial te bekijken.
Disclaimer: Deze tutorial is uitsluitend bedoeld voor educatieve doeleinden en vormt geen financieel advies; doe altijd je eigen onderzoek of raadpleeg een gekwalificeerde financieel professional voordat je beleggingsbeslissingen neemt.
Wat is Google Antigravity?
Google Antigravity is een ontwikkelplatform waar de agent voorop staat dat je IDE verandert in een missiecontrole voor AI-agents. In de kern geeft het agents gesynchroniseerde controle over je editor, terminal en browser, zodat ze werk kunnen plannen, code kunnen wijzigen, commando’s kunnen uitvoeren en gedrag end-to-end kunnen verifiëren vanuit één plek.
In plaats van scripts en tools handmatig aan elkaar te knopen, beschrijf je het gewenste resultaat en laat je de agents van Antigravity het zware werk doen. Ze kunnen:
- Een hoog-niveau verzoek vertalen naar een taakgericht plan of implementatiechecklist
- Terminalcommando’s uitvoeren om projecten aan te maken, dependencies te installeren en dev-servers te starten
- Code bewerken in je hele workspace, van layoutbestanden tot gedeelde componenten
- Een browserextensie gebruiken om je app te openen, door flows te klikken en screenshots of walkthrough-opnames vast te leggen als Artifacts.
Antigravity is gebouwd rond Google’s Gemini 3-modellen, maar ondersteunt ook andere providers zoals Claude Sonnet 4.5 en GPT-OSS. Het heeft twee hoofdvensters: een Editor-weergave die aanvoelt als een IDE (als je ooit Cursor of VS Code gebruikt hebt), en een Agent Manager-weergave die fungeert als missiecontrole voor langdurige taken over meerdere workspaces. Samen maken ze het makkelijker om taakgericht te werken terwijl de agents de implementatiedetails afhandelen.
Google Antigravity-demo: een dashboard voor financiële risico’s bouwen
In dit onderdeel bouwen we een persoonlijk dashboard voor financiële risico’s met Google Antigravity. De agent zal een enkele prompt in natuurlijke taal omzetten in een Next.js-project dat verschillende beleggingsproducten en hun risicoprofielen modelleert.
Aan het eind heb je:
- Een dashboard met meerdere pagina’s voor Savings, Bonds, Index Funds en Crypto
- Interactieve sliders voor tijdshorizon
- Een verzorgde UI met donker/licht-modus
- Inzicht in hoe Antigravity-agents een volledige feature plannen, implementeren, testen en itereren
Stap 1: Google Antigravity installeren
Begin met het downloaden van Google Antigravity via de officiële website en kies de installer die past bij de specificaties van je machine.
Klik op Download for MacOS (of jouw OS). Je komt dan op een platformselectiescherm waar je de juiste binary voor je machine kiest en de installatie afrondt.
Voor deze tutorial draaide ik het op een Mac met Apple Silicon, maar de interface is op elke machine hetzelfde.
Zodra het gedownload is, installeer je Google Antigravity zoals elke andere applicatie en start je het op.
Stap 2: Eerste keer instellen
Bij de eerste start leidt Antigravity je door een onboardingwizard.
Stap 2.1: Kies het insteltraject
Ben je een power user van Cursor of VS Code en wil je hun instellingen gebruiken voor Antigravity, kies dan de opties dienovereenkomstig. Ik begin echter graag fris, dus selecteer Start fresh en klik op Next.
Stap 2.2: Antigravity Agent instellen
Vervolgens zie je een scherm over agentgebruik. Voor deze tutorial kies je:
- Agent-assisted development (aanbevolen): Deze optie laat de agent het meeste werk doen, maar houdt een mens in de lus zodat je plannen en wijzigingen kunt beoordelen.
- Terminal execution (Auto): Hiermee kan de agent veilige, routinematige terminalcommando’s automatisch uitvoeren zonder elke keer te vragen.
- Review policy (Agent decides): Laat de agent kiezen wanneer expliciete beoordeling door een mens nodig is en wanneer hij zelfstandig kan doorgaan.
- Gebruik de standaard-allowlist voor de browser: Dit beperkt de browsertoegang van de agent tot een vooraf goedgekeurde set veilige domeinen en acties voor extra beveiliging.
Klik op Next om de setup af te ronden.
Als de setup voltooid is, maken we een workspace voor ons experiment.
Stap 3: Een nieuwe workspace aanmaken
Na de setup kom je op het Antigravity-startscherm. Klik op Open Folder en maak/kies een nieuwe map voor dit project, bijv.: ~/Antigravity/personal-finance-dashboard. Deze map wordt je Next.js-app.
Aan de rechterkant zie je het Agent-paneel waar je een model kunt selecteren en prompts kunt sturen.
Stap 4: De app bouwen
Met je workspace open kies je een model (bijvoorbeeld Gemini 3 Pro of Claude Sonnet 4.5, of GPT OSS 120B) in het Agent-paneel. Plak daarna de volgende prompt:
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 dashboardLet op: Op het moment van schrijven heb ik het Gemini 3 Pro (low)-model geprobeerd, maar dat leverde enkele fouten op. Voel je echter vrij om het model te kiezen dat past bij jouw usecase.
Je ziet dat de agent reageert met iets als:
Direct daarna stelt Antigravity een terminalcommando voor om het project te scaffolden. Klik gewoon op Accept om de agent het commando te laten uitvoeren en een paar achtergrondstappen te laten draaien om een volledige checklist voor de app te maken.
Hieronder zie je een screenshot van de achtergrondstappen die in de zijterminal draaien, te beginnen met het installeren van dependencies.
Je kunt dit gewoon laten lopen terwijl je de logs bekijkt.
Stap 5: De Task checklist-artifact bekijken
Zodra het scaffolding klaar is, genereert de agent een Task checklist-artifact voor het hele project.
Elke sectie bevat selectievakjes zoals:
- Next.js-project initialiseren met TypeScript en Tailwind CSS
- shadcn/ui-componentenbibliotheek instellen
- Savings/Bonds/Index Funds/Crypto-pagina met risicoprofiel
- Donkere modus, animaties en een responsieve layout implementeren
- Navigatie en sliderfunctionaliteit testen
Als deze lijst klaar is, gaat de agent elke taak één voor één af. Je kunt nu de Explorer-zijbalk openen om te zien wat de agent heeft aangemaakt:
Je hebt nu een standaard Next.js-, Tailwind- en shadcn/ui-bestand klaar om voor deze applicatie aan te passen.
Stap 6: Het implementatieplan bekijken
Naast de checklist genereert Antigravity een gedetailleerder Implementation Plan-artifact:
De sectie User Review Required bevat doorgaans:
- Ontwerpaanpak: Bevat informatie over donkere modus, gradients, animaties en responsief ontwerp van de applicatie.
- Datamodel: Dit onderdeel bevat alle risicometrics, zoals savings, bonds, index funds en crypto, voor onze applicatie voor financiële risico’s.
- Kernstructuur van de applicatie: Beschrijft hoe de hoofd-layoutbestanden worden aangepast om de globale stijlen, typografie, metadata, homepage en donkeremodus-thema in te richten.
- Productpagina’s: Somt de specifieke Next.js-pagina’s op zoals
/savings,/bonds,/index-funds,/crypto, en de specifieke informatie over risico, volatiliteit en rendement die elke pagina toont. - Gedeelde componenten: Definieert herbruikbare UI-componenten zoals navigatiebalk, risicoprofielkaarten, rendementscalculator en productoverzichtskaarten die zowel op de homepage als op productpagina’s worden gebruikt.
- Utilities en types: Behandelt de TypeScript-utilities in
lib/financial-data.tsdie productdata, risicoprofielen, berekeningen van verwachte rendementen en helperfuncties voor het formatteren van geld en percentages bevatten. - Verificatieplan: Schetst hoe de app wordt getest, inclusief het starten van de dev-server, handmatige controle van elke pagina en slider, validatie van donkere modus en responsiviteit, en het gebruik van de browseragent om een volledige walkthrough met screenshots op te nemen.
We kunnen risicogetallen aanpassen als we realistischer data willen of extra eisen toevoegen. Voeg ten slotte opmerkingen toe in de Task/Implementation Plan-artifacts als je wilt dat de agent de koers wijzigt.
Als het plan goed oogt, klik je op Proceed in het tabblad Implementation Plan. De agent begint dan bronbestanden te wijzigen en aan te maken in de map src/. Hij bouwt afzonderlijke pagina’s voor Savings, Bonds, Index Funds en Crypto.
Onderweg maakt hij herbruikbare componenten voor kaarten, sliders en grafieken, en past hij Tailwind- en shadcn/ui-styling toe in de hele app.
Tot slot zie je nieuwe Background Steps en Progress Updates voor elke codewijziging.
Stap 7: Testen en verifiëren
Als de implementatie klaar is, gaat Antigravity over op Testing and Verification. Je ziet een nieuw voortgangsitem waarbij Antigravity vraagt om de browser te gebruiken via de knoppen Setup of Deny. Klik gewoon op Setup om door te gaan.
Voordat de agent met de browser kan interacteren, heb je de officiële extensie nodig.
Ga naar de vermelding in de Chrome Web Store en klik op Add to Chrome.
Na installatie zie je, wanneer de agent de browser bedient, een gloed rond het scherm zoals hieronder:
Deze gloed geeft aan dat de Antigravity Agent de browser actief gebruikt, d.w.z. klikt, scrolt en de app test als onderdeel van de verificatiestap.
Stap 8: Het walkthrough-artifact bekijken
Als het testen is voltooid, zie je een laatste samenvatting van Progress Updates zoals hieronder:
Het Walkthrough-artifact bevat doorgaans:
- Screenshots van elke pagina
- Een opgenomen browsersessie van de agent die door de app klikt
- Een verhalende beschrijving van wat er is getest (bijvoorbeeld: “Gecontroleerd dat de slider op de Savings-pagina de verwachte rendementen realtime bijwerkt”)
Als alles er goed uitziet, klik je op Accept all om de wijzigingen toe te passen.
Hier is onze uiteindelijke app:
Stap 9: Het dashboard bewerken
Laten we nu itereren op de UI. Stel dat je een schakelaar voor donker/licht-modus in de header van het dashboard wilt en voor elke pagina een paar grafieken wilt toevoegen. In de Task- of Implementation Plan, of rechtstreeks in het Agent-paneel, kun je vragen:
Antigravity zal:
- De layoutcomponenten bijwerken om een themaschakelaar toe te voegen (waarschijnlijk met de theme-utilities van shadcn/ui)
- Grafiekcomponenten toevoegen, vervangen of verwijderen
- De app opnieuw draaien en de schakelaar in de browser testen
Klik nu op Submit; zowel onze eerdere opmerking als deze opmerking worden dan geïmplementeerd.
Stap 10: Fouten bekijken en debuggen
In de praktijk zul je merken dat reviews vaak tot best wat fouten leiden, mogelijk door het model, maar Antigravity blijft er toch aan werken met Computer Use.
Zelfs wanneer de agent fouten tegenkomt, kan hij:
- De foutmelding in de terminal lezen
- De app in de browser openen en het probleem reproduceren
- Screenshots en terugspeelopnames van de kapotte staat maken
- Die visuele aanwijzingen en logs gebruiken om de bug te fixen
Je kunt dit volgen door de Walkthrough te openen of de nieuwe Progress Updates voor debugstappen te bekijken.
Op dit punt heb je:
- Een agent geprompt om een volledige Next.js + Tailwind + shadcn/ui-app te scaffolden
- Een gestructureerd implementatieplan beoordeeld en bewerkt
- Antigravity de setup, het coderen, testen en de browserverificatie laten afhandelen
- Op de UI geïtereerd met opmerkingen en extra prompts
- Gezien hoe de agent issues debugt via computer use en screenshots
Onze uiteindelijke app is nu klaar voor review.
Stap 11: Eindresultaat
Na itereren op de schakelaar en de layout eindig je met een definitieve applicatie waarin de grafieken zijn verwijderd en de licht/donker-modusschakelaar overal op het dashboard werkt.
Donkere modus:
Lichte modus:
In de video hieronder zie je ons dashboard in actie:
