Firebase-Dienste mit KI-Unterstützung einbinden

Mit KI-gestützten Entwicklungstools wie Antigravity, Claude Code, Codex und Cursor können Sie die Einrichtung von Firebase für Webanwendungen optimieren. Wenn Sie Firebase-Agenten-Skills zusammen mit der Firebase CLI und dem Firebase MCP-Server verwenden, können Sie Ihren KI-Coding-Agenten in einen spezialisierten Firebase-Experten verwandeln, der Code schreiben, Firebase Security Rules konfigurieren und Live-Ressourcen verwalten kann.

In diesem Leitfaden wird beschrieben, wie Sie einen KI-Coding-Agenten verwenden können, um Cloud Firestore, Firebase Authentication und Firebase Hosting für eine Webanwendung einzurichten. Informationen zu iOS-, Android- und Flutter-Apps folgen in Kürze.

Warum Firebase-Agenten-Skills und ‑Tools verwenden?

KI-Coding-Agenten haben oft Schwierigkeiten mit bestimmten Projektkonfigurationen oder veralteten Informationen. Dieses Toolkit schließt diese Lücke, indem es spezielle Anweisungen (Agenten-Skills) mit zwei komplementären Arten von Agenten-Ausführungstools (CLI und MCP-Server) kombiniert:

  • Firebase-Agenten-Skills: Stellen dem Coding-Agenten Domain-Expertise und Workflows zur Verfügung. Als Anweisungsebene leiten Skills den Agenten zu Best Practices für die Arbeit mit Firebase an, einschließlich des Schreibens von Code. Skills vermitteln dem Agenten auch, wann und wie die Firebase CLI und der Firebase MCP-Server verwendet werden.
  • Agenten-Ausführungstools:
    • Firebase CLI (Befehlszeilentools): Bietet Tools für Aufgaben im Zusammenhang mit dem Projektlebenszyklus und der Umgebung. Der Agent kann CLI-Befehle in einer Terminalumgebung ausführen, um Dienste in einem Firebase-Projekt einzurichten, vollständige Websites oder Backend-Ressourcen bereitzustellen, lokale Emulatoren zu starten und vieles mehr.
    • Firebase MCP-Server (programmatische Tools und Ressourcen): Bietet Tools für Echtzeitprüfung und Datenvorgänge. Über strukturierte Tool-Aufrufe kann der Agent Dokumente programmatisch abfragen und aktualisieren, Cloud Firestore Nutzer verwalten,Firebase Authentication Security Rules validieren, Live-Logs oder ‑Dokumentationen direkt in den Kontext einfügen und vieles mehr.

Wenn Sie Firebase-Agenten-Skills zusammen mit der Firebase CLI und dem Firebase MCP-Server verwenden, erhält Ihr KI-Coding-Agent zusätzliche Fähigkeiten:

  • Aktionen ausführen: Mehr als nur Code schreiben. Ihr Agent kann Dienste initialisieren, Firebase Authentication Nutzer verwalten, neue Firebase Security Rules bereitstellen und direkt mit Ihren Cloud Firestore Daten arbeiten.
  • Auf dem neuesten Stand bleiben: Verwenden Sie offizielle, versionsbezogene Prompts, um Ihren Agenten durch die Einrichtung zu führen.
  • Genauigkeit verbessern: Greifen Sie auf die Umgebung und Schemas Ihres Projekts zu, um relevantere und genauere Hilfe zu erhalten.
  • Tokenkosten senken: Agenten-Skills laden detaillierte Dokumentationen nur dann, wenn sie für eine bestimmte Aufgabe erforderlich sind. So wird der Sitzungsaufwand minimiert.

Anwendbare Firebase-Dienste

In diesem Leitfaden wird hauptsächlich beschrieben, wie Agenten-Skills, die Firebase CLI und der Firebase MCP-Server zusammenarbeiten, um Ihnen bei der schnellen Einrichtung dieser Dienste und Funktionen zu helfen:

  • Cloud Firestore: Eine NoSQL-Datenbank bereitstellen.
  • Firebase Authentication: Sichere Nutzeranmeldung einrichten.
  • Firebase Security Rules: Security Rules für Ihre App generieren und verfeinern.
  • Firebase Hosting: Projekt für die Bereitstellung statischer Webanwendungen einrichten.

