Google Antigravity: construindo software com agentes de IA autônomos

Criando o projeto - Apresentação

Apresentando o curso e o instrutor

Bem-vindos ao curso de Antigravity da Alura. Meu nome é Ricardo Bugan, sou responsável pela Rede Operacional e atuo como pessoa desenvolvedora. Serei o instrutor deste curso.

Audiodescrição: Ricardo é um homem branco, com cabelo curto castanho e olhos claros. Veste uma camisa branca e está em um ambiente de escritório com uma parede clara ao fundo e alguns quadros coloridos.

Explorando a ferramenta Antigravity

Neste curso, exploraremos a ferramenta Antigravity, lançada recentemente pelo Google. Para isso, trabalharemos com o site Casa Verde, um projeto que desenvolveremos com base em um layout do Figma. O objetivo principal é explorar as funcionalidades e possibilidades que essa nova ferramenta do Google nos oferece.

O Antigravity é baseado no VS Code e integra agentes de IA diretamente no nosso ambiente de desenvolvimento. Poderemos utilizar tanto o Gemini quanto o Cloud, analisando as diferenças e trabalhando com ambas as opções para compreender melhor suas funcionalidades.

Abordando customizações e servidores MCP

Além disso, exploraremos outras possibilidades, como o uso do agente para conversas e como ele lida com o contexto. Também abordaremos a parte de customizações do nosso agente.

Vamos explorar as regras que desejamos que a ferramenta siga e os workflows que queremos que ela execute. Trabalharemos com essas duas customizações possíveis para entender melhor como funcionam, o que fazem e quais são suas vantagens.

Além disso, abordaremos a parte de servidores MCP, utilizando o servidor MCP do Figma. Nosso objetivo é compreender as vantagens de usar um contexto e um protocolo MCP para conectar a uma ferramenta e como isso melhora nossa interação com a inteligência artificial.

Testando e experimentando a ferramenta

Este curso é uma exploração da ferramenta, onde realizaremos muitos testes e enfrentaremos erros para explorar os limites da ferramenta e entender seu funcionamento. Assim, teremos uma visão mais clara sobre quando vale a pena utilizá-la, se ela é adequada para nossas necessidades ou não.

A ideia é testar e experimentar o que essa nova ferramenta, recém-lançada pelo Google, oferece. Convidamos todos a testar a ferramenta conosco e aprender mais sobre seu funcionamento. Vamos começar?

Criando o projeto - Iniciando um projeto do zero

Iniciando o curso de Antigravity

Vamos iniciar nosso curso de Antigravity, uma ideia recente do Google que traz novas integrações e conceitos de desenvolvimento baseados ou fortemente auxiliados por Inteligência Artificial (IA). O objetivo deste curso é explorar a ferramenta Antigravity, entender suas funcionalidades, como ela pode nos auxiliar no dia a dia enquanto pessoas desenvolvedoras, suas limitações e facilidades.

No site do Antigravity, antigravity.google, é possível fazer o download da ferramenta. Atualmente, ela está gratuita, pois foi lançada recentemente. No entanto, já existem planos para empresas e equipes, indicando que em algum momento a ferramenta poderá se tornar paga. Não sabemos se haverá um plano individual gratuito, mas é provável que não, devido ao custo da IA e da geração de dados. Por enquanto, podemos utilizá-la gratuitamente, e parece que estão realizando um open beta para identificar instabilidades e erros, melhorando a ferramenta com mais usuários.

Explorando a ferramenta Antigravity

Vamos explorar a ferramenta e entender seus benefícios e vantagens no dia a dia. Para isso, utilizaremos o projeto "Casa Verde". Temos um arquivo Figma pronto que servirá como base na ferramenta. Vamos focar principalmente na homepage, que possui seções como um hero, menu de navegação, explicações sobre funcionamento, ofertas e vídeos de depoimentos.

Ao abrir o Antigravity, se for a primeira vez, um menu de configuração será exibido. Caso já tenha utilizado, é possível acessar as configurações em "preferências", "file preferences", "antigravity settings". Nessa tela, podemos configurar o agente de IA embutido no Antigravity. Uma das primeiras opções é a política de revisão, que define a autonomia do agente de IA. Existem três opções: autonomia total, onde o agente sempre executa as ações; o agente decide se tem autonomia; ou o agente sempre solicita revisão antes de executar ações. Vamos utilizar a opção onde o agente decide se a ação é segura ou se precisa de nossa autorização.

