Para criar um app web local com o Google Antigravity, comece pelo Antigravity IDE e conecte o projeto a uma pasta do computador. Depois, avance por etapas — da página e dos dados até a integração com banco de dados — e teste o resultado no navegador.

Qual Antigravity usar

O Google distingue o aplicativo Antigravity, o Antigravity IDE, a CLI e o SDK. O aplicativo é descrito como uma central para gerenciar agentes; o IDE é voltado ao desenvolvimento e reúne recursos como gerenciador de agentes e artefatos; a CLI permite interagir com agentes pelo terminal. O exemplo de app local deste tutorial usa o IDE, não o aplicativo standalone nem a CLI. A Codelab do Google explica as diferenças entre essas superfícies e o fluxo inicial de configuração.

Antes de começar

Demonstração em inglês de Mikey No Code: configuração do projeto, revisão do plano, edições direcionadas e testes no navegador em um app de tarefas feito com Node.js — um exemplo diferente do app de guitarras em Astro.

Na Codelab atualizada em 5 de outubro de 2026, o Google lista macOS, Windows e distribuições específicas do Linux para a instalação local. Para o exercício introdutório, a página também indica o Chrome e uma conta pessoal do Gmail.

Crie um projeto e associe a ele uma pasta local antes de pedir ao agente que trabalhe com os arquivos. O Google descreve o projeto como o escopo de uma ou mais pastas, com configurações e permissões próprias. Mikey No Code também demonstra essa etapa em seu tutorial para iniciantes.

Do projeto vazio ao app local

A sequência abaixo acompanha o exemplo prático relatado pela InfoWorld: um inventário local de guitarras com histórico de manutenção. Em um tutorial publicado em 12 de outubro de 2026, o autor descreveu a construção com Antigravity IDE, Astro, HTMX e SQLite. Leia o relato prático da InfoWorld.

  1. Conecte a pasta do projeto. No Antigravity IDE, crie um projeto e selecione a pasta local em que os arquivos devem ficar. Sem esse vínculo, o fluxo demonstrado por Mikey No Code não dá ao agente acesso aos arquivos do projeto.
  2. Peça um plano antes de uma mudança maior. O Google documenta o comando /plan para solicitar um plano de implementação. Quando houver artefatos, examine o plano e as diferenças propostas antes de seguir. O Google ressalta que esses artefatos não são gerados em todas as tarefas e que o agente pode prosseguir sem exibir um botão “Proceed”.
  3. Crie a base em Astro. No exemplo da InfoWorld, o autor iniciou o projeto com npm create astro@latest vintage-guitar-vault e trabalhou em src/pages/index.astro. A lista de guitarras começou como dados estáticos na página. Para orientar a geração dos dados, um comentário que especificava os campos das guitarras produziu resultados mais direcionados do que um pedido genérico por uma matriz.
  4. Adicione a interação com HTMX e organize os dados. O exemplo passou a usar uma solicitação HTMX para buscar o histórico de manutenção em /api/maintenance/${guitar.id}. A assistência em linha ajudou com a sintaxe de marcação, mas o autor recorreu ao Agent Manager para coordenar as mudanças entre arquivos, instalar HTMX e corrigir a interpolação do Astro. Em seguida, o projeto passou os registros para um banco SQLite local usando better-sqlite3, criou um script de seed e implementou o endpoint /api/maintenance/[id].
  5. Inicie o servidor e teste o app. O comando usado no exemplo foi npm run dev, com a aplicação aberta localmente em localhost:4321. No relato, o autor descreveu um erro node-gyp no Windows, corrigido pelo agente após aprovação, e depois um TypeError no recurso de manutenção. Testes no navegador e trabalho adicional do agente resolveram esses problemas naquele projeto.

O que conferir durante a revisão

Uma sugestão de código em linha pode resolver uma questão de sintaxe sem cuidar de dependências, mudanças em vários arquivos ou decisões de arquitetura. No exemplo da InfoWorld, essas tarefas exigiram trabalho adicional no Agent Manager. Por isso, examine as alterações e teste os recursos no app em execução; um plano ou artefato de revisão pode ajudar quando aparece, mas não é garantido em toda tarefa.

Como conferência rápida, confirme que o projeto está associado à pasta correta, que o servidor inicia com npm run dev e que a página e o recurso de manutenção funcionam no navegador.