Simplifiez la configuration de Firebase pour les applications Web en utilisant des outils de développement optimisés par l'IA tels que Antigravity, Claude Code, Codex et Cursor. En utilisant les compétences d'agent Firebase avec la CLI Firebase et le serveur MCP Firebase, vous pouvez transformer votre agent de codage IA en un expert Firebase spécialisé capable d'écrire du code, de configurer Firebase Security Rules et de gérer des ressources actives.
Ce guide explique comment utiliser un agent de codage IA pour configurer Cloud Firestore, Firebase Authentication et Firebase Hosting pour une application Web. Revenez bientôt pour obtenir des informations sur les applications iOS, Android et Flutter.
Pourquoi utiliser les compétences et les outils d'agent Firebase ?
Les agents de codage IA ont souvent du mal à gérer les configurations de projet spécifiques ou les informations obsolètes. Ce kit d'outils comble cette lacune en combinant des instructions spécialisées (compétences agentiques) avec deux types complémentaires d'outils d'exécution d'agent (CLI et serveur MCP) :
- Compétences d'agent Firebase : fournissent à l'agent de codage une expertise du domaine et des workflows. En tant que couche d'instructions, les compétences guident l'agent sur les bonnes pratiques d'utilisation de Firebase, y compris l'écriture de code. Les compétences indiquent également à l'agent quand et comment utiliser la CLI Firebase et le serveur MCP Firebase.
- Outils d'exécution de l'agent :
- Firebase CLI (outils de ligne de commande) : fournit des outils pour les tâches liées au cycle de vie et à l'environnement du projet. L'agent peut exécuter des commandes de la CLI dans un environnement de terminal pour configurer des services dans un projet Firebase, déployer des sites complets ou des ressources de backend, démarrer des émulateurs locaux, etc.
- Serveur MCP Firebase (outils et ressources programmatiques) : fournit des outils pour l'inspection en temps réel et les opérations de données. Grâce à des appels d'outils structurés, l'agent peut interroger et mettre à jour des documents Cloud Firestore, gérer des utilisateurs Firebase Authentication, valider des Security Rules, extraire des journaux ou de la documentation en direct directement dans le contexte, et plus encore, de manière programmatique.
L'utilisation des compétences d'agent Firebase avec la CLI Firebase et le serveur MCP Firebase offre à votre agent de codage IA des capacités supplémentaires :
- Passez à l'action : ne vous contentez pas d'écrire du code. Votre agent peut initialiser des services, gérer les utilisateurs Firebase Authentication, déployer de nouveaux Firebase Security Rules et travailler directement avec vos données Cloud Firestore.
- Restez à jour : utilisez des prompts officiels et adaptés à la version pour guider votre agent dans les tâches de configuration.
- Améliorer la précision : accédez à l'environnement et aux schémas de votre projet pour fournir une aide plus pertinente et précise.
- Réduire les coûts liés aux jetons : les compétences de l'agent ne chargent la documentation détaillée que lorsqu'une tâche spécifique l'exige, ce qui minimise les coûts de session.
Services Firebase applicables
Ce guide se concentre principalement sur la façon dont les compétences d'agent, la CLI Firebase et le serveur MCP Firebase fonctionnent ensemble pour vous aider à configurer rapidement ces services et fonctionnalités :
- Cloud Firestore : provisionnez une base de données NoSQL.
- Firebase Authentication : configurez la connexion sécurisée des utilisateurs.
- Firebase Security Rules : générez et affinez des Security Rules pour votre application.
- Firebase Hosting : configurez votre projet pour le déploiement d'applications Web statiques.
Pour obtenir la liste complète des compétences disponibles, parcourez la liste complète des compétences d'agent Firebase.
Workflow général
Les étapes suivantes décrivent un workflow généralisé pour utiliser les compétences d'agent Firebase afin de configurer et d'utiliser les services Firebase dans une application Web. En arrière-plan, les compétences d'agent utilisent la CLI Firebase et le serveur MCP Firebase pour effectuer ces tâches.
Étape 1 : Installer les compétences d'agent Firebase
Dans la plupart des cas, vous pouvez installer les compétences d'agent Firebase dans votre éditeur préféré à l'aide d'un seul prompt :
Antigravity
Option 1 : Accès au niveau global
Les compétences d'agent Firebase sont incluses dans le plug-in Firebase sur la place de marché Antigravity (et en tant que bundle d'intégration Build with Google). Installez le plug-in à l'aide de l'une des options suivantes :
- Depuis la place de marché Antigravity : cliquez sur Personnalisations, sélectionnez l'onglet Place de marché, puis cliquez sur + sur la fiche du plug-in Firebase.
- Dans Antigravity CLI : exécutez
/plugin install firebase@agent-marketplace(ou exécutez/pluginet installez Firebase depuis l'onglet Discover). Les plug-ins installés dans Antigravity sont également synchronisés automatiquement avec Antigravity CLI. - Lors de l'intégration : cochez la case correspondant à la pile Firebase.
Option 2 : Accès au niveau du projet
Exécutez la commande suivante dans le répertoire de votre projet :
npx skills add firebase/agent-skills --agent=antigravity
Claude Code
Exécutez les commandes suivantes dans votre terminal :
claude plugin marketplace add firebase/agent-skills
claude plugin install firebase@firebase
Codex
Option 1 : Terminal Codex
Exécutez les commandes suivantes dans votre terminal :
codex plugin marketplace add firebase/agent-skills codex plugin add firebase@firebaseOption 2 : Application Codex
Effectuez les tâches suivantes une fois :
Enregistrez-vous via le terminal :
codex plugin marketplace add firebase/agent-skillsRedémarrez complètement l'application Codex.
Ouvrez Plugins (Plug-ins).
Sélectionnez la place de marché/source Firebase.
Ouvrez Firebase, puis cliquez sur + Installer.
Démarrez une nouvelle tâche.
Saisissez
@Firebasepour sélectionner le plug-in ou demandez à Codex d'effectuer une tâche Firebase.
Cursor
Option 1 : Installez le plug-in directement depuis Cursor Marketplace.
Option 2 : exécutez la commande suivante dans votre terminal :
npx skills add firebase/agent-skills --agent=cursor
Autres agents
Exécutez la commande suivante dans votre terminal :
npx skills add firebase/agent-skills
Étape 2 : Se connecter au serveur MCP Firebase
Bien que de nombreuses compétences d'agent Firebase utilisent la CLI Firebase pour les tâches, il est également recommandé de connecter votre agent de codage IA au serveur MCP Firebase. Cette connexion améliore la capacité de votre agent à interagir avec votre environnement Firebase, en offrant une intégration et un accès plus poussés.
Méthode assistée par l'IA
Dans la plupart des cas, vous pouvez demander à votre agent de codage IA de configurer le serveur MCP Firebase. Toutefois, si vous rencontrez des difficultés ou si vous ne voyez pas le serveur MCP Firebase dans la liste, passez à la méthode manuelle.
Méthode manuelle
Antigravity
Pour configurer Antigravity afin d'utiliser le serveur MCP Firebase :
- Dans Antigravity, cliquez sur le menu dans le volet "Agent" > Serveurs MCP.
- Sélectionnez Firebase > Installer.
Votre fichier mcp_config.json est alors automatiquement mis à jour. Vous pouvez le consulter en cliquant sur Gérer les serveurs MCP en haut du volet "Store MCP" > Afficher la configuration brute. Il contient les éléments suivants :
{
"mcpServers": {
"firebase-mcp-server": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
}
Claude
Claude Code
Option 1 : Installer via un plug-in (recommandé)
Le moyen le plus simple de configurer le serveur MCP Firebase dans Claude Code consiste à installer le plug-in Firebase officiel :
Ajoutez la place de marché Firebase pour les plug-ins Claude :
claude plugin marketplace add firebase/firebase-toolsInstallez le plug-in Claude pour Firebase :
claude plugin install firebase@firebaseVérifiez l'installation :
claude plugin marketplace list
Option 2 : Configurer manuellement le serveur MCP
Vous pouvez également configurer manuellement le serveur MCP Firebase :
Exécutez la commande suivante dans le dossier de votre application :
claude mcp add firebase npx -- -y firebase-tools@latest mcpVérifiez l'installation :
claude mcp listVoici ce qui devrait s'afficher :
firebase: npx -y firebase-tools@latest mcp - ✓ Connected
Claude Desktop
Pour configurer Claude Desktop afin qu'il utilise le serveur MCP Firebase, modifiez le fichier claude_desktop_config.json. Vous pouvez ouvrir ou créer ce fichier à partir du menu Claude > Settings (Claude > Paramètres). Sélectionnez l'onglet Developer (Développeur), puis cliquez sur Edit Config (Modifier la configuration).
{
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
}
Cursor
Option 1 : Plug-in Marketplace (recommandé)
Installez le plug-in Firebase depuis Cursor Marketplace. Le serveur MCP est alors automatiquement configuré et vous avez accès aux compétences d'agent Firebase.
Option 2 : Configuration du MCP en un clic
Si vous souhaitez uniquement ajouter le serveur MCP à votre configuration globale, cliquez sur le bouton suivant :
Option 3 : Configuration manuelle
Si vous préférez configurer le serveur pour un projet spécifique ou si vous souhaitez modifier vos paramètres manuellement, mettez à jour votre fichier mcp.json :
- Pour un projet spécifique, modifiez
.cursor/mcp.json. - Pour tous les projets (global), modifiez
~/.cursor/mcp.json.
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
Cline
Pour configurer Cline afin qu'il utilise le serveur MCP Firebase, modifiez le fichier cline_mcp_settings.json. Vous pouvez ouvrir ou créer ce fichier en cliquant sur l'icône "Serveurs MCP" en haut du volet Cline, puis sur le bouton Configurer les serveurs MCP.
{
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"],
"disabled": false
}
}
}
VS Code Copilot
Pour configurer un seul projet, modifiez le fichier .vscode/mcp.json dans votre espace de travail :
"servers": {
"firebase": {
"type": "stdio",
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
Pour que le serveur soit disponible dans chaque projet que vous ouvrez, modifiez vos paramètres utilisateur, par exemple :
"mcp": {
"servers": {
"firebase": {
"type": "stdio",
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
}
Planche à voile
Pour configurer l'éditeur Windsurf, modifiez le fichier ~/.codeium/windsurf/mcp_config.json :
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
Étape 3 : Initialisez les services Firebase
Une fois les compétences et les outils de l'agent configurés, vous pouvez utiliser le langage naturel pour que votre agent de codage IA configure Cloud Firestore, Firebase Authentication et Firebase Hosting.
Demandez à votre agent de configurer un service. Par exemple, vous pouvez utiliser des prompts comme ceux-ci :
- Configurez Cloud Firestore comme base de données pour cette application.
- Créez une page de connexion à l'aide de Authentication et mettez à jour Security Rules pour vous assurer que seuls les utilisateurs autorisés peuvent lire et écrire leurs propres données.
- Configurez Firebase Hosting et déployez l'application en production.
Examinez les informations et suivez les procédures guidées que votre agent peut fournir, par exemple :
- Plans : votre agent propose une stratégie basée sur votre codebase existant.
- Connexion : votre agent associe votre code local à un projet Firebase existant ou vous aide à créer un projet Firebase.
- Initialise les ressources : votre agent ajoute les bibliothèques et la configuration Firebase requises à votre codebase.
- Mise à jour des fichiers : votre agent crée et met à jour tous les fichiers nécessaires, tels que
firestore.rules(pour définir qui peut lire, écrire ou interroger des données dans votre base de données) oufirebase.json(pour indiquer à la CLI Firebase quels services déployer et comment les configurer). - Exécute : votre agent vous guide tout au long des étapes de configuration ou de déploiement supplémentaires.
Conseils généraux pour prompter un agent de codage IA
Pour tirer le meilleur parti de votre agent de codage IA, en particulier lorsque vous travaillez avec des intégrations multifacettes comme Firebase, traitez l'interaction comme une collaboration plutôt que comme une commande unique.
Être précis et fournir du contexte
Bien que le serveur MCP Firebase fournisse à l'agent un contexte important sur votre projet, des prompts en langage naturel clairs et spécifiques donnent les meilleurs résultats. Évitez les requêtes vagues.
- Vague : "Corrige l'erreur de base de données."
- Spécifique : "Je reçois une erreur 'autorisation refusée' lorsque j'essaie d'écrire dans la collection 'users' dans Cloud Firestore. Examine mon
firestore.ruleset suggère un correctif qui permet aux utilisateurs authentifiés d'écrire dans leur propre document."
Itérez et affinez.
Les agents de codage IA génèrent rarement du code parfait du premier coup pour les tâches complexes. Si une réponse n'est pas tout à fait correcte, poursuivez la conversation :
- Fournissez les messages d'erreur : collez les erreurs de terminal ou les journaux de la console dans le chat.
- Demander des ajustements : "Ce code utilise l'ancien SDK v8. Réécris-le à l'aide du SDK modulaire Firebase v9."
- Demander des explications : "Expliquez comment ces Firebase Security Rules protègent les données utilisateur."
Vérifier avant d'exécuter
Les agents de codage IA sont puissants, mais ils peuvent faire des erreurs ou "halluciner" (inventer des fonctions ou des services mal nommés).
- Examinez le code : lisez toujours le code généré, en particulier les fichiers Firebase Security Rules et de configuration (comme
firebase.json), avant de le déployer en production. - Tester localement : dans la mesure du possible, demandez à l'agent de vous aider à tester les modifications localement avant de les déployer.
Utiliser la connexion MCP
Étant donné que le serveur MCP Firebase offre à votre agent une visibilité directe sur la structure de votre projet, vous pouvez référencer des fichiers spécifiques pour obtenir des conseils d'implémentation personnalisés.
- Exemple : "Regarde mon fichier
src/web/index.htmlet montre-moi où ajouter le script d'initialisation Firebase standard."
Étapes suivantes
- Parcourir la liste complète de toutes les compétences d'agent Firebase disponibles
- Parcourez la liste complète de tous les prompts, outils et ressources disponibles fournis par le serveur MCP Firebase.
- En savoir plus sur les outils fournis par la CLI Firebase