Een kleine webapp bouwen met Google Antigravity IDE begint met een project dat aan een lokale map is gekoppeld. Geef de agent daarna afgebakende opdrachten en controleer de wijzigingen en het resultaat in de browser. De auteur van InfoWorld beschreef daarvoor een concreet traject met Astro, HTMX en SQLite.

Kies de IDE, niet de losse agent-app

Google onderscheidt de standalone Antigravity-app, Antigravity IDE, Antigravity CLI en SDK. De IDE is de ontwikkelomgeving voor code en projectbestanden; de CLI is bedoeld voor agentinteractie via de terminal. De standalone-app is een afzonderlijk agentcommandocentrum. Voor een webapp met een editor, projectbestanden en terminal heb je dus de IDE nodig. Google legt de verschillen en de installatievereisten uit.

Voor Googles beginnersoefening zijn Chrome en een persoonlijk Gmail-account vereist. De installatie-instructies noemen macOS, Windows en bepaalde Linux-distributies.

Een projectmap is de start

Engelstalige beginnersvideo van Mikey No Code: projectinstelling, planreview, gerichte bestandsbewerkingen en browsertests in een aparte Node.js-to-do-app.

Een Antigravity-project kan één of meer mappen omvatten. Die projectcontext bepaalt de bestanden, tools en machtigingen waar de agent binnen het project mee werkt. In de beginnersdemo van Mikey No Code begint de agent pas met lokale bestanden nadat een project aan een lokale map is gekoppeld.

Bouw de webapp stap voor stap

De volgende stappen volgen de door InfoWorld beschreven bouw van Vintage Guitar Vault, een lokale gitaarinventaris. Het is een concreet Astro-, HTMX- en SQLite-project; de gebruikte technologieën zijn geen algemene vereisten voor Antigravity.

  1. Maak een project en koppel de map. Wijs Antigravity IDE de lokale projectmap toe voordat je de agent vraagt bestanden te lezen of te bewerken. Zo is duidelijk op welk project de opdracht betrekking heeft.
  2. Maak het Astro-project aan. De InfoWorld-auteur startte met npm create astro@latest vintage-guitar-vault en werkte vervolgens in src/pages/index.astro.
  3. Begin met de inventarispagina. In dit voorbeeld bevatte de eerste versie vaste gitaargegevens. Voor de beschreven inline codeaanvulling plaatste de auteur de Astro-frontmatterafscheiding ---. Een commentaar met gewenste gitaarvelden leverde gerichtere voorbeeldgegevens op dan een ongespecificeerd verzoek om een array; de gevraagde voorbeeldarray bevatte drie akoestische gitaren.
  4. Voeg de onderhoudsactie met HTMX toe. De app gebruikte HTMX om voor een gitaar een verzoek naar /api/maintenance/${guitar.id} te sturen. Inline aanvulling hielp bij de markup, maar loste volgens de InfoWorld-auteur niet vanzelf de ontbrekende HTMX-integratie of de verdere opzet van de backend op.
  5. Verplaats de gegevens naar SQLite en maak het endpoint. De auteur liet de gitaargegevens opslaan in een lokale SQLite-database via better-sqlite3, voegde een seed-script toe om die te vullen en bouwde de route /api/maintenance/[id] voor de onderhoudsgeschiedenis. Voor dit werk over meerdere bestanden gebruikte de auteur Agent Manager.
  6. Bekijk de wijzigingen en start de lokale server. Google beschrijft /plan als een manier om een implementatieplan op te vragen. Plannen, diffs, walkthroughs en screenshots kunnen als artefact verschijnen, maar zijn niet bij elke taak gegarandeerd; ook kan een zichtbare Proceed-knop ontbreken. Bekijk daarom de voorgestelde wijzigingen wanneer die beschikbaar zijn en controleer de app na het starten zelf. De InfoWorld-auteur startte de server met npm run dev en opende de app op localhost:4321.

Test de functie, niet alleen de startpagina

Open de lokale app in de browser en controleer naast het laden van de inventaris ook de onderhoudsactie. Daarmee test je het pad van de pagina via het HTMX-verzoek naar het onderhoudsendpoint. Google beschrijft plan- en reviewartefacten als mogelijke hulpmiddelen, niet als een stap die de controle bij elke taak automatisch overneemt.

De InfoWorld-auteur meldde in deze Windows-build een node-gyp-fout, die de agent na goedkeuring oploste. Bij het testen van de onderhoudsfunctie volgde later een TypeError; browsercontrole en verder werk met de agent losten die fout in dit project op. Zulke ervaringen onderstrepen het verschil tussen code aanvullen en een volledige functie integreren: de ontwikkelaar moet de samenhang tussen bestanden kunnen beoordelen en het werkende gedrag in de browser nalopen.