Começar a usar o agente de prototipagem de apps

O Firebase Studio inclui uma interface baseada na Web que permite criar protótipos e gerar rapidamente apps da Web com IA usando instruções multimodais, incluindo linguagem natural, imagens e ferramentas de desenho. O agente oferece suporte a apps 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 a IA generativa para desenvolver, testar, iterar e publicar um app da Web completo. Você descreve sua ideia de app em linguagem natural com uma imagem opcional, e o agente gera um modelo de app, código e uma visualização da Web. Para ajudar no desenvolvimento e na publicação do seu app full stack, o Firebase Studio pode provisionar automaticamente os seguintes serviços:

  • Se o app usa IA:o Firebase Studio adiciona a API Gemini para desenvolvedores ao app, usando o poder dos fluxos Genkit para trabalhar com Gemini. Você pode usar sua própria chave Gemini API ou permitir que o Firebase Studio provisione um projeto do Firebase e uma chave de API Gemini para você.
  • Se você quiser publicar seu app na Web:Firebase Studio cria um projeto e oferece uma maneira rápida de publicar seu app com Firebase App Hosting.

É possível refinar o app usando linguagem natural, imagens e ferramentas de desenho, editar o código diretamente, reverter as alterações, publicar o app e monitorar o desempenho dele, tudo isso em 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 Prototype an app with AI, descreva sua ideia de app em linguagem natural.

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

  3. Clique em Prototipar com IA.

    O agente de prototipagem de apps retorna um modelo de app, que fornece um nome proposto, recursos principais e diretrizes de estilo.

  4. Revise o blueprint. Você pode solicitar melhorias e mudanças em Gemini e editar o modelo diretamente:

    • Clique em Personalizar e edite o modelo diretamente. Faça as mudanças e clique em Salvar.

    • No campo Descreva... no painel de chat, adicione perguntas e contexto para esclarecer o problema. Você também pode fazer upload de outras imagens.

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

    O Gemini gera código do modelo e retorna uma visualização da Web para você analisar.

  6. Se o app usar IA, você vai receber uma solicitação para adicionar ou gerar uma chave Gemini API. Se você clicar em Gerar automaticamente, Firebase Studio provisionará um projeto do Firebase e uma chave Gemini API.

Depois de criar o app inicial, você pode:

  • Testar e iterar:teste o app completamente e trabalhe com o App Prototyping agent para iterar o código e o blueprint até ficar satisfeito. Você também pode clicar em </> para entrar na visualização de código e editar o código no espaço de trabalho Firebase Studio.

  • Analise e interaja com o app:depois que a geração de código for concluída, uma visualização do app vai aparecer. Você pode interagir com a visualização diretamente para testá-la. Saiba mais em Visualizar seu app.

  • Depurar o app:clique em Ícone de comutação de código Switch to Code para abrir a visualização Code, em que é possível usar os recursos de depuração e geração de relatórios integrados do Firebase Studio para inspecionar, depurar e auditar o app. Volte para Prototyper mode at any time..

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

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

Próximas etapas