Eine vollständige Liste der verfügbaren Optionen finden Sie in der vollständigen Liste der Firebase-Agenten-Skills.

Allgemeiner Workflow

Die folgenden Schritte beschreiben einen allgemeinen Workflow für die Verwendung von Firebase Agenten-Skills zum Einrichten und Verwenden von Firebase-Diensten in einer Webanwendung. Im Hintergrund verwenden Agenten-Skills die Firebase CLI und den Firebase MCP-Server, um diese Aufgaben auszuführen.

Schritt 1: Firebase-Agenten-Skills installieren

In den meisten Fällen können Sie Firebase-Agenten-Skills mit einem einzigen Prompt in Ihrem bevorzugten Editor installieren:

Antigravity

  • Option 1: Zugriff auf globaler Ebene

    Firebase-Agenten-Skills sind im Firebase -Plug-in auf dem Antigravity Marketplace enthalten (und als ein Build with Google -Integrationspaket). Installieren Sie das Plug-in mit einer der folgenden Optionen:

    • Über den Antigravity Marketplace: Klicken Sie auf Anpassungen, wählen Sie den Tab Marketplace aus und klicken Sie dann auf + auf der Karte des Firebase Plug-ins.
    • In Antigravity CLI: Führen Sie /plugin install firebase@agent-marketplace aus oder führen Sie /plugin aus und installieren Sie Firebase über den Tab Entdecken. In Antigravity installierte Plug-ins werden auch automatisch mit Antigravity CLI synchronisiert.
    • Während des Onboardings: Klicken Sie das Kästchen für den Firebase-Stack an.
  • Option 2: Zugriff auf Projektebene

    Führen Sie den folgenden Befehl im Verzeichnis Ihres Projekts aus:

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

Claude Code

Führen Sie im Terminal die folgenden Befehle aus:

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

Codex

  • Option 1: Codex-Terminal

    Führen Sie im Terminal die folgenden Befehle aus:

    codex plugin marketplace add firebase/agent-skills
    codex plugin add firebase@firebase
    
  • Option 2: Codex-App

    1. Führen Sie die folgenden Aufgaben einmal aus:

      1. Über das Terminal registrieren:

        codex plugin marketplace add firebase/agent-skills
        
      2. Die Codex-App vollständig neu starten.

      3. Plug-ins öffnen.

      4. Den Firebase Marketplace/die Firebase-Quelle auswählen.

      5. Firebase öffnen und auf + Installieren klicken.

    2. Eine neue Aufgabe starten.

    3. @Firebase eingeben, um das Plug-in auszuwählen, oder Codex bitten, eine Firebase-Aufgabe auszuführen.

Cursor

  • Option 1: Installieren Sie das Plug-in direkt über den Cursor Marketplace.

  • Option 2:Führen Sie im Terminal den folgenden Befehl aus:

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

Andere KI-Agenten

Führen Sie im Terminal den folgenden Befehl aus:

npx skills add firebase/agent-skills

Schritt 2: Verbindung zum Firebase MCP-Server herstellen

Viele Firebase-Agenten-Skills verwenden die Firebase CLI für Aufgaben, Es wird jedoch auch empfohlen, Ihren KI-Coding-Agenten mit dem Firebase MCP-Server zu verbinden. Diese Verbindung verbessert die Fähigkeit Ihres Agenten, mit Ihrer Firebase-Umgebung zu interagieren, und bietet eine tiefere Integration und einen besseren Zugriff.

KI-gestützte Methode

In den meisten Fällen können Sie Ihren KI-Coding-Agenten bitten, den Firebase MCP-Server einzurichten. Wenn es jedoch Probleme gibt oder der Firebase MCP-Server nicht aufgeführt ist, wechseln Sie zur manuellen Methode.

Manuelle Methode

Antigravity

So konfigurieren Sie Antigravity für die Verwendung des Firebase MCP-Servers:

  1. Klicken Sie in Antigravity im Bereich „Agent“ auf das Menü > MCP-Server.
  2. Wählen Sie Firebase > Installieren aus.

Dadurch wird die Datei mcp_config.json automatisch mit dem folgenden Inhalt aktualisiert. Sie können sie aufrufen, indem Sie oben im Bereich „MCP Store“ auf MCP-Server verwalten > Rohkonfiguration ansehen klicken:

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

Claude

Claude Code

  • Option 1: Über ein Plug-in installieren (empfohlen)

    Die einfachste Möglichkeit, den Firebase MCP-Server in Claude Code einzurichten, ist die Installation des offiziellen Firebase-Plug-ins:

    1. Fügen Sie den Firebase Marketplace für Claude-Plug-ins hinzu:

      claude plugin marketplace add firebase/firebase-tools
    2. Installieren Sie das Claude-Plug-in für Firebase:

      claude plugin install firebase@firebase
    3. Prüfen Sie die Installation:

      claude plugin marketplace list
  • Option 2: MCP-Server manuell konfigurieren

    Alternativ können Sie den Firebase MCP-Server manuell konfigurieren:

    1. Führen Sie den folgenden Befehl im Ordner Ihrer App aus:

      claude mcp add firebase npx -- -y firebase-tools@latest mcp
    2. Prüfen Sie die Installation:

      claude mcp list

      Es sollte Folgendes angezeigt werden:

      firebase: npx -y firebase-tools@latest mcp - ✓ Connected
      

Claude für den Computer

Wenn Sie Claude für den Computer für die Verwendung des Firebase MCP-Servers konfigurieren möchten, bearbeiten Sie die Datei claude_desktop_config.json. Sie können diese Datei über das Menü Claude > Einstellungen öffnen oder erstellen. Wählen Sie den Tab Entwickler aus und klicken Sie dann auf Konfiguration bearbeiten.

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

Cursor

Option 1: Marketplace-Plug-in (empfohlen)

Installieren Sie das Firebase-Plug-in über den Cursor Marketplace. Dadurch wird der MCP-Server automatisch konfiguriert und Sie erhalten Zugriff auf Firebase-Agenten-Skills.

Option 2: MCP-Einrichtung mit einem Klick

Wenn Sie den MCP-Server nur Ihrer globalen Konfiguration hinzufügen möchten, klicken Sie auf die folgende Schaltfläche:

MCP-Server installieren

Option 3: Manuelle Konfiguration

Wenn Sie den Server für ein bestimmtes Projekt konfigurieren oder Ihre Einstellungen manuell bearbeiten möchten, aktualisieren Sie die Datei mcp.json:

  • Bearbeiten Sie für ein bestimmtes Projekt .cursor/mcp.json.
  • Bearbeiten Sie für alle Projekte (global) ~/.cursor/mcp.json.
