Criar apps no Google AI Studio

Esta página descreve como usar o Google AI Studio para criar (ou "vibe code") e implantar rapidamente apps que testam os recursos mais recentes do Gemini, como o Nano Banana e a API Live. O Google AI Studio agora oferece suporte a runtimes full-stack, permitindo que você crie aplicativos robustos com lógica do lado do servidor, gerenciamento seguro de secrets e suporte a pacotes npm, tudo isso usando comandos em linguagem natural.

Primeiros passos

Comece a programar no modo de criação do Google AI Studio. Você pode começar a criar de algumas maneiras:

  • Comece com um comando: no modo de criação, use a caixa de entrada para inserir uma descrição do que você quer criar. Selecione "Chips de IA" para adicionar recursos específicos, como geração de imagens ou dados do Google Maps, ao seu comando. Você pode até dizer o que quer usando o botão de conversão de voz em texto.
  • Botão "Estou com sorte": se você precisar de uma faísca de criatividade, use o botão "Estou com sorte", e o Gemini vai gerar um comando com uma ideia de projeto para você começar.
  • Remixar um projeto da galeria: abra um projeto na Galeria de apps e selecione Copiar app.

Depois de executar o comando, o código e os arquivos necessários serão gerados, com uma prévia em tempo real do seu app aparecendo no lado direito.

O que é criado?

Quando você executa o comando, o AI Studio cria um aplicativo completo. Por padrão, ele cria um ambiente de stack completa que pode incluir:

  • Do lado do cliente: um front-end da Web (o React é o padrão).
  • Do lado do servidor: um ambiente de execução do Node.js que permite chamadas de API seguras, conexões de banco de dados e uso de pacotes npm.

Para ver o código gerado, selecione a guia Código no painel de visualização à direita. O Antigravity Agent gerencia de forma inteligente vários arquivos em toda a sua pilha, garantindo que as mudanças sejam propagadas corretamente.

O agente antigravidade

O agente Antigravity é a principal funcionalidade de IA do Google Antigravity. Agora, os componentes principais do conector do agente estão alimentando a experiência do modo de criação no Google AI Studio. Ele vai além da simples geração de código, mantendo o contexto de todo o projeto, gerenciando vários arquivos e entendendo instruções complexas para criar aplicativos full-stack robustos.

As principais capacidades incluem:

  • Consciência de contexto: mantém o contexto de comandos anteriores e estados de arquivos.
  • Gerenciamento de vários arquivos: processa dependências em vários arquivos.
  • Execução verificada: verifica atualizações de código para reduzir alucinações.

Recursos de pilha completa

O Google AI Studio libera o poder do ecossistema da Web moderna, permitindo que você crie mais do que apenas protótipos do lado do cliente.

  • Tempo de execução do lado do servidor e npm: use a vasta biblioteca de pacotes npm. O agente vai identificar e instalar automaticamente os pacotes conforme necessário para seu app (por exemplo, bibliotecas específicas para visualização de dados ou clientes de API). Você também pode solicitar pacotes específicos, se quiser.
  • Gerenciamento de secrets: armazene chaves de API e secrets com segurança no menu Configurações. Eles ficam acessíveis no código do lado do servidor, protegendo-os contra exposição do lado do cliente.
  • Multiplayer: crie experiências colaborativas em tempo real diretamente no AI Studio. O ambiente de execução do lado do servidor gerencia o estado e as conexões necessárias para que os usuários interajam entre si.
  • Integração do Firebase: provisione e configure automaticamente o Firebase, incluindo o banco de dados do Firestore (armazenamento de dados persistente) e o Firebase Authentication (fluxos de login, especificamente "Fazer login com o Google"). O agente lida com todo o processo de configuração e até mesmo escreve o código no seu app para esses serviços.

Saiba mais sobre o desenvolvimento de apps full-stack

Continuar criando

Depois que o Google AI Studio gerar o código inicial do seu aplicativo, você poderá continuar refinando-o:

