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-Programmieragenten 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-Programmieragenten verwenden können, um Cloud Firestore, 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?
Allgemeine KI-Modelle haben oft Schwierigkeiten mit spezifischen Projektkonfigurationen oder veralteten Informationen. Dieses Toolkit schließt diese Lücke:
- Firebase-Agenten-Skills: Skills vermitteln dem Programmieragenten Fachwissen. Sie bieten aktuelle Dokumentation und optimale Arbeitsabläufe, damit der Agent weiß, wie Ihre Architektur korrekt und gemäß den Empfehlungen von Firebase strukturiert werden muss.
- Firebase MCP-Server: Der MCP-Server bietet dem Programmieragenten Kontext und Zugriff. Er richtet ein Standardprotokoll für den Agenten ein, mit dem er Ihre aktiven Projektressourcen, lokalen Dateien und Konfigurationen programmatisch prüfen kann.
- Firebase CLI: Die Befehlszeile gibt dem Programmier agenten die Möglichkeit, Maßnahmen zu ergreifen. Sie 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-Agenten-Skills zusammen mit der Firebase CLI und dem Firebase MCP Server verwenden, erhält Ihr KI-Programmieragent zusätzliche Funktionen:
- Maßnahmen ergreifen: 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 die Schemas Ihres Projekts zu, um relevantere und genauere Hilfe zu erhalten.
- Tokenkosten senken: Agenten-Skills laden detaillierte Dokumentation nur dann, wenn sie für eine bestimmte Aufgabe erforderlich ist. Dadurch wird der Sitzungsaufwand minimiert.
Bei welchen Firebase-Diensten können die Agenten-Skills und ‑Tools helfen?
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 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: Projekt für die Bereitstellung statischer Webanwendungen einrichten.
Eine vollständige Liste der verfügbaren Optionen finden Sie unter Vollständige Liste der Firebase-Agenten-Skills.
Allgemeiner Workflow
In den folgenden Schritten wird ein allgemeiner Workflow beschrieben, wie Sie Firebase Agenten-Skills verwenden, um Firebase-Dienste in einer Webanwendung einzurichten und zu nutzen. 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 in den Build with Google Integrationspaketen für Antigravity enthalten. Aktivieren Sie dieses Paket mit einer der folgenden Optionen:
- Während des Onboardings: Klicken Sie das Kästchen für den Firebase-Stack an.
- In den Einstellungen nach dem Onboarding: Gehen Sie zu Einstellungen > Anpassungen. Klicken Sie unter Build with Google-Plug‑ins, auf Anpassen und dann bei der Firebase Integration auf Herunterladen.
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@firebaseOption 2: Codex-App
Führen Sie die folgenden Aufgaben einmal aus:
Registrieren Sie sich über das Terminal:
codex plugin marketplace add firebase/agent-skillsStarten Sie die Codex-App vollständig neu.
Öffnen Sie Plug‑ins.
Wählen Sie den Firebase Marketplace/die Firebase-Quelle aus.
Öffnen Sie Firebase und klicken Sie auf + Installieren.
Starten Sie eine neue Aufgabe.
Geben Sie
@Firebaseein, um das Plug‑in auszuwählen, oder bitten Sie Codex, 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 empfohlen, Ihren KI-Programmieragenten 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 mehr Zugriff.
KI-gestützte Methode
In den meisten Fällen können Sie Ihren KI-Programmieragenten bitten, den Firebase MCP-Server einzurichten. Wenn er jedoch Schwierigkeiten hat oder der Firebase MCP-Server nicht aufgeführt wird , wechseln Sie zur manuellen Methode.
Manuelle Methode
Antigravity
So konfigurieren Sie Antigravity für die Verwendung des Firebase MCP-Servers:
- Klicken Sie in Antigravity im Bereich „Agent“ auf das Menü > MCP-Server.
- 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"]
}
}
}
Firebase Studio
Wenn Sie Firebase Studio für die Verwendung des Firebase MCP-Servers konfigurieren möchten, bearbeiten oder erstellen Sie die Konfigurationsdatei: .idx/mcp.json.
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 Plug‑in installieren (empfohlen)
Am einfachsten richten Sie den Firebase MCP-Server in Claude Code ein, indem Sie das offizielle Firebase-Plug‑in installieren:
Fügen Sie den Firebase Marketplace für Claude-Plug‑ins hinzu:
claude plugin marketplace add firebase/firebase-toolsInstallieren Sie das Claude-Plug‑in für Firebase:
claude plugin install firebase@firebasePrüfen Sie die Installation:
claude plugin marketplace list
Option 2: MCP-Server manuell konfigurieren
Alternativ können Sie den Firebase MCP-Server manuell konfigurieren:
Führen Sie den folgenden Befehl in Ihrem App-Ordner aus:
claude mcp add firebase npx -- -y firebase-tools@latest mcpPrüfen Sie die Installation:
claude mcp listFolgendes sollte 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"]
}
}
}
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
}
}
}
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:
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"]
}
}
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 geöffneten Projekt verfügbar machen möchten, 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-Programmieragenten bitten, Cloud Firestore, Authentication und Firebase Hosting einzurichten.
Bitten Sie Ihren Agenten, einen Dienst einzurichten. Verwenden Sie dazu Prompts wie die folgenden:
- Richte Cloud Firestore als Datenbank für diese App ein.
- Erstelle eine Anmeldeseite mit Authentication und aktualisiere Security Rules um sicherzustellen, dass nur autorisierte Nutzer ihre eigenen Daten lesen und schreiben können.
- Richte Firebase Hosting ein und stelle die App in der Produktionsumgebung bereit.
Prüfen Sie alle Informationen und folgen Sie allen Schritten, die Ihr Agent möglicherweise bereitstellt, z. B.:
- Pläne: Ihr Agent schlägt eine Strategie basierend auf Ihrer vorhandenen Codebasis vor.
- Verbindungen: Ihr Agent verknüpft Ihren lokalen Code mit einem vorhandenen Firebase Projekt oder hilft Ihnen, ein neues Firebase-Projekt zu erstellen.
- Ressourcen initialisieren: Ihr Agent fügt Ihrer Codebasis die erforderlichen Firebase Bibliotheken und ‑Konfigurationen hinzu.
- 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) oderfirebase.json(um der Firebase CLI mitzuteilen, welche Dienste bereitgestellt und wie sie konfiguriert werden sollen). - Ausführen: Ihr Agent führt Sie durch zusätzliche Konfigurations- oder Bereitstellungsschritte.
Allgemeine Tipps für Prompts an einen KI-Programmieragenten
Um das Beste aus Ihrem KI-Programmieragenten 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 viele Informationen 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 den Fehler ‚Berechtigung verweigert‘, wenn ich versuche, in die Sammlung ‚users‘ in Cloud Firestore zu schreiben. Prüfe meine
firestore.rulesund schlage eine Lösung vor, mit der authentifizierte Nutzer in ihr eigenes Dokument schreiben können.“
Iterieren und verfeinern
KI-Programmieragenten 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 Konsolenprotokolle 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-Programmieragenten 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 in der Produktionsumgebung 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 Implementierungsempfehlungen zu erhalten.
- Beispiel: "Sieh dir meine Datei
src/web/index.htmlan und zeige mir, wo ich das Standardinitialisierungsskript für Firebase hinzufügen muss."
Nächste Schritte
- Vollständige Liste aller verfügbaren Firebase-Agenten-Skills ansehen.
- Vollständige Liste aller verfügbaren Prompts, Tools und Ressourcen ansehen, die der Firebase MCP-Server bietet.
- Weitere Informationen zu den Tools der Firebase CLI.