Premiers pas avec l'agent de prototypage d'applications

Firebase Studio inclut une interface Web qui vous permet de créer rapidement des prototypes et de générer des applications Web axées sur l'IA à l'aide d'invites multimodales, y compris le langage naturel, les images et les outils de dessin. L'agent est compatible avec les applications Next.js, et d'autres plates-formes et frameworks sont prévus à l'avenir.

L'agent de prototypage d'applications est un flux de développement sans code simplifié qui utilise l'IA générative pour développer, tester, itérer et publier une application Web full stack et agentique. Vous décrivez votre idée d'application en langage naturel avec une image facultative, et l'agent génère un plan de l'application, du code et un aperçu Web. Pour vous aider à développer et à publier votre application full stack, Firebase Studio peut provisionner automatiquement les services suivants:

  • Si votre application utilise l'IA:Firebase Studio ajoute l'API de développement Gemini à votre application, en utilisant la puissance des flux Genkit pour fonctionner avec Gemini. Vous pouvez utiliser votre propre clé Gemini API ou laisser Firebase Studio provisionner un projet Firebase et une clé API Gemini pour vous.
  • Si vous souhaitez publier votre application sur le Web:Firebase Studio crée un projet et fournit un moyen rapide de publier votre application avec Firebase App Hosting.

Vous pouvez affiner l'application à l'aide du langage naturel, d'images et d'outils de dessin, modifier le code directement, annuler les modifications, publier l'application et surveiller ses performances, le tout depuis Firebase Studio.

Premiers pas

Pour commencer à utiliser App Prototyping agent, procédez comme suit:

  1. Connectez-vous à votre compte Google, puis ouvrez Firebase Studio.

  2. Dans le champ Prototyper une application avec l'IA, décrivez votre idée d'application dans un langage naturel.

    Vous pouvez également ajouter une image à votre requête. Il peut s'agir d'un diagramme du parcours utilisateur idéal de votre application ou d'un jeu de couleurs que vous souhaitez que Firebase Studio respecte. La taille maximale des images est de 3 Mo.

  3. Cliquez sur Prototyper avec l'IA.

    L'agent de prototypage d'applications renvoie un plan de l'application, qui fournit un nom d'application proposé, les principales fonctionnalités et des consignes de style.

  4. Examinez le plan. Vous pouvez demander à Gemini d'apporter des améliorations et des modifications, et modifier directement le modèle:

    • Cliquez sur Personnaliser et modifiez directement le modèle. Apportez les modifications nécessaires, puis cliquez sur Enregistrer.

    • Dans le champ Décrivez… du volet de chat, ajoutez des questions de clarification et du contexte. Vous pouvez également importer des images supplémentaires.

  5. Lorsque vous approuvez le plan, cliquez sur Prototyper cette application.

    Gemini génère du code à partir du modèle et renvoie un aperçu Web à examiner.

  6. Si votre application utilise l'IA, vous êtes invité à ajouter ou à générer une clé Gemini API. Si vous cliquez sur Générer automatiquement, Firebase Studio provisionne un projet Firebase et une clé Gemini API pour vous.

Une fois votre application initiale créée, vous pouvez:

  • Testez et itérez:testez votre application de manière exhaustive et travaillez avec App Prototyping agent pour itérer sur le code et le plan jusqu'à ce que vous soyez satisfait. Vous pouvez également cliquer sur </> pour accéder à la vue du code et modifier le code dans l'espace de travail Firebase Studio.

  • Vérifiez et interagissez avec votre application:une fois la génération de code terminée, un aperçu de votre application s'affiche. Vous pouvez interagir directement avec l'aperçu pour le tester. Pour en savoir plus, consultez Prévisualiser votre application.

  • Déboguer l'application:cliquez sur Icône de bascule de code Passer au code pour ouvrir la vue Code, où vous pouvez utiliser les fonctionnalités de débogage et de création de rapports intégrées de Firebase Studio pour inspecter, déboguer et auditer votre application. Revenez à Prototyper mode at any time..

  • Publier votre application avec Firebase App Hosting:cliquez sur Publier pour publier votre application sur App Hosting.

  • Surveillez et optimisez vos applications et fonctionnalités d'IA:surveillez les performances et l'utilisation de votre application Web avec l'observabilité dans App Hosting et vos flux d'IA générative avec la télémétrie Firebase dans Genkit. Pour en savoir plus, consultez Surveiller les applications Web.

Étapes suivantes