Cette page a été traduite par l'API Cloud Translation.

Firebase MCP dans Firebase Studio

1. Présentation

Dans cet atelier de programmation, vous allez vous entraîner à utiliser l'agent de prototypage d'applications avec le serveur Firebase MCP dans Firebase Studio pour créer une application Web full stack qui utilise Firebase Realtime Database.

GIF animé de l'application finale

Points abordés

Générer une application Web statique à l'aide de l'agent de prototypage d'applications
Configurer le serveur MCP Firebase
Ajouter Firebase Realtime Database à l'aide de Firebase MCP

Prérequis

Un navigateur de votre choix, tel que Google Chrome
Un compte Google pour créer et gérer votre projet Firebase

2. Générer votre application à l'aide de l'agent de prototypage d'applications

L'agent de prototypage d'applications utilise Gemini dans Firebase pour créer votre application. Même en utilisant des requêtes identiques, les résultats peuvent varier. Si vous êtes bloqué, nous vous fournissons un ensemble de fichiers que vous pouvez ajouter à votre espace de travail pour reprendre l'atelier de programmation à plusieurs points de contrôle.

Connectez-vous à votre compte Google, rejoignez le programme Google Developers et ouvrez Firebase Studio.
Dans le champ Prototyper une application avec l'IA, saisissez une description de l'application :
```
An app for a picker wheel that allows custom input.
```
Cliquez sur Améliorer la requête. Examinez la requête améliorée.
Cliquez sur Prototyper avec l'IA.
Examinez le plan d'application suggéré. Cliquez sur Personnaliser pour le modifier.
Cliquez sur Enregistrer.
Une fois que le plan a intégré vos modifications, cliquez sur Prototyper cette application.
Si votre plan contient des éléments d'IA, l'agent vous invite à fournir une clé Gemini. Ajoutez votre propre clé API Gemini ou cliquez sur Générer automatiquement pour en générer une. Si vous cliquez sur Générer automatiquement, Firebase Studio crée un projet Firebase et génère une clé API Gemini pour vous.
L'agent de prototypage d'applications utilise le plan pour créer une première version de votre application. Une fois cette version créée, l'aperçu de votre application s'affiche à côté d'une interface de chat Gemini. Prenez le temps d'examiner et de tester votre application. Si vous rencontrez des erreurs, cliquez sur Corriger l'erreur dans le chat pour permettre à l'agent de corriger ses propres erreurs.

3. Configurer Firebase MCP dans Firebase Studio

Le serveur Firebase MCP étend les capacités de l'agent de prototypage d'applications en fournissant des outils que l'agent peut appeler pour configurer, gérer et extraire des données des services Firebase, y compris Firebase Authentication, Cloud Firestore et Firebase Data Connect. Voici comment la configurer.

Dans Firebase Studio, cliquez sur Passer à la vue Code pour ouvrir la vue Code.
Dans le terminal (Shift+Ctrl+C), exécutez la commande suivante pour vous connecter à votre compte Firebase, en suivant les instructions à l'écran et en laissant toutes les options par défaut :
```
firebase login --no-localhost
```
Dans l'explorateur (Ctrl+Shift+E), effectuez un clic droit sur le dossier .idx, puis sélectionnez Nouveau fichier. Nommez le fichier mcp.json et appuyez sur Entrée.

Ajoutez les configurations du serveur à .idx/mcp.json.

{
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}

Vérifiez que vous êtes connecté au serveur MCP Firebase. Des entrées de journal semblables devraient s'afficher dans le panneau "Sortie", avec "Gemini" sélectionné comme canal approprié. Journaux MCPManager de Gemini

4. Ajouter Firebase Realtime Database à l'aide de Firebase MCP

Objectif 1 : Ajouter Firebase à votre application

