Começar a usar o agente de prototipagem de apps

O Firebase Studio conta com uma interface baseada na Web que permite criar protótipos e gerar rapidamente web apps com IA via comandos multimodais, incluindo linguagem natural, imagens e ferramentas de desenho. O agente é compatível com aplicativos Next.js, com outras plataformas e frameworks planejados para o futuro.

O agente de prototipagem de apps é um fluxo de desenvolvimento simplificado sem código que usa IA generativa para desenvolver, testar, iterar e publicar um web app agêntico de pilha completa. Você descreve sua ideia de aplicativo usando linguagem natural com uma imagem opcional, e o agente gera um blueprint do aplicativo, o código e uma prévia da Web. Para ajudar no desenvolvimento e na publicação do aplicativo de pilha completa, o Firebase Studio pode provisionar automaticamente estes serviços por você:

  • Se o aplicativo usar IA: o Firebase Studio adicionará a API Gemini Developer ao aplicativo, usando o potencial dos fluxos do Genkit para funcionar com o Gemini. É possível sua própria chave da Gemini API ou permitir que o Firebase Studio provisione um projeto do Firebase e uma chave da API Gemini por você.
  • Se você quiser publicar seu web app: o Firebase Studio criará um projeto e terá uma maneira rápida de publicar seu aplicativo com o Firebase App Hosting.

É possível refinar o aplicativo usando linguagem natural, imagens e ferramentas de desenho, editar o código diretamente, reverter mudanças, publicar o aplicativo e monitorar o desempenho dele, tudo isso pelo Firebase Studio.

Primeiros passos

Para começar a usar o App Prototyping agent, siga estas etapas:

  1. Faça login na sua Conta do Google e abra o Firebase Studio.

  2. No campo Prototipar um aplicativo com IA, descreva sua ideia de aplicativo usando linguagem natural.

    Se quiser, adicione uma imagem ao seu comando. Pode ser um diagrama do fluxo do usuário ideal do aplicativo ou um esquema de cores que você quer que o Firebase Studio siga. As imagens podem ter no máximo 3 MiB.

  3. Clique em Prototipar com IA.

    O agente de prototipagem de apps retorna um blueprint do aplicativo, com um nome proposto, os recursos principais e diretrizes de estilo.

  4. Revise o blueprint. É possível pedir melhorias e mudanças ao Gemini e editar o blueprint diretamente:

    • Clique em Personalizar e edite o blueprint diretamente. Faça as alterações e clique em Salvar.

    • No campo Descreva... no painel da conversa, adicione perguntas e contexto para esclarecer. Também é possível fazer upload de outras imagens.

  5. Quando você aprovar o blueprint, clique em Prototipar este aplicativo.

    O Gemini gera o código baseado no blueprint e retorna uma prévia da Web para você revisar.

  6. Se o aplicativo usar IA, pediremos para você adicionar ou gerar uma chave da Gemini API. Se você clicar em Gerar automaticamente, o Firebase Studio provisionará um projeto do Firebase e uma chave da Gemini API por você.

Depois de criar o aplicativo inicial:

  • Analise e interaja com o aplicativo: depois que a geração do código for concluída, uma prévia do aplicativo será exibida. É possível interagir diretamente com a prévia para testá-la. Saiba mais em Visualizar seu aplicativo.

  • Teste e itere usando linguagem natural: teste o aplicativo por completo e trabalhe com o App Prototyping agent para iterar o código e o blueprint até ficar contente.

  • Depure e itere diretamente no código: clique em Ícone de Mudar para o Code Mudar para o Code para abrir a visualização do Code, em que é possível conferir todos os arquivos do aplicativo e modificar o código diretamente. É possível voltar para o Prototyper mode at any time.

    Na visualização do Code, também é possível usar os seguintes recursos úteis:

  • Publique seu aplicativo com o Firebase App Hosting: clique em Publicar para publicar o aplicativo no App Hosting.

  • Monitore e otimize seu aplicativo e recursos de IA: monitore o desempenho e o uso do web app com a observabilidade no App Hosting e os fluxos de IA generativa com a telemetria do Firebase no Genkit. Saiba mais em Monitorar web apps.

Próximas etapas