Configurando o agente de IA

No terminal, o agente de IA pode acessar e executar comandos. Podemos configurar para que ele nunca execute comandos, exceto os que estão em uma allow list, ou deixá-lo decidir automaticamente. Em projetos delicados, é possível criar uma deny list para evitar ações indesejadas. A configuração inicial define a autonomia do agente, e podemos ajustar a allow list e deny list conforme necessário.

O agente também tem acesso a arquivos, mas não acessa o gitignore ou arquivos fora do workspace por padrão. O workspace refere-se ao espaço de trabalho do VSCode. No nosso caso, temos a pasta "Casa Verde" aberta para o projeto. O agente possui autonomia interna para corrigir erros automaticamente, o que é útil e vem ativado por padrão.

Criando o projeto em React

Se desejar alterar a configuração do agente, aumentar ou diminuir sua autonomia, isso pode ser feito na tela de configurações. Após configurar, se abrir a ferramenta pela primeira vez, uma tela menor com opções será exibida. Com o Antigravity aberto e a pasta "Casa Verde" selecionada, queremos que ele crie um projeto em React com o front-end do Figma que temos. Na aba lateral direita, podemos acessar a aba do agente. Caso a aba esteja fechada, podemos usar ctrl-p e buscar pelo comando ou ctrl-l para abrir a aba do agente. Com a aba aberta, podemos instruir o agente a criar o projeto em React com base no Figma.

Para começar, vamos criar um projeto em React com JavaScript, onde implementaremos o projeto da Casa Verde, que está no link do Figma. Utilizamos o seguinte comando para iniciar o projeto:

npx -y create-vite@latest ./ --template react

Processando informações e configurando o projeto

Após passar o link, o sistema começa a processar as informações, semelhante a uma imagem narrativa, e nos informa o que está sendo pensado. Ele fecha automaticamente algumas abas enquanto processa os dados.

O sistema está tentando abrir o projeto do Figma no navegador, utilizando uma integração nativa com o Chrome. Ele tenta navegar pela página e entender os comandos possíveis dentro do navegador. Podemos observar que ele tenta abrir a questão sozinho, dá um zoom para melhor contextualização e realiza ações de clique. O sistema nos mostra tudo o que está sendo feito e pensado.

Estilizando o projeto com CSS

Vamos configurar o projeto. Em alguns momentos, o sistema responde em inglês, em outros, em português, mas podemos nos comunicar apenas em português. Embora muitas IAs funcionem melhor com comandos em inglês, atualmente elas respondem bem em português. O sistema analisa a pasta e o design do Figma, capturando screenshots, descrições de cores, fontes, layout e estrutura.

Para estilizar nosso projeto, começamos importando as fontes do Google Fonts e definindo algumas variáveis de CSS para cores e fontes:

@import url('https://fonts.googleapis.com/css2?family=Elsie+Swash+Caps&family=Montserrat&display=swap');

:root {
    --font-heading: 'Elsie Swash Caps', serif;
    --font-body: 'Montserrat', sans-serif;

    --color-background: #FFFFFF;
    --color-text-primary: #202020;
    --color-text-secondary: #909090;

    --color-accent: #FFCB47;
    --color-green: #4F8B2F; /* Adjust as needed */
    --color-shadow: 10px 10px 30px 0;
    --color-shadow: rgba(0, 0, 0, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 900;
}

button, cursor: pointer;

a {
    font-family: var(--font-body);
    font-weight: 500;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

Criando componentes do projeto

O sistema aguarda nossa confirmação para executar comandos no terminal, como criar o projeto com Vite e definir o nome do pacote como "casa verde". Ele nos oferece a opção de aceitar o comando. Após a aceitação, o sistema organiza e executa tudo via terminal, pedindo validações durante o processo, como a instalação do npm.

O projeto está sendo criado e a pasta já está sendo populada. O sistema analisa a pasta source e continua o processo, trazendo assets padrão do Vite, como a pasta public, node_modules, package.json, gitignore, entre outros. Ele decide gerar uma imagem com o Gemini 3, criando uma planta em um vaso bonito, com folhas largas, realista e fundo transparente.

Criando o componente Header

Enquanto o sistema trabalha, utilizamos a versão do Gemini 3, que é o padrão. Ele cria o index.css, o header e tenta estruturar o hero. Vamos agora criar o componente Header:

import React from 'react';
import './Header.css';

const Header = () => {
    return (
        <header>
            <div className="logo">
                Casa Verde
            </div>
            <nav>
                <ul className="nav-links">
                    <li><a href="#como-fazer">Como fazer</a></li>
                    <li><a href="#ofertas">Ofertas</a></li>
                    <li><a href="#depoimentos">Depoimentos</a></li>
                    <li><a href="#videos">Videos</a></li>
                    <li><a href="#meu-carrinho">Meu carrinho</a></li>
                </ul>
            </nav>
        </header>
    );
};

export default Header;

E o CSS correspondente para o Header:

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: transparent;
    position: absolute;
    width: 100%;
    z-index: 10;
}

.logo {
    font-size: 2rem;
    color: var(--color-text-primary);
}

.nav-links {
    display: flex;
}

.nav-links a {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-primary);
    margin-left: 30px;
    transition: 0.3s;
}

.nav-links a:hover {
    color: var(--color-text-secondary);
}

@media (max-width: 768px) {
    header {
        padding: 20px;
        flex-direction: column;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

Criando o componente Hero

Após finalizar, o sistema nos fornece um resumo do que foi feito, como a análise do layout e a decisão de usar um grid layout com cards para a seção de ofertas.

O sistema cria a seção "how it works" e melhora a parte de ofertas, analisando o design e criando componentes. Vamos agora criar o componente Hero:

import React from 'react';
import './Hero.css';
import heroPlant from '../assets/hero_plant.png';

const Hero = () => {
    return (
        <section className="hero">
            <div className="hero-text">
                <h2>Sua casa com as</h2>
                <h1>melhores plantas</h1>
                <p>Encontre aqui uma vasta seleção de plantas para decorar a sua casa e torná-la uma pessoa mais feliz no seu dia a dia. Entre com seu e-mail e assine nossa newsletter para saber das novidades da marca.</p>
                <form>
                    <input type="email" placeholder="Insira seu e-mail" />
                    <button type="submit">Assinar newsletter</button>
                </form>
            </div>
            <div className="hero-image">
                <img src={heroPlant} alt="Planta em vaso" />
            </div>
        </section>
    );
};

export default Hero;

E o CSS correspondente para o Hero:

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 40px;
    min-height: 100vh;
}

.hero-text h2 {
    font-size: 1.5rem;
    font-weight: 400;
}

.hero-text h1 {
    font-size: 5rem;
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-text p {
    font-size: 1rem;
    max-width: 500px;
    margin-bottom: 30px;
}

.hero-text form {
    display: flex;
    box-shadow: var(--color-shadow);
}

.hero-text input {
    flex-grow: 1;
    padding: 15px;
    border: none;
    font-size: 1rem;
}

.hero-text button {
    padding: 15px 30px;
    background-color: var(--color-accent);
    color: white;
    font-size: 1rem;
    font-weight: bold;
}

@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        text-align: center;
    }
}

Criando o componente HowItWorks

O sistema define o escopo do projeto, verifica integrações e completa a implementação. O sistema edita o README, descrevendo o projeto e suas funcionalidades, como a navegação, a seção hero com newsletter, entre outros.

Vamos agora criar o componente HowItWorks:

import React from 'react';
import './HowItWorks.css';

const HowItWorks = () => {
    return (
        <section className="how-it-works">
            <div className="how-it-works-image">
                {/* Image will be a background */}
            </div>
            <div className="how-it-works-text">
                <h2>Como conseguir<br />minha planta</h2>
                <ul>
                    <li><span>1</span>Escolha suas plantas</li>
                    <li><span>2</span>Faça seu pedido</li>
                    <li><span>3</span>Aguarde na sua casa</li>
                </ul>
            </div>
        </section>
    );
};

export default HowItWorks;

E o CSS correspondente para o HowItWorks:

.how-it-works {
    display: flex;
    align-items: center;
    background-color: #f5f5f5; /* A light grey for contrast */
}

