Última chance! Formação ilimitada com 50% de desconto
A promoção termina em
O Google Antigravity é um IDE orientado por agentes que combina modelos poderosos como o Gemini 3 a um fluxo de trabalho agent-first. Em vez de configurar manualmente ferramentas, terminais e sessões de navegador, você colabora com um agente de IA que planeja o trabalho em tarefas, executa comandos, edita código e até interage com o seu navegador para testar e documentar o app.
Neste tutorial, vou mostrar como criar um dashboard de risco de finanças pessoais funcional usando o Google Antigravity. Você vai ver como:
- Instalar e configurar o Antigravity com desenvolvimento assistido por agente
- Pedir ao agente para configurar um aplicativo com Next.js, Tailwind e shadcn/ui
- Revisar e refinar o plano de implementação gerado automaticamente
- Deixar o agente testar seu app no navegador usando a extensão do Antigravity
- Iterar em recursos como modo claro/escuro e depuração com uso do computador
Ao final, você terá um dashboard multipágina que visualiza níveis de risco de Poupança, Títulos, Fundos de índice e Cripto, com controles interativos e uma UI fintech moderna, tudo construído a partir de um único prompt. Também recomendo conferir nosso guia da API do Gemini 3 e o tutorial do Gemini 3 Flash.
Aviso legal: este tutorial tem caráter exclusivamente educacional e não constitui aconselhamento financeiro; sempre faça sua própria pesquisa ou consulte um profissional financeiro qualificado antes de tomar decisões de investimento.
O que é o Google Antigravity?
O Google Antigravity é uma plataforma de desenvolvimento agent-first que transforma seu IDE em uma base de controle para agentes de IA. No essencial, ele oferece aos agentes controle sincronizado sobre seu editor, terminal e navegador, para que possam planejar o trabalho, alterar código, executar comandos e verificar o comportamento de ponta a ponta em um único lugar.
Em vez de conectar scripts e ferramentas manualmente, você descreve o resultado desejado e deixa os agentes do Antigravity fazerem o trabalho pesado. Eles podem:
- Transformar um pedido de alto nível em um plano tático ou checklist de implementação
- Executar comandos no terminal para criar projetos, instalar dependências e iniciar servidores de desenvolvimento
- Editar código em todo o workspace, de arquivos de layout a componentes compartilhados
- Usar uma extensão de navegador para abrir seu app, percorrer fluxos e capturar screenshots ou gravações de passo a passo como Artifacts.
O Antigravity é baseado nos modelos Gemini 3 do Google, mas também suporta outros provedores como Claude Sonnet 4.5 e GPT-OSS. Ele possui duas superfícies principais: a visão Editor, que lembra um IDE (se você já usou Cursor ou VS Code), e a visão Agent Manager, que funciona como central de controle para tarefas mais longas e multi-workspace. Juntas, elas facilitam trabalhar no nível de tarefas enquanto os agentes cuidam dos detalhes de implementação.
Demo do Google Antigravity: construindo um dashboard de risco financeiro
Nesta seção, vamos criar um dashboard de risco de finanças pessoais com o Google Antigravity. O agente vai transformar um único prompt em linguagem natural em um projeto Next.js que modela diferentes produtos de investimento e seus perfis de risco.
Ao final, você terá:
- Um dashboard multipágina para Poupança, Títulos, Fundos de índice e Cripto
- Sliders interativos para horizonte de tempo
- Uma UI refinada com modo claro/escuro
- Entendimento de como os agentes do Antigravity planejam, implementam, testam e iteram um recurso completo
Passo 1: instalando o Google Antigravity
Comece baixando o Google Antigravity no site oficial e selecionando o instalador de acordo com as especificações da sua máquina.
Clique em Download for MacOS (ou para o seu sistema), e você será levado a uma tela de seleção de plataforma para escolher o binário adequado e concluir a instalação.
Para este tutorial, rodei em um Mac com Apple Silicon, mas a interface não muda em outras máquinas.
Depois de baixar, instale o Google Antigravity como qualquer outro aplicativo e abra-o.
Passo 2: configuração inicial
No primeiro acesso, o Antigravity conduz você por um assistente de onboarding.
Passo 2.1: escolha o fluxo de configuração
Se você é um usuário avançado de Cursor ou VS Code e deseja usar suas configurações para montar o Antigravity, selecione as opções correspondentes. Eu prefiro começar do zero, então marque Start fresh e clique em Next.
Passo 2.2: configure o Antigravity Agent
Em seguida, você verá uma tela sobre o uso do Agent. Para este tutorial, escolha:
- Desenvolvimento assistido por agente (recomendado): esta opção permite que o agente faça a maior parte do trabalho, mantendo você no loop para revisar planos e mudanças.
- Execução no terminal (Auto): permite que o agente rode automaticamente comandos rotineiros e seguros no terminal sem solicitar permissão a cada vez.
- Política de revisão (o agente decide): deixe o agente decidir quando precisa de revisão explícita humana e quando pode prosseguir sozinho.
- Use a allowlist padrão para o navegador: isso limita o acesso do agente ao navegador a um conjunto pré-aprovado de domínios e ações seguras, aumentando a segurança.
Clique em Next para finalizar a configuração.
Depois da configuração, o próximo passo é criar um workspace para nosso experimento.
Passo 3: criando um novo workspace
Quando a configuração terminar, você verá a tela inicial do Antigravity. Para continuar, clique em Open Folder e crie/selecione um novo diretório para este projeto. Ex.: ~/Antigravity/personal-finance-dashboard. Essa pasta será o seu app Next.js.
À direita, você verá o painel do Agent, onde é possível selecionar um modelo e enviar prompts.
Passo 4: construindo o app
Com o workspace aberto, escolha um modelo (por exemplo, Gemini 3 Pro ou Claude Sonnet 4.5, ou GPT OSS 120B) no painel do Agent. Em seguida, cole o seguinte 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 dashboardObservação: no momento em que escrevi este tutorial, testei o modelo Gemini 3 Pro (low), mas ocorreram alguns erros. Fique à vontade para escolher o modelo conforme seu caso de uso.
Você verá o agente responder com algo como:
Em seguida, o Antigravity vai propor um comando no terminal para criar a base do projeto. Basta clicar em Accept para o agente executar o comando e rodar algumas etapas em segundo plano para montar um checklist completo do app.
Abaixo está um screenshot das etapas em segundo plano executando no terminal lateral, começando pela instalação de dependências.
Você pode deixar rodando e acompanhar os logs.
Passo 5: revisando o artifact Task checklist
Quando o scaffolding terminar, o agente gera um artifact de Task checklist para todo o projeto.
Cada seção contém checkboxes como:
- Inicializar projeto Next.js com TypeScript e Tailwind CSS
- Configurar a biblioteca de componentes shadcn/ui
- Página de Poupança/Títulos/Fundos de índice/Cripto com perfil de risco
- Implementar modo escuro, animações e layout responsivo
- Testar navegação e funcionalidade dos sliders
Com a lista pronta, o agente começa a cobrir cada tarefa uma a uma. Neste ponto, você pode abrir a barra lateral Explorer para ver o que foi criado:
Agora você tem um projeto padrão com Next.js, Tailwind e shadcn/ui pronto para ser personalizado.
Passo 6: revisando o plano de implementação
Junto ao checklist, o Antigravity gera um artifact de Plano de implementação mais detalhado:
A seção User Review Required geralmente inclui:
- Abordagem de design: inclui informações sobre modo escuro, gradientes, animações e design responsivo do app.
- Modelo de dados: contém todas as métricas de risco, como poupança, títulos, fundos de índice e cripto, para nossa aplicação de risco financeiro.
- Estrutura principal do app: descreve como os arquivos de layout serão modificados para configurar estilos globais, tipografia, metadados, homepage e tema de modo escuro.
- Páginas de produto: lista as páginas dedicadas do Next.js como
/savings,/bonds,/index-funds,/cryptoe as informações de risco, volatilidade e retorno que cada uma exibirá. - Componentes compartilhados: define componentes de UI reutilizáveis como barra de navegação, cards de perfil de risco, calculadora de retornos e cards de visão geral de produtos usados na homepage e nas páginas de produto.
- Utilities e types: cobre as utilidades TypeScript em
lib/financial-data.tsque armazenam dados de produtos, perfis de risco, cálculos de retornos projetados e funções auxiliares para formatar dinheiro e percentuais. - Plano de verificação: descreve como o app será testado, incluindo iniciar o servidor de desenvolvimento, verificar manualmente cada página e slider, validar modo escuro e responsividade e usar o agente do navegador para gravar um walkthrough com screenshots.
Podemos ajustar os números de risco para dados mais realistas ou adicionar requisitos extras. Por fim, deixe comentários nos artifacts de Task/Implementation Plan se quiser que o agente ajuste a rota.
Quando o plano estiver bom, clique em Proceed na aba Implementation Plan. Ao fazer isso, o agente começará a modificar e criar arquivos-fonte no diretório src/, construindo páginas individuais para Poupança, Títulos, Fundos de índice e Cripto.
No processo, serão criados componentes reutilizáveis para cards, sliders e gráficos, além de aplicar estilos do Tailwind e shadcn/ui em todo o app.
Por fim, você verá novos Background Steps e Progress Updates para cada alteração de código.
Passo 7: testes e verificação
Quando a implementação terminar, o Antigravity entra em Testing and Verification. Você verá um novo item de progresso onde o Antigravity pedirá para usar o navegador via os botões Setup ou Deny. Simplesmente clique em Setup para prosseguir.
Antes de o agente interagir com o navegador, você precisa da extensão oficial.
Visite a página na Chrome Web Store e clique em Add to Chrome.
Depois da instalação, quando o agente estiver controlando o navegador, você verá um brilho ao redor da tela, como abaixo:
Esse brilho indica que o Antigravity Agent está usando ativamente o navegador, ou seja, clicando, rolando e testando o app como parte da verificação.
Passo 8: revisando o artifact de walkthrough
Quando os testes terminarem, você verá um resumo final em Progress Updates como este:
O artifact de Walkthrough geralmente inclui:
- Screenshots de cada página
- Uma sessão gravada do navegador com o agente clicando pelo app
- Uma descrição do que foi testado (ex.: “verificado: o slider da página Poupança atualiza os retornos projetados em tempo real”)
Se tudo estiver ok, clique em Accept all para aplicar as mudanças.
Aqui está nosso app final:
Passo 9: editando o dashboard
Agora vamos iterar na UI. Suponha que você queira um toggle de modo claro/escuro no cabeçalho do dashboard e adicionar alguns gráficos em cada página. No Task ou Implementation Plan, ou diretamente no painel do Agent, você pode pedir:
O Antigravity vai:
- Atualizar os componentes de layout para incluir o toggle de tema (provavelmente usando utilitários de tema do shadcn/ui)
- Adicionar, substituir ou remover componentes de gráfico
- Executar o app novamente e testar o toggle no navegador
Agora clique em Submit, e tanto nosso comentário anterior quanto este serão implementados.
Passo 10: revisar erros e depurar
Na prática, revisões podem levar a vários erros, talvez devido ao modelo, mas o Antigravity continua trabalhando nisso com Computer Use.
Mesmo quando encontra erros, o agente consegue:
- Ler a mensagem de erro no terminal
- Abrir o app no navegador e reproduzir o problema
- Capturar screenshots e gravações do estado com falha
- Usar esses sinais visuais e logs para corrigir o bug
Você pode acompanhar abrindo o Walkthrough ou verificando os novos Progress Updates das etapas de depuração.
Até aqui, você:
- Pediu a um agente para criar a base de um app completo com Next.js + Tailwind + shadcn/ui
- Revisou e editou um Plano de implementação estruturado
- Deixou o Antigravity cuidar da configuração, codificação, testes e verificação no navegador
- Iterou na UI com comentários e prompts adicionais
- Acompanhou o agente depurando problemas via uso do computador e screenshots
Agora nosso app final está pronto para revisão.
Passo 11: resultado final
Após iterar no toggle e no layout, você terá um aplicativo final em que os gráficos foram removidos e o toggle de modo claro/escuro funciona em todo o dashboard.
Modo escuro:
Modo claro:
Você pode ver nosso dashboard em ação no vídeo abaixo:
