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

Simplifiez la configuration de Firebase pour les applications Web à l'aide d'outils de développement basés sur l'IA tels que Antigravity, Claude Code, Codex et Cursor. En utilisant les compétences agentiques Firebase avec la Firebase CLI 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 en direct.

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 agentiques Firebase ?

Les agents de codage IA ont souvent du mal à gérer des configurations de projet spécifiques ou des 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 agentiques Firebase : fournissent à l'agent de codage une expertise et des workflows spécifiques au domaine. En tant que couche d'instructions, les compétences guident l'agent sur les bonnes pratiques à suivre pour travailler avec Firebase, y compris pour écrire du code. Les compétences apprennent également à l'agent quand et comment utiliser la Firebase CLI et le serveur MCP Firebase.
  • Outils d'exécution d'agent:
    • Firebase CLI (outils de ligne de commande): fournit des outils pour le cycle de vie du projet et les tâches d'environnement. L'agent peut exécuter des commandes CLI dans un environnement de terminal pour configurer des services dans un projet Firebase, déployer des sites complets ou des ressources 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 sur les données. Grâce à des appels d'outils structurés, l'agent peut interroger et mettre à jour de manière programmatique Cloud Firestore des documents, gérer Firebase Authentication les utilisateurs, valider Security Rules, extraire des journaux ou de la documentation en direct directement dans le contexte, et plus encore.

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 Firebase Authentication, déployer de nouvelles Firebase Security Rules, et travailler directement avec vos données Cloud Firestore.
  • Rester à jour : utilisez des prompts officiels 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 fournir une aide plus pertinente et précise.
  • Réduire les coûts liés aux jetons : les compétences agentiques ne chargent la documentation détaillée que lorsqu’une tâche spécifique l’exige, ce qui minimise la surcharge de la session.

Services Firebase applicables

Ce guide explique principalement comment les compétences agentiques, la Firebase CLI et le serveur MCP Firebase fonctionnent ensemble pour vous aider à configurer rapidement les services et fonctionnalités suivants :

  • Cloud Firestore : provisionnez une base de données NoSQL.
  • Firebase Authentication : configurez une connexion utilisateur sécurisée.
  • Firebase Security Rules : générez et affinez Security Rules pour votre application.
  • Firebase Hosting : configurez votre projet pour le déploiement d'une application Web statique.

Pour obtenir la liste complète des éléments disponibles, consultez la liste complète des compétences agentiques Firebase.

Workflow général

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

Étape 1 : Installez les compétences agentiques Firebase

Dans la plupart des cas, vous pouvez installer les compétences agentiques Firebase dans l'éditeur de votre choix avec un seul prompt :

Antigravity

  • Option 1 : Accès au niveau mondial

    Les compétences agentiques Firebase sont incluses dans le Firebase plug-in de la Antigravity place de marché (et en tant que pack 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 Customizations (Personnalisations), sélectionnez l'onglet Marketplace (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 /plugin et installez Firebase depuis l'onglet Discover (Découvrir)). Les plug-ins installés dans Antigravity sont également synchronisés automatiquement avec Antigravity CLI.
    • Lors de l'intégration : cochez la case de 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@firebase
    
  • Option 2 : Application Codex

    1. Effectuez les tâches suivantes une seule fois :

      1. Inscrivez-vous via le terminal :

        codex plugin marketplace add firebase/agent-skills
        
      2. Redémarrez complètement l'application Codex.

      3. Ouvrez Plugins.

      4. Sélectionnez la place de marché/source Firebase.

      5. Ouvrez Firebase et cliquez sur + Install (+ Installer).

    2. Démarrez une nouvelle tâche.

    3. Saisissez @Firebase pour sélectionner le plug-in ou demandez à Codex d'effectuer une tâche Firebase.

Cursor

  • Option 1 : Installez le plug-in directement depuis la place de marché Cursor.

  • 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 : Connectez-vous au serveur MCP Firebase

Bien que de nombreuses compétences agentiques Firebase utilisent la Firebase CLI 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 approfondis.

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 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" > MCP Servers (Serveurs MCP).
  2. Sélectionnez Firebase > Install (Installer).

Votre fichier mcp_config.json est alors automatiquement mis à jour. Vous pouvez l'afficher en cliquant sur Manage MCP Servers (Gérer les serveurs MCP) en haut du volet "MCP Store" > View raw config (Afficher la configuration brute), avec le contenu suivant :

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

Claude

Claude Code

  • Option 1 : Installation via un plug-in (recommandée)

    Le moyen le plus simple de configurer le serveur MCP Firebase 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 : Configuration manuelle du serveur MCP

    Vous pouvez également configurer manuellement le serveur MCP Firebase :

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

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

      claude mcp list

      Le résultat devrait être le suivant :

      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 de la place de marché (recommandée)

Installez le plug-in Firebase depuis la place de marché Cursor. Le serveur MCP est alors automatiquement configuré et vous avez accès aux compétences agentiques 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 (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 "MCP Servers" (Serveurs MCP) en haut du volet Cline, puis sur le bouton Configure MCP Servers (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 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 : Initialisez les services Firebase

Une fois les compétences et les outils agentiques configurés, vous pouvez utiliser le langage naturel pour demander à votre agent de codage IA de configurer Cloud Firestore, Firebase Authentication, et Firebase Hosting.

  1. 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.
  2. Examinez toutes les informations et suivez les étapes guidées que votre agent peut fournir, par exemple :

    1. Plans : votre agent propose une stratégie basée sur votre codebase existante.
    2. Connexions : votre agent associe votre code local à un projet Firebase existant ou vous aide à créer un projet Firebase.
    3. Initialisation des 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écution : votre agent vous guide dans les étapes de configuration ou de déploiement supplémentaires.

Conseils généraux pour le prompting d'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 à plusieurs facettes comme Firebase, considérez 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, les prompts en langage naturel clairs et spécifiques donnent les meilleurs résultats. Évitez les requêtes vagues.

  • Vague: "Corrigez l'erreur de base de données."
  • Spécifique : "Je reçois une erreur 'permission denied' (autorisation refusée) lorsque j'essaie d'écrire dans la collection 'users' (utilisateurs) de Cloud Firestore. Vérifiez mon fichier firestore.rules et suggérez une correction qui permette aux utilisateurs authentifiés d'écrire dans leur propre document."

Itérer et affiner

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 des messages d'erreur : collez les erreurs de terminal ou les journaux de la console dans le chat.
  • Demandez des ajustements : "Ce code utilise l'ancien SDK v8. Réécrivez-le à l'aide du SDK modulaire Firebase v9."
  • Demandez des explications : "Expliquez 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).

  • Vérifiez le code : lisez toujours le code généré, en particulier Firebase Security Rules et les fichiers 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.

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

Étapes suivantes