.how-it-works-image {
    flex: 1;
    background-image: url('...');
    background-size: cover;
    min-height: 400px;
}

.how-it-works-text {
    flex: 1;
    padding: 40px;
}

.how-it-works-text h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.how-it-works-text ul li {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.how-it-works-text ul li span {
    background-color: var(--color-accent);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-weight: bold;
}

Criando o componente Offers

Vamos agora criar o componente Offers:

import React from 'react';
import './Offers.css';

const Offers = () => {
    // This would ideally come from an API
    const products = [
        // Placeholder data based on the design
    ];

    return (
        <section className="offers">
            <h2>Conheça nossas<br />ofertas</h2>
            <div className="offers-grid">
                {/* Map over products to create product cards */}
            </div>
        </section>
    );
};

export default Offers;

E o CSS correspondente para o Offers:

.offers {
    padding: 80px 40px;
    text-align: center;
}

.offers h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

Integrando componentes no App

Finalmente, vamos integrar todos os componentes no nosso App:

import React from 'react';
import Header from './components/Header/Header';
import Hero from './components/Hero/Hero';
import HowItWorks from './components/HowItWorks/HowItWorks';
import Offers from './components/Offers/Offers';

function App() {
    return (
        <>
            <Header />
            <Hero />
            <HowItWorks />
            <Offers />
        </>
    );
}

export default App;

Explorando o projeto Casa Verde

Ao abrir o projeto Casa Verde no localhost, observamos a navegação e os botões que levam às seções. As imagens geradas têm fundo transparente, e o layout está interessante. Na primeira execução, o sistema não seguiu o padrão do Figma, mas agora o layout está mais alinhado com o esperado.

Com o primeiro setup concluído e algo funcionando, vamos explorar mais detalhes sobre como trabalhar melhor com essa ferramenta. Para rodar o projeto, siga as instruções no README:

# Casa Verde

Projeto desenvolvido em React com Vite, implementando o design "Casa Verde".

## Funcionalidades

- Header com navegação
- Hero section com newsletter
- Seção "Como conseguir" (Passo a passo)
- Seção "Ofertas" (Listagem de produtos)
- Design responsivo e fiel ao layout

## Tecnologias

- React
- Vite
- CSS Modules / Vanilla CSS
- Google Fonts (Elsie Swash Caps, Montserrat)

## Como rodar

1. Instale as dependências:
   ```bash
   npm install

2. Rode o servidor de desenvolvimento:

   npm run dev
   

Acesse http://localhost:5173

Agora, com o projeto configurado e rodando, podemos continuar explorando as funcionalidades do Antigravity e como ele pode nos auxiliar no desenvolvimento de projetos complexos.

Criando o projeto - Review por imagens

Configurando o ambiente de desenvolvimento

Para começar, vamos entender como o projeto foi gerado e como podemos configurá-lo para desenvolvimento. Inicialmente, após a geração do projeto, é importante instalar as dependências necessárias. Para isso, utilizamos o seguinte comando:

npm install

Com as dependências instaladas, podemos iniciar o servidor de desenvolvimento para visualizar o projeto em execução. Isso é feito com o comando:

npm run dev

Explorando os artefatos gerados

Agora que o projeto está em execução, podemos explorar os artefatos gerados. Na parte inferior da navegação, logo acima da caixa para inserir os prompts, há uma aba de artefatos. Esses artefatos incluem capturas de tela e vídeos que documentam o progresso do projeto. Por exemplo, ele criou um localhost top, que é nossa aba inicial.

Além disso, o sistema gerou imagens das plantas 1, 2 e 3, que nos dão uma ideia do trabalho realizado. Para garantir que essas imagens estejam disponíveis no projeto, podemos copiá-las para a pasta de ativos com o seguinte comando:

cp /home/bugan/Documents/Alura/antigravity/brain/c0476469-f962-49aa-836b-8f74f3efde8d/hero_plant_transparent_1704404294895.png /home/bugan/Documents/Alura/antigravity/Casa-Verde/src/assets/hero_plant.png
cp /home/bugan/Documents/Alura/antigravity/brain/c0476469-f962-49aa-836b-8f74f3efde8d/plant_1_1704404187100.png /home/bugan/Documents/Alura/antigravity/Casa-Verde/src/assets/plant_1.png
cp /home/bugan/Documents/Alura/antigravity/brain/c0476469-f962-49aa-836b-8f74f3efde8d/plant_2_1704404188309.png /home/bugan/Documents/Alura/antigravity/Casa-Verde/src/assets/plant_2.png
cp /home/bugan/Documents/Alura/antigravity/brain/c0476469-f962-49aa-836b-8f74f3efde8d/plant_3_1704404189464.png /home/bugan/Documents/Alura/antigravity/Casa-Verde/src/assets/plant_3.png
cp /home/bugan/Documents/Alura/antigravity/brain/c0476469-f962-49aa-836b-8f74f3efde8d/hero_plant_1704404294500.png /home/bugan/Documents/Alura/antigravity/Casa-Verde/src/assets/hero_plant.png

Esses artefatos servem tanto como memória do projeto quanto para nossa revisão. Podemos adicionar comentários diretamente nas imagens, o que facilita a comunicação e a revisão do design.

Explorando o componente Header

Agora, vamos explorar o código do projeto, começando pelo componente Header. Este componente é responsável pela navegação principal do site e é definido da seguinte forma:

import React from 'react';
import './Header.css';

const Header = () => {
    return (
        <header className="header">
            <div className="logo">Casa Verde</div>
            <nav className="nav-links">
                <a href="#">Como fazer</a>
                <a href="#">Ofertas</a>
                <a href="#">Depoimentos</a>
                <a href="#">Vídeos</a>
                <a href="#">Meu carrinho</a>
            </nav>
        </header>
    );
};

export default Header;

O estilo do Header é definido no arquivo CSS associado, que garante que o layout seja responsivo e visualmente agradável:

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: transparent;
    position: relative;
    z-index: 10;
}

.logo {
    font-size: 2rem;
    color: var(--color-text-primary);
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-primary);
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--color-text-secondary);
}

Explorando o componente Hero

Em seguida, temos o componente Hero, que destaca as principais informações e imagens do site:

import React from 'react';
import './Hero.css';
import HeroPlant from '../assets/hero-plant.png';

const Hero = () => {
    return (
        <section className="hero">
            <div className="hero-shape"></div>
            <div className="hero-content">
                <h2 className="hero-subtitle">Sua casa com as</h2>
                <h1 className="hero-title">melhores plantas</h1>
                <p>
                    Encontre aqui uma vasta seleção de plantas para decorar a sua casa e torná-la uma pessoa mais feliz no seu dia a dia. Entre com seu e-mail e assine nossa newsletter para saber das novidades da marca.
                </p>
                <form className="newsletter-form" onSubmit={(e) => e.preventDefault()}>
                    <input
                        type="email"
                        placeholder="Insira seu e-mail"
                        required
                    />
                    <button type="submit" className="newsletter-button">
                        Assinar newsletter
                    </button>
                </form>
            </div>
            <div className="hero-image-container">
                <img src={HeroPlant} alt="Planta decorativa" className="hero-plant"/>
            </div>
        </section>
    );
};

export default Hero;

O estilo do Hero é ajustado para garantir que o espaçamento e a apresentação visual sejam adequados:

.hero {
    gap: 100px;
}

Ajustando o design e revisando imagens

Por fim, o sistema tentou aplicar um mix-blend-mode com multiply no CSS para tornar a imagem transparente, mas isso não funcionou como esperado. No entanto, o espaçamento foi ajustado, permitindo uma melhor visualização dos elementos.

mix-blend-mode: multiply

A revisão por imagem é bastante interessante, pois o sistema entende nossas solicitações de alterações nas imagens, funcionando como se estivéssemos colaborando com um designer. Podemos validar e organizar o trabalho com os artefatos disponíveis, utilizando a inteligência artificial que o sistema oferece.

Sobre o curso Google Antigravity: construindo software com agentes de IA autônomos

O curso Google Antigravity: construindo software com agentes de IA autônomos possui 188 minutos de vídeos, em um total de 37 atividades. Gostou? Conheça nossos outros cursos de Automação e Produtividade em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Criando o projeto
• Conhecendo artefatos
• Adicionando regras
• Utilizando MCP
• Organizando tarefas repetitivas