Last chance! 50% off DataCamp Premium
Sale ends in
Google Antigravity è un’IDE guidata da agenti che abbina modelli potenti come Gemini 3 a un flusso di lavoro agent-first. Invece di configurare manualmente strumenti, terminali e sessioni del browser, collabori con un agente IA che può pianificare il lavoro come attività, eseguire comandi, modificare codice e persino interagire con il browser per testare e documentare la tua app.
In questo tutorial ti mostrerò come creare un Personal Finance Risk Dashboard funzionante usando Google Antigravity. Vedrai come:
- Installare e configurare Antigravity con sviluppo assistito da agenti
- Chiedere all’agente di impostare un’applicazione Next.js, Tailwind e shadcn/ui
- Esaminare e affinare il piano di implementazione generato automaticamente
- Lasciare che l’agente testi la tua app nel browser usando l’estensione Antigravity
- Iterare su funzionalità come modalità scura/chiara e debugging con uso del computer
Alla fine, avrai un dashboard multipagina che visualizza i livelli di rischio per Savings, Bonds, Index Funds e Crypto, con controlli interattivi e una moderna UI in stile fintech, il tutto costruito partendo da un singolo prompt. Ti consiglio anche di dare un’occhiata alla nostra guida all’API di Gemini 3 e al tutorial su Gemini 3 Flash.
Disclaimer: Questo tutorial ha solo scopo educativo e non costituisce consulenza finanziaria; prima di prendere decisioni di investimento, fai sempre le tue ricerche o consulta un professionista finanziario qualificato.
Che cos’è Google Antigravity?
Google Antigravity è una piattaforma di sviluppo agent-first che trasforma la tua IDE in una mission control per agenti IA. Alla base, offre agli agenti il controllo sincronizzato su editor, terminale e browser, così possono pianificare il lavoro, modificare codice, eseguire comandi e verificare il comportamento end-to-end da un unico posto.
Invece di collegare manualmente script e strumenti, descrivi il risultato che vuoi ottenere e lasci che gli agenti di Antigravity si occupino del lavoro pesante. Possono:
- Trasformare una richiesta ad alto livello in un piano a livello di task o in una checklist di implementazione
- Eseguire comandi da terminale per creare progetti, installare dipendenze e avviare server di sviluppo
- Modificare codice in tutto lo workspace, dai file di layout ai componenti condivisi
- Usare un’estensione del browser per aprire la tua app, cliccare i flussi e acquisire screenshot o registrazioni di walkthrough come Artifact.
Antigravity è basato sui modelli Gemini 3 di Google, ma supporta anche altri provider come Claude Sonnet 4.5 e GPT-OSS. Dispone di due interfacce principali, ovvero una vista Editor che assomiglia a un’IDE (se hai mai usato Cursor o VS Code), e una vista Agent Manager che funge da mission control per task più lunghe e multi-workspace. Insieme, rendono più semplice lavorare a livello di attività mentre gli agenti gestiscono i dettagli di implementazione.
Demo di Google Antigravity: creazione di un Finance Risk Dashboard
In questa sezione costruiremo un personal finance risk dashboard con Google Antigravity. L’agente trasformerà un singolo prompt in linguaggio naturale in un progetto Next.js che modella diversi prodotti di investimento e i loro profili di rischio.
Alla fine, avrai:
- Un dashboard multipagina per Savings, Bonds, Index Funds e Crypto
- Slider interattivi per l’orizzonte temporale
- Una UI rifinita con modalità scura/chiara
- La conoscenza di come gli agenti Antigravity pianificano, implementano, testano e iterano su una funzionalità completa
Passo 1: Installare Google Antigravity
Iniziamo scaricando Google Antigravity dal sito ufficiale e selezionando l’installer in base alle specifiche della tua macchina.
Clicca su Download for MacOS (o il tuo OS), e verrai portato a una schermata di selezione della piattaforma per scegliere il binario appropriato per la tua macchina e completare l’installazione.
Per questo tutorial, l’ho eseguito su un Mac con Apple Silicon, ma l’interfaccia non sarà diversa su altre macchine.
Una volta scaricato, configura Google Antigravity come qualsiasi altra applicazione e avviala.
Passo 2: Prima configurazione
Al primo avvio, Antigravity ti guida con una procedura di onboarding.
Passo 2.1: Scegli il flusso di setup
Se sei un utente esperto di Cursor o VS Code e vuoi usare le loro impostazioni per configurare Antigravity, seleziona le opzioni di conseguenza. Io preferisco partire da zero, quindi scegli Start fresh e clicca su Next.
Passo 2.2: Configura l’Antigravity Agent
Poi vedrai una schermata sull’uso degli agenti. Per questo tutorial, scegli:
- Sviluppo assistito da agenti (consigliato): questa opzione consente all’agente di fare la maggior parte del lavoro ma mantiene un umano nel loop, così puoi rivedere piani e modifiche man mano.
- Esecuzione da terminale (Auto): permette all’agente di eseguire automaticamente comandi di terminale sicuri e di routine senza chiedere ogni volta.
- Policy di revisione (decide l’agente): lascia che l’agente scelga quando necessita di una revisione esplicita da parte dell’umano e quando può procedere da solo.
- Usa la allowlist predefinita per il browser: limita l’accesso dell’agente al browser a un insieme pre-approvato di domini e azioni sicuri per maggiore sicurezza.
Clicca su Next per completare il setup.
Una volta completata la configurazione, il passo successivo è creare uno workspace per il nostro esperimento.
Passo 3: Creare un nuovo workspace
Al termine del setup, atterrerai sulla schermata principale di Antigravity. Per procedere, clicca su Open Folder e crea/seleziona una nuova directory per questo progetto. Es.: ~/Antigravity/personal-finance-dashboard. Questa cartella diventerà la tua app Next.js.
Sulla destra dovresti vedere il pannello dell’agente dove puoi selezionare un modello e inviare prompt.
Passo 4: Costruire l’app
Con lo workspace aperto, scegli un modello (ad esempio Gemini 3 Pro oppure Claude Sonnet 4.5 o GPT OSS 120B) nel pannello dell’agente. Poi incolla il seguente 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 dashboardNota: al momento della stesura di questo tutorial, ho provato con il modello Gemini 3 Pro (low), ma ha generato alcuni errori. Sentiti comunque libero di provare il modello più adatto al tuo caso d’uso.
Vedrai l’agente rispondere con qualcosa di simile a:
Subito dopo, Antigravity proporrà un comando da terminale per creare l’impalcatura del progetto. Clicca semplicemente su Accept per lasciare che l’agente esegua il comando e alcuni passaggi in background per creare una checklist completa per l’app.
Di seguito uno screenshot dei passaggi in background in esecuzione nel terminale laterale, a partire dall’installazione delle dipendenze.
Puoi lasciarlo in esecuzione mentre osservi i log.
Passo 5: Esaminare l’artifact Task checklist
Una volta terminato lo scaffolding, l’agente genera un artifact Task checklist per l’intero progetto.
Ogni sezione contiene checkbox come:
- Inizializzare il progetto Next.js con TypeScript e Tailwind CSS
- Impostare la libreria di componenti shadcn/ui
- Pagina Savings/Bonds/Index Funds/Crypto con profilo di rischio
- Implementare dark mode, animazioni e layout responsive
- Testare la navigazione e la funzionalità degli slider
Una volta pronta questa lista, l’agente inizia a coprire ciascun task uno per uno. A questo punto puoi aprire la sidebar Explorer per vedere cosa ha creato l’agente:
Ora hai un file standard per Next.js, Tailwind e shadcn/ui pronto per essere personalizzato per questa applicazione.
Passo 6: Esaminare il piano di implementazione
Insieme alla checklist, Antigravity genera un artifact più dettagliato di Implementation Plan:
La sezione User Review Required in genere include:
- Approccio di design: include informazioni su dark mode, gradienti, animazioni e design responsive dell’applicazione.
- Modello dati: contiene tutte le metriche di rischio, come savings, bonds, index funds e crypto, per la nostra applicazione di rischio finanziario.
- Struttura principale dell’applicazione: descrive come verranno modificati i file di layout principali per impostare stili globali, tipografia, metadati, homepage e tema dark-mode.
- Pagine prodotto: elenca le pagine Next.js dedicate come
/savings,/bonds,/index-funds,/crypto, e le specifiche informazioni su rischio, volatilità e rendimento che ognuna mostrerà. - Componenti condivisi: definisce componenti UI riutilizzabili come barra di navigazione, schede del profilo di rischio, calcolatore dei rendimenti e schede panoramiche dei prodotti, usati su homepage e pagine prodotto.
- Utility e tipi: copre le utility TypeScript in
lib/financial-data.tsche contengono dati dei prodotti, profili di rischio, calcoli dei rendimenti previsti e funzioni helper per formattare denaro e percentuali. - Piano di verifica: delinea come verrà testata l’app, incluso l’avvio del server di sviluppo, il controllo manuale di ogni pagina e slider, la validazione di dark mode e responsività, e l’uso dell’agente del browser per registrare un walkthrough completo con screenshot.
Possiamo regolare i numeri di rischio se vogliamo dati più realistici o aggiungere requisiti extra. Infine, aggiungi commenti negli artifact Task/Implementation Plan se vuoi che l’agente modifichi la rotta.
Quando il piano ti sembra valido, clicca su Proceed nella scheda Implementation Plan. A questo punto, l’agente inizierà a modificare e creare file sorgente nella directory src/. Costruirà pagine individuali per Savings, Bonds, Index Funds e Crypto.
Nel frattempo, creerà componenti riutilizzabili per card, slider e grafici, applicando lo styling di Tailwind e shadcn/ui in tutta l’app.
Infine, vedrai nuovi Background Steps e Progress Updates per ogni modifica al codice.
Passo 7: Test e verifica
Una volta completata l’implementazione, Antigravity passa a Testing and Verification. Vedrai un nuovo elemento di avanzamento in cui Antigravity chiederà di usare il browser tramite i pulsanti Setup o Deny. Semplicemente clicca su Setup per procedere.
Prima che l’agente possa interagire con il browser, hai bisogno dell’estensione ufficiale.
Visita la pagina sul Chrome Web Store e clicca su Add to Chrome.
Dopo l’installazione, quando l’agente controlla il browser, noterai un alone luminoso attorno allo schermo come mostrato sotto:
Questo alone indica che l’Antigravity Agent sta utilizzando attivamente il browser, cioè sta cliccando, scorrendo e testando l’app come parte della fase di verifica.
Passo 8: Esaminare l’artifact del walkthrough
Al completamento dei test, vedrai un riepilogo finale di Progress Updates come segue:
L’artifact Walkthrough in genere include:
- Screenshot di ogni pagina
- Una sessione del browser registrata con l’agente che clicca nell’app
- Una descrizione narrativa di quanto testato (esempio: “Verificato che lo slider della pagina Savings aggiorni i rendimenti previsti in tempo reale”)
Se tutto ti sembra a posto, clicca su Accept all per applicare le modifiche.
Ecco la nostra app finale:
Passo 9: Modificare il dashboard
Ora iteriamo sulla UI. Supponiamo che tu voglia un toggle modalità scura/chiara nell’header del dashboard e aggiungere alcuni grafici per ogni pagina. Nel Task o nell’Implementation Plan, o direttamente nel pannello dell’agente, puoi chiedere:
Antigravity farà quanto segue:
- Aggiornare i componenti di layout per includere un toggle del tema (probabilmente usando le utility di shadcn/ui)
- Aggiungere, sostituire o rimuovere componenti di grafico
- Riavviare l’app e testare il toggle nel browser
Ora clicca su Submit, e sia il nostro commento precedente che questo verranno implementati.
Passo 10: Rivedere gli errori e fare debugging
In pratica, potresti notare che le revisioni spesso portano a diversi errori, magari dovuti al modello, ma Antigravity continua comunque a lavorarci con Computer Use.
Anche quando l’agente incontra errori, può:
- Leggere il messaggio di errore nel terminale
- Aprire l’app nel browser e riprodurre il problema
- Acquisire screenshot e registrazioni dello stato malfunzionante
- Usare quei segnali visivi e i log per correggere il bug
Puoi seguire il flusso aprendo il Walkthrough o controllando le nuove Progress Updates per i passaggi di debugging.
A questo punto hai:
- Chiesto a un agente di creare lo scheletro di un’app Next.js + Tailwind + shadcn/ui completa
- Rivisto e modificato un Implementation Plan strutturato
- Lasciato ad Antigravity il setup, il coding, i test e la verifica nel browser
- Iterato sulla UI con commenti e prompt aggiuntivi
- Osservato l’agente fare debugging tramite uso del computer e screenshot
Ora la nostra app finale è pronta per la revisione.
Passo 11: Risultato finale
Dopo aver iterato sul toggle e sul layout, avrai un’app finale in cui i grafici sono rimossi e il toggle modalità chiara/scura funziona in tutto il dashboard.
Modalità scura:
Modalità chiara:
Puoi vedere il nostro dashboard in azione nel video qui sotto:
