Intégrer les services Firebase à l'aide de l'assistance IA

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 en parallèle avec la CLI Firebase et le serveur MCP Firebase, vous pouvez transformer votre agent de programmation IA en expert Firebase spécialisé capable d'écrire du code, de configurer Firebase Security Rules et de gérer les ressources en direct.

Ce guide explique comment utiliser un agent de codage IA pour configurer Cloud Firestore, 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 agentiques Firebase ?

Les modèles d'IA généraux ont souvent du mal à gérer des configurations de projet spécifiques ou des informations obsolètes. Cette boîte à outils comble cette lacune :

  • Compétences agentiques Firebase : les compétences fournissent à l'agent de codage une expertise du domaine. Ils fournissent une documentation à jour et des workflows optimaux pour que l'agent connaisse la manière correcte et recommandée par Firebase de structurer votre architecture.
  • Serveur Firebase MCP : le serveur MCP fournit à l'agent de codage le contexte et l'accès. Il établit un protocole standard permettant à l'agent d'inspecter de manière programmatique les ressources, les fichiers locaux et les configurations de votre projet actif.
  • Firebase CLI : l'interface de ligne de commande donne à l'agent de codage un pouvoir d'action. Il s'agit de l'outil d'exécution que l'agent utilise pour effectuer des tâches complexes telles que l'initialisation de bases de données, la gestion des configurations d'authentification des utilisateurs et le déploiement de code en votre nom.

L'utilisation des compétences agentiques 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 Authentication, déployer de nouveaux Firebase Security Rules et travailler directement avec vos données Cloud Firestore.
  • Restez à jour : utilisez des requêtes officielles et spécifiques à 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 obtenir une aide plus pertinente et précise.
  • Réduction des coûts liés aux jetons : les compétences de l'agent chargent la documentation détaillée uniquement lorsqu'une tâche spécifique l'exige, ce qui minimise les frais généraux de la session.

Avec quels services Firebase les compétences et outils de l'agent peuvent-ils aider ?

Ce guide explique principalement comment les compétences de l'agent, l'interface de ligne de commande Firebase et le serveur Firebase MCP fonctionnent ensemble pour vous aider à configurer rapidement les services et fonctionnalités suivants :

  • Cloud Firestore : provisionner une base de données NoSQL.
  • Authentication : configurez la connexion sécurisée des utilisateurs.
  • Firebase Security Rules : générez et affinez 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 fonctionnalités disponibles, consultez la liste complète des compétences de l'agent Firebase.

Workflow général

Les étapes suivantes décrivent un workflow généralisé pour utiliser les compétences de l'agent Firebase afin de configurer et d'utiliser les services Firebase dans une application Web. En arrière-plan, les compétences de l'agent utilisent la CLI Firebase et le serveur MCP Firebase pour effectuer ces tâches.

Étape 1 : Installez les compétences de l'agent Firebase

Dans la plupart des cas, vous pouvez installer les compétences de l'agent Firebase dans votre éditeur préféré à l'aide d'une seule invite :

Antigravity

Les compétences agentiques Firebase sont incluses dans l'un des packs d'intégration Créer avec Google pour Antigravity. Vous pouvez activer ce bundle pour un accès au niveau mondial à deux moments :

  • Lors de l'intégration : cochez la case de la pile Firebase.
  • Dans les paramètres : accédez à Paramètres > Personnalisations. Sous Build with Google Plugins (Créer avec les plug-ins Google), cliquez sur Customize (Personnaliser), puis sur Download (Télécharger) pour l'intégration Firebase.

Si vous préférez un 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

claude plugin marketplace add firebase/agent-skills
claude plugin install firebase@firebase

Codex

npx skills add firebase/agent-skills --agent=codex

Cursor

Vous pouvez installer les compétences de l'agent Firebase directement depuis la place de marché Cursor ou en exécutant la commande suivante dans votre terminal :

npx skills add firebase/agent-skills --agent=cursor

Autres agents

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 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 approfondis.

Méthode assistée par l'IA

Dans la plupart des cas, vous pouvez demander à votre agent de programmation IA de configurer le serveur MCP Firebase. Toutefois, si vous rencontrez des difficultés ou si le serveur MCP Firebase ne s'affiche pas, passez à la méthode manuelle.

Méthode manuelle

Antigravity

Pour configurer Antigravity afin qu'il utilise le serveur MCP Firebase :

  1. Dans Antigravity, cliquez sur le menu  dans le volet "Agent" > Serveurs MCP.
  2. Sélectionnez Firebase > Install (Installer).