Crie no Google AI Studio

  • Iterar com o Gemini: use o painel de chat no Modo de criação para pedir ao Gemini que faça modificações, adicione novos recursos ou mude o estilo.
  • Edite o código diretamente: abra a guia "Código" no painel de visualização para fazer edições em tempo real.

Desenvolver externamente

Para fluxos de trabalho mais avançados, exporte o código e trabalhe no ambiente de sua preferência:

  • Fazer o download e desenvolver localmente: exporte o código gerado como um arquivo ZIP e importe-o para seu editor de código.
  • Enviar para o GitHub: integre o código aos seus processos de desenvolvimento e implantação atuais enviando-o para um repositório do GitHub.

Principais recursos

O Google AI Studio inclui vários recursos para tornar o processo de criação intuitivo e visual:

  • Crie e itere em apps de pilha completa: crie apps de pilha completa com apenas um comando e itere no chat ou no modo de anotação. O modo de anotação permite destacar qualquer parte da interface do app e descrever a mudança desejada.
  • Compartilhe e implante seu app: você pode compartilhar suas criações com outras pessoas para colaborar ou mostrar seu trabalho. Quando o app estiver pronto, implante no Cloud Run.
  • Galeria de apps: a galeria de apps oferece uma biblioteca visual de ideias de projetos. Você pode navegar pelas possibilidades do Gemini, visualizar aplicativos instantaneamente e remixá-los para criar algo seu.

Crie e itere em apps de pilha completa: um breve texto sobre suporte de tempo de execução, itere com o modo de anotação Compartilhe e implante: compartilhe seu app no AI Studio ou implante no Cloud Run Confira a galeria de apps

Implantar ou arquivar o app

Quando o aplicativo estiver pronto, você poderá implantá-lo:

  • Google Cloud Run: implante seu aplicativo como um serviço escalonável. Os preços do Google Cloud Run podem ser aplicados com base no uso.
  • GitHub: exporte seu projeto para um repositório do GitHub.

Limitações

Esta seção lista as limitações atuais do modo de criação no Google AI Studio.

Segurança da chave de API

  • Lado do cliente: nunca use chaves de API reais diretamente no código do lado do cliente.
  • Do lado do servidor: use o recurso de gerenciamento de secrets para processar chaves sensíveis de maneira segura no ambiente de execução do lado do servidor.

Implantação fora do Google AI Studio

  • Embora seja possível implantar seu app no Cloud Run para um URL público, essa configuração vai usar sua chave de API para todas as chamadas da API Gemini dos usuários.
    • Os apps JavaScript são executados no lado do cliente. Portanto, garanta que as chaves de API tenham apenas acesso mínimo para evitar vazamentos ou uso indevido de dados. Por exemplo, outras lojas de pesquisa de arquivos do mesmo projeto podem ser acessadas pelos usuários usando esse mecanismo.
  • Implantação externa segura: para executar um app com segurança fora do AI Studio (por exemplo, depois de baixar o arquivo ZIP), mova a lógica que usa a chave de API para um componente do lado do servidor e evite a exposição da chave aos usuários finais. Isso não é necessário se você fizer a implantação usando o Cloud Run.
  • Aviso de exposição da chave: não é recomendável substituir o marcador por uma chave de API real em um ambiente do lado do cliente, porque a chave vai ficar visível para qualquer usuário.

Erro ao compartilhar apps

Se você compartilhar o app e o usuário final encontrar um erro 403 Acesso restrito ao usar o URL compartilhado, isso pode ser devido a um dos seguintes motivos:

  • Extensões do navegador: extensões de privacidade, como o Privacy Badger, podem estar bloqueando o app. Desative a extensão para evitar o erro.
  • Problemas de build: pode haver problemas com o código atual. Peça ao agente para "corrigir problemas de build com o código atual" e compartilhe o URL novamente.

A seguir