"mcpServers": {
  "firebase": {
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

Cline

Wenn Sie Cline für die Verwendung des Firebase MCP-Servers konfigurieren möchten, bearbeiten Sie die Datei cline_mcp_settings.json. Sie können diese Datei öffnen oder erstellen, indem Sie oben im Bereich „Cline“ auf das Symbol „MCP-Server“ klicken und dann auf die Schaltfläche MCP-Server konfigurieren.

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

VS Code Copilot

Wenn Sie ein einzelnes Projekt konfigurieren möchten, bearbeiten Sie die Datei .vscode/mcp.json in Ihrem Arbeitsbereich:

"servers": {
  "firebase": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

Wenn der Server in jedem Projekt verfügbar sein soll, das Sie öffnen, bearbeiten Sie Ihre Nutzereinstellungen, z. B.:

"mcp": {
  "servers": {
    "firebase": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

Windsurf

Wenn Sie den Windsurf-Editor konfigurieren möchten, bearbeiten Sie die Datei ~/.codeium/windsurf/mcp_config.json:

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

Schritt 3: Firebase-Dienste initialisieren

Nachdem Sie die Agenten-Skills und ‑Tools eingerichtet haben, können Sie mit natürlicher Sprache Ihren KI-Coding-Agenten bitten, Cloud Firestore, Firebase Authentication und Firebase Hosting einzurichten.

  1. Bitten Sie Ihren Agenten, einen Dienst einzurichten. Sie können dazu Prompts wie die folgenden verwenden:

    • Richte Cloud Firestore als Datenbank für diese App ein.
    • Erstelle eine Anmeldeseite mit Authentication und aktualisiere die Security Rules, um sicherzustellen, dass nur autorisierte Nutzer ihre eigenen Daten lesen und schreiben können.
    • Richte Firebase Hosting ein und stelle die App für die Produktion bereit.
  2. Prüfen Sie alle Informationen und folgen Sie allen Schritten, die Ihr Agent möglicherweise bereitstellt, z. B.:

    1. Pläne: Ihr Agent schlägt eine Strategie basierend auf Ihrer vorhandenen Codebasis vor.
    2. Verbindungen: Ihr Agent verknüpft Ihren lokalen Code mit einem vorhandenen Firebase Projekt oder hilft Ihnen, ein neues Firebase-Projekt zu erstellen.
    3. Ressourcen initialisieren: Ihr Agent fügt Ihrer Codebasis die erforderlichen Firebase Bibliotheken und ‑Konfiguration hinzu.
    4. Dateien aktualisieren: Ihr Agent erstellt und aktualisiert alle erforderlichen Dateien, z. B. firestore.rules (um zu definieren, wer Daten in Ihrer Datenbank lesen, schreiben oder abfragen kann) oder firebase.json (um der Firebase CLI mitzuteilen, welche Dienste bereitgestellt und wie sie konfiguriert werden sollen).
    5. Ausführen: Ihr Agent führt Sie durch zusätzliche Konfigurations- oder Bereitstellungsschritte.

Allgemeine Tipps für Prompts an einen KI-Coding-Agenten

Um das Beste aus Ihrem KI-Coding-Agenten herauszuholen, insbesondere bei der Arbeit mit komplexen Integrationen wie Firebase, sollten Sie die Interaktion als Zusammenarbeit und nicht als einmaligen Befehl betrachten.

Spezifisch sein und Kontext angeben

Der Firebase MCP-Server liefert dem Agenten zwar einen erheblichen Kontext zu Ihrem Projekt, aber klare und spezifische Prompts in natürlicher Sprache führen zu den besten Ergebnissen. Vermeiden Sie vage Anfragen.

  • Vage: "Behebe den Datenbankfehler."
  • Spezifisch: "Ich erhalte die Fehlermeldung „Berechtigung verweigert“, wenn ich versuche, in die Sammlung „users“ in Cloud Firestore zu schreiben. Prüfe meine firestore.rules und schlage eine Lösung vor, mit der authentifizierte Nutzer in ihr eigenes Dokument schreiben können.“

Iterieren und verfeinern

KI-Coding-Agenten generieren bei komplexen Aufgaben selten beim ersten Versuch perfekten Code. Wenn eine Antwort nicht ganz richtig ist, setzen Sie die Unterhaltung fort:

  • Fehlermeldungen angeben: Fügen Sie alle Terminalfehler oder Konsolenlogs wieder in den Chat ein.
  • Anpassungen anfordern: "Dieser Code verwendet das ältere v8 SDK. Schreibe ihn mit dem modularen Firebase v9 SDK neu.“
  • Erklärungen anfordern: "Erkläre, wie diese Firebase Security Rules Nutzerdaten schützen."

Vor der Ausführung prüfen

KI-Coding-Agenten sind leistungsstark, können aber Fehler machen oder „halluzinieren“ (falsch benannte Funktionen oder Dienste erfinden).

  • Code prüfen: Lesen Sie den generierten Code immer durch, insbesondere Firebase Security Rules und Konfigurationsdateien (z. B. firebase.json), bevor Sie ihn für die Produktion bereitstellen.
  • Lokal testen: Bitten Sie den Agenten nach Möglichkeit, Ihnen beim lokalen Testen von Änderungen zu helfen, bevor Sie sie live schalten.

MCP-Verbindung verwenden

Da der Firebase MCP-Server Ihrem Agenten direkten Einblick in Ihre Projektstruktur gibt, können Sie auf bestimmte Dateien verweisen, um maßgeschneiderte Implementierungstipps zu erhalten.

  • Beispiel: "Sieh dir meine Datei src/web/index.html an und zeige mir, wo ich das Standard-Firebase-Initialisierungsskript hinzufügen muss."

Nächste Schritte