Votre fichier mcp_config.json est alors automatiquement mis à jour. Pour l'afficher, cliquez sur Gérer les serveurs MCP en haut du volet "MCP Store" > Afficher la configuration brute. Il contient le contenu suivant :

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

Firebase Studio

Pour configurer Firebase Studio afin qu'il utilise le serveur Firebase MCP, modifiez ou créez le fichier de configuration : .idx/mcp.json.

Si le fichier n'existe pas encore, créez-le en effectuant un clic droit sur le répertoire parent, puis en sélectionnant Nouveau fichier. Ajoutez le contenu suivant au fichier :

{
  "mcpServers": {
    "firebase": {
      "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 Firebase MCP dans Claude Code consiste à installer le plug-in Firebase officiel :

    1. Ajoutez la place de marché Firebase pour les plug-ins Claude :

      claude plugin marketplace add firebase/firebase-tools
    2. Installez le plug-in Claude pour Firebase :

      claude plugin install firebase@firebase
    3. Vérifiez l'installation :

      claude plugin marketplace list
  • Option 2 : Configurer manuellement le serveur MCP

    Vous pouvez également configurer manuellement le serveur MCP Firebase :

    1. Exécutez la commande suivante dans le dossier de votre application :

      claude mcp add firebase npx -- -y firebase-tools@latest mcp
    2. Vérifiez l'installation :

      claude mcp list

      Voici 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 > Paramètres. Sélectionnez l'onglet Développeur, puis cliquez sur Modifier la configuration.

{
  "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
    }
  }
}

Cursor

Option 1 : Plug-in Marketplace (recommandé)

Installez le plug-in Firebase depuis Cursor Marketplace. Cette option configure automatiquement le serveur MCP et donne accès aux compétences de l'agent Firebase.

Option 2 : Configuration MCP en un clic

Si vous ne souhaitez ajouter le serveur MCP qu'à votre configuration globale, cliquez sur le bouton suivant :

Installer le serveur MCP

Option 3 : Configuration manuelle

Si vous préférez configurer le serveur pour un projet spécifique ou modifier vos paramètres manuellement, mettez à jour votre fichier mcp.json :

  • Pour un projet spécifique, modifiez .cursor/mcp.json
  • Pour tous les projets (au niveau mondial), modifiez ~/.cursor/mcp.json.
"mcpServers": {
  "firebase": {
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

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 rendre le serveur 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"]
    }
  }
}

Windsurf

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 : Initialiser les services Firebase

Maintenant que les compétences et les outils de l'agent sont configurés, vous pouvez utiliser le langage naturel pour que votre agent de codage IA configure Cloud Firestore, Authentication et Firebase Hosting.

  1. Demandez à votre agent de configurer un service. Par exemple, vous pouvez utiliser des requêtes comme celles-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.
  2. Examinez les informations et suivez les étapes guidées que votre agent peut vous fournir, par exemple :

    1. Plans : votre agent propose une stratégie basée sur votre codebase existant.
    2. Connects (Se connecter) : votre agent associe votre code local à un projet Firebase existant ou vous aide à créer un projet Firebase.
    3. Initialise les ressources : votre agent ajoute les bibliothèques et la configuration Firebase requises à votre codebase.
    4. 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) ou firebase.json (pour indiquer à la CLI Firebase les services à déployer et comment les configurer).
    5. Exécute : votre agent vous guide dans les étapes de configuration ou de déploiement supplémentaires.

Conseils généraux pour interroger un agent de codage IA

Pour exploiter tout le potentiel de votre agent de codage IA, en particulier lorsque vous travaillez avec des intégrations multifacettes comme Firebase, considérez l'interaction comme une collaboration plutôt que comme une commande ponctuelle.

Être précis et fournir du contexte

Bien que le serveur MCP Firebase fournisse à l'agent un contexte important sur votre projet, les requêtes en langage naturel claires et spécifiques donnent les meilleurs résultats. Évitez les demandes 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.rules et suggère une correction 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 un 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 en utilisant le SDK modulaire Firebase v9."
  • Demander des explications : "Explique comment ces Firebase Security Rules protègent les données utilisateur."

Vérifiez avant d'exécuter

Les agents de codage IA sont puissants, mais ils peuvent commettre 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.
  • Testez en local : dans la mesure du possible, demandez à l'agent de vous aider à tester les modifications en local avant de les mettre en ligne.

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 : "Examine mon fichier src/web/index.html et indique-moi où ajouter le script d'initialisation Firebase standard."

Étapes suivantes