Firebase-Dienste mit KI-Unterstützung einbinden

Mit KI-basierten Entwicklungstools wie Antigravity, Claude Code, Codex und Cursor können Sie die Firebase-Einrichtung für Web-Apps optimieren. Wenn Sie Firebase-Agent-Skills in Verbindung mit der Firebase-CLI und dem Firebase-MCP-Server verwenden, können Sie Ihren KI-Codierungs-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-Agent verwenden, um Cloud Firestore, Authentication und Firebase Hosting für eine Web-App einzurichten. Informationen zu iOS-, Android- und Flutter-Apps folgen in Kürze.

Vorteile von Firebase-Agent-Skills und ‑Tools

Allgemeine KI-Modelle haben oft Schwierigkeiten mit bestimmten Projektkonfigurationen oder veralteten Informationen. Dieses Toolkit schließt diese Lücke:

  • Firebase-Agent-Skills: Skills stellen dem Coding-Agenten Domain-Know-how zur Verfügung. Sie enthalten aktuelle Dokumentation und optimale Arbeitsabläufe, damit der Agent weiß, wie Sie Ihre Architektur gemäß den Firebase-Empfehlungen strukturieren müssen.
  • Firebase-MCP-Server: Der MCP-Server bietet dem Coding-Agent Kontext und Zugriff. Es wird ein Standardprotokoll für den Agenten eingerichtet, mit dem Ihre aktiven Projektressourcen, lokalen Dateien und Konfigurationen programmatisch geprüft werden können.
  • Firebase-Befehlszeile: Die Befehlszeile bietet dem Coding-Agent umsetzbare Möglichkeiten. Es ist das Ausführungstool, mit dem der Agent anspruchsvolle Aufgaben wie das Initialisieren von Datenbanken, das Verwalten von Konfigurationen für die Nutzerauthentifizierung und das Bereitstellen von Code in Ihrem Namen ausführt.

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

  • Aktiv werden: Mehr als nur Code schreiben. Ihr Agent kann Dienste initialisieren, 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 Einrichtungsaufgaben zu führen.
  • Genauigkeit verbessern: Greifen Sie auf die Umgebung und Schemas Ihres Projekts zu, um relevantere und genauere Hilfe zu erhalten.
  • Tokenkosten senken: Agent-Skills laden detaillierte Dokumentation nur, wenn sie für eine bestimmte Aufgabe erforderlich ist. So wird der Sitzungsaufwand minimiert.

Bei welchen Firebase-Diensten können die Agent-Skills und ‑Tools helfen?

In diesem Leitfaden geht es hauptsächlich darum, wie Agent-Skills, die Firebase CLI und der Firebase-MCP-Server zusammenarbeiten, um Ihnen bei der schnellen Einrichtung der folgenden Dienste und Funktionen zu helfen:

  • Cloud Firestore: Eine NoSQL-Datenbank bereitstellen.
  • Authentication: Sichere Nutzeranmeldung einrichten
  • Firebase Security Rules: Security Rules für Ihre App generieren und optimieren.
  • Firebase Hosting: Richten Sie Ihr Projekt für die Bereitstellung statischer Web-Apps ein.

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

Allgemeiner Workflow

In den folgenden Schritten wird ein allgemeiner Workflow beschrieben, in dem Firebase-Agent-Skills verwendet werden, um Firebase-Dienste in einer Web-App einzurichten und zu verwenden. Im Hintergrund verwenden Agent-Skills das Firebase CLI und den Firebase MCP-Server, um diese Aufgaben auszuführen.

Schritt 1: Firebase-Agent-Skills installieren

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

Antigravity

Firebase-Agent-Skills sind als eines der Build with Google-Integrationspakete für Antigravity enthalten. Sie können dieses Paket an zwei Stellen für den Zugriff auf globaler Ebene aktivieren:

  • Beim Onboarding: Aktivieren Sie das Kästchen für den Firebase-Stack.
  • In den Einstellungen: Gehen Sie zu den Einstellungen > Anpassungen. Klicken Sie unter Build with Google Plugins (Mit Google-Plug-ins entwickeln) auf Customize (Anpassen) und dann für die Firebase-Integration auf Download (Herunterladen).

Wenn Sie lieber Zugriff auf Projektebene haben möchten, führen Sie den folgenden Befehl im Verzeichnis Ihres Projekts aus:

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

Sie können Firebase-Agent-Skills direkt über den Cursor Marketplace installieren oder indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

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

Andere KI-Agenten

npx skills add firebase/agent-skills

Schritt 2: Verbindung zum Firebase MCP-Server herstellen

Viele Firebase-Agent-Skills verwenden die Firebase-CLI für Aufgaben. Es wird jedoch empfohlen, Ihren KI-Coding-Agent mit dem Firebase-MCP-Server zu verbinden. Diese Verbindung verbessert die Fähigkeit Ihres Agents, 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 aktualisiert. Sie können sie aufrufen, indem Sie oben im MCP Store-Bereich auf MCP-Server verwalten > Rohkonfiguration ansehen klicken. Sie enthält dann Folgendes:

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

Firebase Studio

Wenn Sie Firebase Studio so konfigurieren möchten, dass der Firebase MCP-Server verwendet wird, bearbeiten Sie die Konfigurationsdatei .idx/mcp.json oder erstellen Sie sie.