Passez à Prototyper. Dans l'interface de chat, demandez à l'agent de créer un projet.
```
Create a Firebase project for my app.
```
Attendez-vous à ce que l'agent appelle l'outil Firebase MCP firebase_create_project.Ignorez cette étape si vous avez déjà créé un projet Firebase en utilisant l'option de génération automatique pour obtenir une clé API Gemini. L'ID de votre projet doit s'afficher à côté du nom de votre espace de travail, en haut à gauche de l'écran. Vous pouvez également demander à l'agent de lister vos projets et noter celui que vous souhaitez utiliser.
```
List my Firebase projects
```
L'agent doit appeler l'outil Firebase MCP firebase_list_projects.
Demandez à l'agent de se connecter à ce projet.
```
Connect my app to my project `spinsync-3y3c6`.
```
Assurez-vous de voir un fichier .firebaserc qui définit votre projet actif. Si ce n'est pas le cas, demandez à l'agent de mettre à jour votre environnement Firebase.
```
Update my Firebase environment to use this project.
```
L'agent doit appeler l'outil Firebase MCP firebase_update_environment . Toutefois, il est possible que l'agent y parvienne sans appeler l'outil.Enfin, vérifiez que votre environnement Firebase dispose du bon projet actif et que vous êtes l'utilisateur authentifié.
```
Show me my current Firebase environment.
```
L'agent doit appeler l'outil Firebase MCP firebase_get_environment.
Demandez à l'agent de créer une application Web dans votre projet Firebase.
```
Create a web app in my active Firebase project.
```
L'agent devrait appeler l'outil firebase_create_app et renvoyer l'ID de l'application. Si l'agent ne parvient pas à le faire, réessayez en cliquant sur , ou suivez ces instructions pour effectuer l'étape dans la console Firebase.
```
Use the App ID to get the SDK configuration and add to my app.
```
Attendez-vous à ce que l'agent appelle l'outil firebase_get_sdk_config et mettez à jour votre code avec votre configuration Firebase.Si votre clé API et d'autres configurations apparaissent dans src/lib/firebase.ts une fois que l'agent a déclaré la tâche terminée, demandez-lui de les déplacer pour sécuriser votre application.
```
Secure my code by moving my Firebase config to the `.env` file.
```

Objectif 2 : Ajouter Firebase Realtime Database

Restez sur Prototyper ou passez à Prototyper. Dans l'interface de chat, demandez à l'agent de configurer Firebase Realtime Database dans votre projet.
```
Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
```
L'agent devrait appeler l'outil Firebase MCP firebase_init et créer des règles de sécurité dans database.rules.json dans le cadre des modifications apportées aux fichiers à la fin de cette conversation.
```
{
    "rules": {
        ".read": true,
        ".write": true
    }
}
```
Ici, vous accordez à tous les utilisateurs un accès en lecture et en écriture à votre base de données. En dehors de cet atelier de programmation, vous devez toujours sécuriser vos bases de données. Pour en savoir plus sur ce sujet, consultez notre documentation.
Passer au code Dans le terminal (Shift+Ctrl+C), initialisez Firebase Realtime Database.
```
firebase init database
```
Suivez les instructions à l'écran et conservez les options par défaut.Déployez ensuite les règles de sécurité pour votre instance de base de données.
```
firebase deploy --only database
```
Passez à Prototyper. Demandez à l'agent d'utiliser votre instance de base de données par défaut pour les entrées utilisateur.
```
Use my default Realtime Database instance for user entries.
```
L'agent devrait mettre à jour le reste du code source pour connecter votre application à votre instance de base de données.

Objectif 3 : Testez-le

Créez quelques entrées pour le sélecteur, puis regardez-les apparaître sur la page Firebase Realtime Database de la console Firebase.

Firebase Realtime Database dans la console Firebase

5. Conclusion

Félicitations ! Vous avez créé une application Web full stack à l'aide de l'agent de prototypage d'applications avec Firebase MCP. N'hésitez pas à essayer d'autres outils proposés par le serveur MCP Firebase et à étendre les fonctionnalités de votre application.