Firebase Studio inclut une interface Web qui vous permet de prototyper et de générer rapidement des applications Web axées sur l'IA à l'aide de requêtes multimodales, y compris le langage naturel, les images et les outils de dessin. L'agent est compatible avec les applications Next.js. D'autres plates-formes et frameworks sont prévus à l'avenir.
L'agent de prototypage d'applications est un flux de développement simplifié sans code qui utilise l'IA générative pour développer, tester, itérer et publier une application Web complète basée sur des agents. Vous décrivez votre idée d'application en langage naturel avec une image facultative, et l'agent génère un plan d'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 pour vous :
Si votre application utilise l'IA : Firebase Studio ajoute l'API Developer 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 :
Connectez-vous à votre compte Google et ouvrez Firebase Studio.
Dans le champ Prototyper une application avec l'IA, décrivez votre idée d'application en langage naturel.
Par exemple, vous pouvez saisir une requête comme celle-ci pour créer une application de génération de recettes :
Use secure coding practices to create an error-free web app that lets users upload a photo or take a picture with their browser camera. The app identifies the food in the picture and generates a recipe and accompanying image that includes that food. If no food product is identified, generate a random dessert recipe.
Si vous le souhaitez, importez une image pour accompagner votre requête. Par exemple, vous pouvez importer une image contenant la palette de couleurs que vous souhaitez utiliser dans votre application et demander à Firebase Studio de l'utiliser. Les images doivent être inférieures à 3 Mio.
Cliquez sur Prototyper avec l'IA.
Gemini génère un plan d'application en fonction de votre requête. Il propose un nom d'application, les fonctionnalités requises et des consignes de style.
Examinez le plan. Si nécessaire, apportez quelques modifications. Par exemple, vous pouvez modifier le nom ou le jeu de couleurs proposés pour l'application à l'aide de l'une des options suivantes :
Cliquez sur
Personnaliser et modifiez directement le plan. Apportez les modifications nécessaires, puis cliquez sur Enregistrer.Dans le champ Décrivez… du volet de chat, ajoutez des questions et du contexte pour obtenir plus de précisions. Vous pouvez également importer d'autres images.
Cliquez sur Prototyper cette application.
L'agent de prototypage d'applications commence à coder votre application.
- 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", App Prototyping agent provisionne un projet Firebase et une clé Gemini API pour vous.
Tester, affiner, déboguer et itérer
Une fois l'application initiale générée, vous pouvez la tester, l'affiner, la déboguer et l'améliorer.
Examiner votre application et interagir avec elle : 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.
Corrigez les erreurs au fur et à mesure : dans la plupart des cas, App Prototyping agent vous invite à corriger les erreurs qui se produisent. Cliquez sur Corriger l'erreur pour permettre à l'outil de tenter de résoudre le problème.
Si vous recevez des erreurs pour lesquelles vous n'êtes pas invité à les corriger automatiquement, copiez l'erreur et tout contexte pertinent (par exemple, "Pouvez-vous corriger cette erreur dans mon code d'initialisation Firebase ?") dans la fenêtre de chat, puis envoyez-la à Gemini.
Testez et itérez à l'aide du langage naturel : testez votre application de manière approfondie et utilisez App Prototyping agent pour itérer sur le code et le plan jusqu'à ce que vous soyez satisfait.
Pendant votre séjour à Prototyper mode, you can also use the following features:
Cliquez sur
Annoter pour dessiner directement dans la fenêtre d'aperçu. Utilisez les outils de forme, d'image et de texte disponibles, ainsi qu'une requête textuelle facultative, pour décrire visuellement ce que vous souhaitez que App Prototyping agent modifie.
Cliquez sur
Sélectionner pour sélectionner un élément spécifique et saisir des instructions pour le App Prototyping agent. Cela vous permet de cibler rapidement une icône, un bouton, un élément de texte ou un autre élément spécifique. Lorsque vous cliquez sur une image, vous avez également la possibilité de rechercher et de sélectionner une image de stock sur Unsplash.
Vous pouvez également cliquer sur
Partager le lien d'aperçu pour partager votre application publiquement et temporairement à l'aide des aperçus publics de Firebase Studio.
Déboguer et itérer directement dans le code : cliquez sur
> Passer au code pour ouvrir la vue Code, où vous pouvez voir tous les fichiers de votre application et modifier directement votre code. Vous pouvez revenir à Prototyper mode at any time..
En mode Code, vous pouvez également utiliser les fonctionnalités utiles suivantes :
Les fonctionnalités de débogage et de création de rapports intégrées de Firebase Studio vous permettent d'inspecter, de déboguer et d'auditer votre application.
Assistance IA avec Gemini dans Firebase, soit de manière intégrée dans votre code, soit à l'aide d'un chat interactif (les deux sont disponibles par défaut). Le chat interactif peut diagnostiquer les problèmes, fournir des solutions et exécuter des outils pour vous aider à corriger votre application plus rapidement. Pour accéder au chat, cliquez sur sparkGemini en bas de l'espace de travail.
Accédez à Firebase Local Emulator Suite pour afficher les données d'authentification et de base de données. Pour ouvrir l'émulateur dans votre espace de travail :
Cliquez sur
Passer au code et ouvrez l'extension Firebase Studio (
Ctrl+',Ctrl+'
ouCmd+',Cmd+'
sur macOS).Faites défiler la page jusqu'à Ports de backend, puis développez cette section.
Dans la colonne Actions correspondant à Port 4000, cliquez sur Ouvrir dans une nouvelle fenêtre.
Testez et mesurez les performances de votre fonctionnalité d'IA générative : vous pouvez utiliser l'UI pour les développeurs Genkit afin d'exécuter vos flux d'IA Genkit, tester, déboguer, interagir avec différents modèles, affiner vos requêtes et plus encore.
Pour charger vos flux Genkit dans l'UI pour les développeurs Genkit et commencer les tests :
Depuis le terminal de votre espace de travail Firebase Studio, exécutez la commande suivante pour obtenir votre clé Gemini API et démarrer le serveur Genkit :
npm run genkit:watch
Cliquez sur le lien vers l'interface utilisateur pour les développeurs Genkit. L'interface utilisateur pour les développeurs Genkit s'ouvre dans une nouvelle fenêtre avec vos flux, vos requêtes, vos intégrateurs et une sélection de différents modèles disponibles.
Pour en savoir plus sur l'UI pour les développeurs Genkit, consultez Outils pour les développeurs Genkit.
Publier votre application avec Firebase App Hosting
Une fois que vous avez testé votre application et qu'elle vous convient dans votre espace de travail, vous pouvez la publier sur le Web avec Firebase App Hosting.
Lorsque vous configurez App Hosting, Firebase Studio crée un projet Firebase pour vous (si aucun n'a déjà été créé en générant automatiquement une clé Gemini API) et vous guide pour associer un compte Cloud Billing.
Pour publier votre application :
Cliquez sur Publier pour configurer votre projet Firebase et publier votre application. Le volet Publier votre application s'affiche.
À l'étape Projet Firebase, App Prototyping agent affiche le projet Firebase associé à l'espace de travail. Si aucun projet n'a été créé lors de la génération de la clé Gemini API, un nouveau projet sera créé pour vous. Cliquez sur Suivant pour continuer.
À l'étape Associer le compte Cloud Billing, choisissez l'une des options suivantes :
Sélectionnez le compte Cloud Billing que vous souhaitez associer à votre projet Firebase.
Si vous n'avez pas de compte Cloud Billing ou si vous souhaitez en créer un, cliquez sur Créer un compte Cloud Billing. La console Google Cloud s'ouvre, dans laquelle vous pouvez créer un compte Cloud Billing en libre-service. Une fois le compte créé, revenez sur Firebase Studio et sélectionnez-le dans la liste Associer Cloud Billing.
Cliquez sur Suivant. Firebase Studio associe le compte de facturation au projet associé à votre espace de travail, créé lorsque vous avez généré automatiquement une clé Gemini API ou lorsque vous avez cliqué sur Publier.
Cliquez sur Configurer les services. L'agent de prototypage d'applications commence à provisionner les services Firebase.
Cliquez sur Publier maintenant. Firebase Studio configure les services Firebase. Cette opération peut prendre plusieurs minutes. Pour en savoir plus sur ce qui se passe en arrière-plan, consultez Processus de compilation App Hosting.
Une fois l'étape de publication terminée, la page Présentation de l'application s'affiche avec une URL et des insights sur l'application fournis par l'observabilité App Hosting. Pour utiliser un domaine personnalisé (comme example.com ou app.example.com) au lieu du domaine généré par Firebase, vous pouvez ajouter un domaine personnalisé dans la console Firebase.
Pour en savoir plus sur App Hosting, consultez Comprendre App Hosting et son fonctionnement.
Sécuriser votre application avec Firebase App Check et reCAPTCHA Enterprise
Si vous avez intégré des services Firebase ou Google Cloud à votre application, Firebase App Check vous aide à protéger les backends de votre application contre toute utilisation abusive en empêchant les clients non autorisés d'accéder à vos ressources Firebase. Il fonctionne à la fois avec les services Google (y compris Firebase et les services Google Cloud) et avec vos propres backends personnalisés pour protéger vos ressources.
Nous vous recommandons d'ajouter App Check à toutes les applications que vous publiez publiquement pour protéger vos ressources de backend contre les utilisations abusives.
Cette section vous explique comment configurer App Check dans Firebase Studio à l'aide de reCAPTCHA Enterprise pour une application Web créée par App Prototyping agent. Toutefois, vous pouvez configurer App Check dans n'importe quelle application qui implémente des services Firebase et peut implémenter des fournisseurs personnalisés. Pour en savoir plus, consultez Firebase App Check.
reCAPTCHA Enterprise propose jusqu'à 10 000 évaluations sans frais.
Étape 1 : Configurer reCAPTCHA Enterprise pour votre application
Ouvrez la section reCAPTCHA Enterprise de la console Google Cloud.
Sélectionnez le nom de votre projet Firebase dans l'outil de sélection de projets de la console Google Cloud.
Si vous êtes invité à activer l'API reCAPTCHA Enterprise, faites-le.
Cliquez sur Get started (Commencer), puis ajoutez un Display name (Nom à afficher) pour votre clé de site reCAPTCHA.
Acceptez la clé Type d'application Web par défaut.
Cliquez sur Ajouter un domaine, puis ajoutez un domaine. Vous devez ajouter votre domaine App Hosting (par exemple,
studio--PROJECT_ID.REGION.hosted.app
) et tous les domaines personnalisés que vous utilisez ou prévoyez d'utiliser avec votre application.Cliquez sur Étape suivante.
Ne sélectionnez pas Allez-vous utiliser des tests ?.
Cliquez sur Créer une clé.
Copiez et enregistrez votre ID de clé, puis passez à Configurer App Check.
Étape 2 : Configurer App Check
Ouvrez la console Firebase, puis cliquez sur Créer > App Check dans le menu de navigation.
Cliquez sur Commencer, puis sur Enregistrer à côté de votre application.
Cliquez pour développer reCAPTCHA, puis collez l'ID de clé que vous avez généré pour reCAPTCHA Enterprise.
Cliquez sur Enregistrer.
Étape 3 : Ajoutez App Check à votre code
Revenez à Firebase Studio et, dans la vue Code, ajoutez la clé de site que vous avez générée à votre fichier
.env
:NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
Si vous n'avez pas encore enregistré votre configuration Firebase dans
.env
, obtenez-la :Dans la console Firebase, ouvrez Paramètres du projet et recherchez-le dans la section correspondant à votre application.
Dans le terminal de la vue Code :
- Connectez-vous à Firebase :
firebase auth login
- Sélectionnez votre projet :
firebase use FIREBASE_PROJECT_ID
- Obtenez la configuration Firebase :
firebase apps:sdkconfig
- Connectez-vous à Firebase :
Ajoutez la configuration à votre fichier
.env
pour qu'il ressemble à ce qui suit :NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
Ajoutez App Check au code de votre application. Vous pouvez demander à Gemini d'ajouter App Check avec reCAPTCHA Enterprise à votre application (assurez-vous de spécifier "reCAPTCHA Enterprise" et de bien vérifier l'orthographe), ou suivez les étapes décrites dans Initialiser App Check.
Republiez votre site sur App Hosting. Essayez de tester vos fonctionnalités Firebase pour générer des données.
Vérifiez que App Check reçoit des requêtes dans la console Firebase en ouvrant Créer > App Check.
Cliquez pour inspecter les services Firebase. Après avoir vérifié que les requêtes arrivent, cliquez sur Appliquer pour appliquer App Check.
Répétez la validation et l'application pour Firebase Authentication.
Si, après avoir enregistré votre application pour App Check, vous souhaitez l'exécuter dans un environnement que App Check ne classerait normalement pas comme valide (par exemple, localement pendant le développement ou à partir d'un environnement d'intégration continue (CI)), vous pouvez créer une version de débogage de votre application qui utilise le fournisseur de débogage App Check au lieu d'un véritable fournisseur d'attestation. Pour en savoir plus, consultez Utiliser App Check avec le fournisseur de débogage dans les applications Web.
Surveiller votre application
Le panneau Présentation de l'application dans Firebase Studio fournit des métriques et des informations clés sur votre application, ce qui vous permet de surveiller les performances de votre application Web à l'aide des outils d'observabilité intégrés de App Hosting. Une fois votre site déployé, vous pouvez accéder à l'aperçu en cliquant sur Publier. Depuis ce panneau, vous pouvez :
- Cliquez sur Publier pour lancer une nouvelle version de votre application.
- Partagez le lien vers votre application ou ouvrez-la directement dans Accéder à votre application.
- Consultez un récapitulatif des performances de votre application au cours des sept derniers jours, y compris le nombre total de requêtes et l'état de votre dernier déploiement. Cliquez sur Afficher les détails pour accéder à encore plus d'informations dans la console Firebase.
- Affichez un graphique du nombre de requêtes reçues par votre application au cours des dernières 24 heures, ventilées par code d'état HTTP.
Si vous fermez le panneau "Aperçu de l'application", vous pouvez le rouvrir à tout moment en cliquant sur Publier.
Pour en savoir plus sur la gestion et la surveillance des déploiements App Hosting, consultez Gérer les déploiements et les versions.
Effectuer un rollback de votre déploiement
Si vous avez déployé des versions successives de votre application sur App Hosting, vous pouvez effectuer un rollback vers l'une des versions antérieures. Vous pouvez également la supprimer.
Pour rétablir une version publiée d'un site :
Localisez le backend de votre application, cliquez sur Afficher, puis sur Déploiements.
À côté du déploiement vers lequel vous souhaitez revenir, cliquez sur Plus
, puis sélectionnez Revenir à cette version et confirmez.
Pour en savoir plus, consultez Gérer les déploiements et les versions.
Pour supprimer votre domaine App Hosting du Web :
Dans la console Firebase, ouvrez App Hosting, puis cliquez sur Afficher dans la section de l'application Firebase Studio.
Dans la section Informations sur le backend, cliquez sur Gérer. La page Domaines se charge.
À côté de votre domaine, cliquez sur Plus
, puis sélectionnez Désactiver le domaine et confirmez.
Votre domaine est alors supprimé du Web. Pour supprimer complètement votre backend App Hosting, suivez les instructions de la section Supprimer un backend.
Utiliser la surveillance Genkit pour vos fonctionnalités déployées
Vous pouvez surveiller les étapes, les entrées et les sorties de votre fonctionnalité Genkit en activant la télémétrie pour le code de votre flux d'IA. La fonctionnalité de télémétrie de Genkit vous permet de surveiller les performances et l'utilisation de vos flux d'IA. Ces données peuvent vous aider à identifier les axes d'amélioration, à résoudre les problèmes, à optimiser vos requêtes et vos flux pour améliorer les performances et l'efficacité des coûts, et à suivre l'utilisation de vos flux au fil du temps.
Pour configurer la surveillance dans Genkit, vous devez ajouter la télémétrie aux flux d'IA Genkit, puis afficher les résultats dans la console Firebase.
Étape 1 : Ajoutez la télémétrie au code de votre flux Genkit dans Firebase Studio
Pour configurer la surveillance dans votre code :
Si vous n'êtes pas déjà en vue Code, cliquez sur
Passer au code pour l'ouvrir.
Vérifiez
package.json
pour connaître la version de Genkit installée.Ouvrez le terminal (
Ctrl-Shift-C
ouCmd-Shift-C
sous macOS).Cliquez dans le terminal et installez le plug-in Firebase en utilisant la version qui correspond à votre fichier
package.json
. Par exemple, si les packages Genkit de votrepackage.json
sont à la version 1.0.4, vous devez exécuter la commande suivante pour installer le plug-in :npm i --save @genkit-ai/firebase@1.0.4
Dans l'explorateur, développez
src > ai > flows
. Un ou plusieurs fichiers TypeScript contenant vos flux Genkit s'affichent dans le dossierflows
.Cliquez sur l'un des flux pour l'ouvrir.
Au bas de la section des importations du fichier, ajoutez les éléments suivants pour importer et activer
FirebaseTelemetry
:import { enableFirebaseTelemetry } from '@genkit-ai/firebase'; enableFirebaseTelemetry();
Étape 2 : Configurez les autorisations
Firebase Studio a activé les API requises pour vous lors de la configuration de votre projet Firebase, mais vous devez également accorder des autorisations au compte de service App Hosting.
Pour configurer les autorisations :
Ouvrez la console IAM Google Cloud, sélectionnez votre projet, puis attribuez les rôles suivants au compte de service App Hosting :
- Rédacteur de métriques Monitoring (
roles/monitoring.metricWriter
) - Agent Cloud Trace (
roles/cloudtrace.agent
) - Rédacteur de journaux (
roles/logging.logWriter
)
- Rédacteur de métriques Monitoring (
Republiez votre application sur App Hosting.
Une fois la publication terminée, chargez votre application et commencez à l'utiliser. Au bout de cinq minutes, votre application devrait commencer à enregistrer les données de télémétrie.
Étape 3 : Surveillez vos fonctionnalités d'IA générative dans la console Firebase
Lorsque la télémétrie est configurée, Genkit enregistre le nombre de requêtes, le taux de réussite et la latence pour tous vos flux. Pour chaque flux spécifique, Genkit collecte des métriques de stabilité, affiche des graphiques détaillés et enregistre les traces capturées.
Pour surveiller vos fonctionnalités d'IA implémentées avec Genkit :
Au bout de cinq minutes, ouvrez Genkit dans la console Firebase et examinez les requêtes et les réponses de Genkit.
Genkit compile les métriques de stabilité suivantes :
- Nombre total de requêtes : nombre total de requêtes reçues par votre flux.
- Taux de réussite : pourcentage de demandes traitées avec succès.
- Latence au 95e centile : latence au 95e centile de votre flux, c'est-à-dire le temps nécessaire au traitement de 95 % des requêtes.
Utilisation des jetons :
- Jetons d'entrée : nombre de jetons envoyés au modèle dans la requête.
- Jetons de sortie : nombre de jetons générés par le modèle dans la réponse.
Utilisation des images :
- Images d'entrée : nombre d'images envoyées au modèle dans la requête.
- Images de sortie : nombre d'images générées par le modèle dans la réponse.
Si vous développez les métriques de stabilité, des graphiques détaillés sont disponibles :
- Volume des requêtes au fil du temps.
- Taux de réussite au fil du temps.
- Jetons d'entrée et de sortie au fil du temps.
- Latence (50e et 95e centiles) au fil du temps.
En savoir plus sur Genkit sur Genkit
Étapes suivantes
- Développez, publiez et surveillez une application Web full stack avec Firebase Studio.
- Développez des applications avec n'importe quel framework à l'aide d'un modèle ou d'une solution.