Esta página descreve como usar o modo de criação no Google AI Studio para criar (ou programar) e implantar rapidamente apps que testam os recursos mais recentes do Gemini, como o nano banana e a API Live.
Primeiros passos
Comece a programar com o 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 criativa, 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 web app. Por padrão, ele cria um web app React, mas é possível criar um app Angular no menu "Configurações". Para ver o código gerado, selecione a guia Código no painel de visualização à direita.
Estes são os arquivos a serem observados:
- geminiService.ts: esse arquivo contém a lógica principal do app, desde a construção de comandos até a chamada da API Gemini e a análise das respostas dela. Você pode editar o comando básico nesse arquivo ou modificar qualquer funcionalidade do componente diretamente ou conversando de forma interativa com o Gemini no modo de build. O código neste arquivo usa o SDK GenAI TS para interagir com a API Gemini.
Continuar criando
Depois que o Google AI Studio gerar o código inicial do seu aplicativo da Web, você terá duas opções principais para continuar o projeto: Criar no AI Studio ou Desenvolver externamente.
Crie no Google AI Studio
Você pode continuar refinando e expandindo seu aplicativo diretamente no ambiente do Google AI Studio:
- Iterar com o Gemini: use o painel de chat no modo de criação para pedir que o Gemini faça modificações, adicione novos recursos ou mude o estilo. Por exemplo, você pode pedir: "Adicione um botão que alerta o usuário" ou "Mude o esquema de cores para azul e branco".
- Edite o código diretamente: abra a guia "Código" no painel de visualização para fazer edições em tempo real. Você pode salvar seu projeto no GitHub para usar o controle de versões durante o desenvolvimento.
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. Isso permite que você use suas ferramentas, sistemas de build e práticas de controle de versão local para continuar criando além do protótipo inicial.
- 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:
- Modo de anotação: em vez de escrever código para mudar a aparência do app, o modo de anotação permite destacar qualquer parte da interface do app e descrever a mudança desejada. Por exemplo, você pode selecionar um componente e digitar "Deixe este botão azul" ou "Anime esta imagem para que ela deslize da esquerda". Quando você seleciona Adicionar ao chat, um comando é gerado com uma captura de tela do app anotado.
- Compartilhe seu app: você pode compartilhar suas criações com outras pessoas para colaborar ou mostrar seu trabalho.
- Galeria de apps: a Galeria de apps oferece uma biblioteca visual de ideias de projetos. Você pode navegar pelas possibilidades do Gemini, testar aplicativos instantaneamente e recombiná-los para criar algo seu.
Implantar ou arquivar o app
Quando o aplicativo estiver pronto, você poderá implantá-lo diretamente no AI Studio. As opções de implantação incluem:
- Google Cloud Run: implante seu aplicativo como um serviço escalonável. Os preços do Google Cloud Run podem variar de acordo com o uso.
- GitHub: exporte seu projeto para um repositório do GitHub e integre-o aos fluxos de trabalho de desenvolvimento e implantação atuais.
Limitações
Esta seção descreve as limitações importantes ao usar o modo de criação no Google AI Studio.
Segurança e exposição de chaves de API
- O código dos apps compartilhados fica visível para qualquer pessoa que os acesse. Nunca use uma chave de API real diretamente no código do app.
- Por padrão, os apps usam um marcador de posição (por exemplo, process.env.GEMINI_API_KEY) para a chave de API. Quando um usuário executa seu app compartilhado no AI Studio, o AI Studio age como um proxy, substituindo o marcador de posição pela chave de API do usuário final e garantindo que ela permaneça privada.
Visibilidade e compartilhamento de apps
- Os apps são armazenados no Google Drive e herdam o modelo de permissões dele, o que significa que eles são particulares por padrão.
- Permissões de compartilhamento: quando você compartilha um app com outros usuários:
- Os usuários compartilhados podem ver o código e fazer um fork do app para uso próprio.
- Se tiverem permissão de edição, os usuários compartilhados poderão modificar o código do app.
Implantação fora do AI Studio
- Embora seja possível implantar seu app no Cloud Run para um URL público, essa configuração
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 acessíveis aos usuários por 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.
Suporte a ferramentas e recursos
- Importação de desenvolvimento local: no momento, não é possível desenvolver apps localmente com ferramentas externas e importá-los para o AI Studio.
A seguir
- Confira o que outras pessoas criaram e inspire-se remixando um projeto na Galeria de apps.
- Confira a playlist do YouTube com uma coleção de tutoriais de programação de vibe do AI Studio para ajudar você a começar.