Vai al contenuto principale

Tutorial su Google Antigravity: crea un Finance Risk Dashboard

Scopri come Google Antigravity trasforma i prompt in app complete. Crea un dashboard finanziario con Gemini 3 e test del browser guidati dall’IA.
· 12 min leggi

Scopri con l'IA

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.

Download page

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.

Set up

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.

Set up

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.

Set up

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 dashboard

Nota: 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:

image7.png

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.ts che 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.

image12.png

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.

image6.png

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:

image29.png

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:

image10 (2).png

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:

image25.png

image2 (1).png

image13.png

image28.png

image4.png

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:

image15.png

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

image27.png

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:

image25.png

Modalità chiara:

image9.png

Puoi vedere il nostro dashboard in azione nel video qui sotto: 

Considerazioni finali

Google Antigravity sposta lo sviluppo dalla codifica manuale in un editor alla collaborazione con un agente che può pianificare, implementare e verificare funzionalità complete.

In un unico flusso di lavoro, abbiamo visto:

  • Pianificazione: include un artifact Task checklist e un Implementation plan
  • Esecuzione: la maggior parte delle esecuzioni è stata effettuata dall’agente tramite comandi da terminale, modifiche ai file e costruzione della UI
  • Verifica: per questo abbiamo richiesto automazione del browser, registrazioni di walkthrough e riepiloghi dei test
  • Iterazione: per lo più perfezionamenti guidati da commenti (modalità scura/chiara, ritocchi al layout), in cui l’agente ha lavorato sui commenti dell’utente.
  • Debugging: infine, un’indagine automatizzata degli errori tramite uso del computer ha reso il debugging semplice

Ora puoi riutilizzare lo stesso schema per altre app demo:

  • Un dashboard per l’intensità degli allenamenti
  • Un esploratore del rumore cittadino
  • Una UI completa per il food delivery

Se vuoi saperne di più sulla creazione di AI Agent, ti consiglio il corso Building AI Agents with Google ADK.

Google Antigravity FAQs

Google Antigravity supporta linguaggi di programmazione oltre a JavaScript e Next.js?

Sì. Sebbene gran parte dell’attenzione iniziale di Antigravity sia su framework web come JavaScript, TypeScript, React e Next.js, è progettato per supportare flussi di lavoro multilinguaggio. Gli agenti IA della piattaforma possono pianificare ed eseguire comandi su diversi tipi di progetto, quindi si prevede un’espansione del supporto a più linguaggi nel tempo.

Quali sono gli attuali rate limit o il modello di pricing di Google Antigravity?

Google Antigravity è attualmente in anteprima pubblica ed è gratuito da usare. Offre limiti generosi per le attività alimentate da Gemini 3 Pro e altri modelli supportati. Questi limiti si reimpostano periodicamente e i dettagli sui prezzi per futuri piani a pagamento non sono ancora stati annunciati.

Come fa Antigravity a garantire che il lavoro di un agente IA sia corretto e verificabile?

Antigravity genera automaticamente “Artifact” che documentano ogni fase del lavoro dell’agente, incluse liste di attività, piani di implementazione, log del terminale, screenshot e walkthrough registrati nel browser. Questa traccia di audit aiuta gli sviluppatori a verificare e rivedere ogni passo compiuto dall’agente.

È possibile eseguire più agenti in parallelo all’interno di Antigravity?

Sì. Antigravity consente di creare e gestire più agenti IA contemporaneamente. Ogni agente può concentrarsi su task o workspace diversi (per esempio, uno che gestisce l’implementazione del codice mentre un altro testa funzionalità o aggiorna la documentazione), abilitando veri flussi di lavoro multi-agente in parallelo.

Quali requisiti hardware o di sistema operativo richiede Antigravity?

Antigravity è disponibile per macOS, Windows e Linux. Funziona al meglio su sistemi moderni con RAM e potenza di calcolo sufficienti per attività assistite dall’IA. Per macOS sono consigliate le versioni da Monterey in su, mentre per Windows è richiesta un’installazione a 64 bit.

Aashi Dutt

Autore

Aashi Dutt

LinkedInTwitter

Sono una Google Developers Expert in ML (Gen AI), una Kaggle 3x Expert e una Women Techmakers Ambassador con oltre 3 anni di esperienza nel tech. Ho co-fondato una startup health-tech nel 2020 e sto conseguendo un master in informatica al Georgia Tech, con specializzazione in machine learning.

Argomenti

AI AgentsIntelligenza artificialeLarge Language Models

Correlato

Mostra altro →