Wenn die Datei noch nicht vorhanden ist, erstellen Sie sie, indem Sie mit der rechten Maustaste auf das übergeordnete Verzeichnis klicken und Neue Datei auswählen. Fügen Sie der Datei den folgenden Inhalt hinzu:

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

Claude

Claude Code

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

    Am einfachsten richten Sie den Firebase-MCP-Server in Claude Code ein, indem Sie das offizielle Firebase-Plug‑in installieren:

    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. Installation prüfen:

      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 App-Ordner aus:

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

      claude mcp list

      Es sollte Folgendes angezeigt werden:

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

Claude für den Computer

Wenn Sie Claude Desktop so konfigurieren möchten, dass der Firebase-MCP-Server verwendet wird, 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 Developer (Entwickler) aus und klicken Sie dann auf Edit Config (Konfiguration bearbeiten).

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

Cline

Wenn Sie Cline so konfigurieren möchten, dass der Firebase-MCP-Server verwendet wird, bearbeiten Sie die Datei cline_mcp_settings.json. Sie können diese Datei öffnen oder erstellen, indem Sie oben im Cline-Bereich auf das Symbol „MCP-Server“ und dann auf die Schaltfläche MCP-Server konfigurieren klicken.

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

Cursor

Option 1: Marketplace-Plug-in (empfohlen)

Installieren Sie das Firebase-Plug‑in aus dem Cursor Marketplace. Dadurch wird der MCP-Server automatisch konfiguriert und Sie erhalten Zugriff auf Firebase-Agent-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.
  • Für alle Projekte (global): Bearbeiten Sie ~/.cursor/mcp.json.
"mcpServers": {
  "firebase": {
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

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 Sie den Server in jedem Projekt verfügbar machen möchten, das Sie öffnen, bearbeiten Sie Ihre Nutzereinstellungen, z. B.:

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

Windsurf

Bearbeiten Sie die Datei ~/.codeium/windsurf/mcp_config.json, um den Windsurf Editor zu konfigurieren:

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

Schritt 3: Firebase-Dienste initialisieren

Nachdem Sie die Agent-Skills und ‑Tools eingerichtet haben, können Sie natürliche Sprache verwenden, um Ihren KI-Coding-Agenten Cloud Firestore, Authentication und Firebase Hosting einrichten zu lassen.

  1. Bitten Sie Ihren Kundenservicemitarbeiter, einen Dienst einzurichten. Sie können beispielsweise Prompts wie diese verwenden:

    • Richten Sie Cloud Firestore als Datenbank für diese App ein.
    • Erstellen Sie eine Anmeldeseite mit Authentication und aktualisieren Sie Security Rules, damit nur autorisierte Nutzer ihre eigenen Daten lesen und schreiben können.
    • Firebase Hosting einrichten und die App für die Produktion bereitstellen:
  2. Prüfen Sie alle Informationen und folgen Sie allen Anleitungen, die Ihr KI-Agent möglicherweise bereitstellt, z. B.:

    1. Pläne: Ihr Agent schlägt eine Strategie basierend auf Ihrer vorhandenen Codebasis vor.
    2. Verbinden: Ihr Agent verknüpft Ihren lokalen Code mit einem vorhandenen Firebase-Projekt oder hilft Ihnen, ein neues Firebase-Projekt zu erstellen.
    3. Ressourcen werden initialisiert: Der Agent fügt der Codebasis die erforderlichen Firebase-Bibliotheken und die Konfiguration hinzu.
    4. Dateien aktualisieren: Ihr Agent erstellt und aktualisiert alle erforderlichen Dateien, z. B. firestore.rules (um festzulegen, wer Daten in Ihrer Datenbank lesen, schreiben oder abfragen kann) oder firebase.json (um die Firebase-Befehlszeile darüber zu informieren, 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 für einen KI-Coding-Agenten

Damit Sie Ihren KI-Coding-Agenten optimal nutzen können, 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 stellt dem Agent zwar wichtigen Kontext zu Ihrem Projekt zur Verfügung, aber mit klaren und spezifischen Prompts in natürlicher Sprache lassen sich die besten Ergebnisse erzielen. Vermeiden Sie vage Anfragen.

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

Iterieren und verfeinern

KI-basierte Programmieragenten generieren bei komplexen Aufgaben selten beim ersten Versuch perfekten Code. Wenn eine Antwort nicht ganz richtig ist, können Sie die Unterhaltung fortsetzen:

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

Vor der Ausführung bestätigen

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

  • Code prüfen: Lesen Sie den generierten Code, insbesondere Firebase Security Rules und Konfigurationsdateien wie firebase.json, immer durch, bevor Sie ihn in der Produktion bereitstellen.
  • Lokal testen: Bitten Sie den Agenten nach Möglichkeit, Ihnen beim lokalen Testen von Änderungen zu helfen, bevor Sie sie veröffentlichen.

MCP-Verbindung verwenden

Da Ihr Agent über den Firebase-MCP-Server direkten Zugriff auf Ihre Projektstruktur hat, können Sie auf bestimmte Dateien verweisen, um maßgeschneiderte Implementierungshinweise zu erhalten.

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

Nächste Schritte