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-Agenten-Skills zusammen mit der Firebase-CLI und dem Firebase-MCP-Server verwenden, können Sie Ihren KI-Codierungsagenten 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 mithilfe eines KI-Codierungs-Agents Cloud Firestore, Firebase Authentication und Firebase Hosting für eine Web-App einrichten. Informationen zu iOS-, Android- und Flutter-Apps finden Sie demnächst hier.
Vorteile von Firebase-Agenten-Skills und ‑Tools
KI-Coding-Agents haben oft Probleme mit bestimmten Projektkonfigurationen oder veralteten Informationen. Dieses Toolkit schließt diese Lücke, indem es spezialisierte Anweisungen (Agent Skills) mit zwei sich ergänzenden Arten von Agent-Ausführungstools (CLI und MCP-Server) kombiniert:
- Firebase-Agenten-Skills: Stellen dem Coding-Agenten Fachwissen und Workflows zur Verfügung. Als Anweisungsebene leiten Skills den Agenten bei der Arbeit mit Firebase an, einschließlich des Schreibens von Code. Skills vermitteln dem Agenten auch, wann und wie er die Firebase-CLI und den Firebase-MCP-Server verwenden soll.
- Tools zur Ausführung von KI-Agenten:
- Firebase-Befehlszeile (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üfungen und Datenvorgänge. Über strukturierte Toolaufrufe kann der Agent programmatisch Cloud Firestore-Dokumente abfragen und aktualisieren, Firebase Authentication-Nutzer verwalten, Security Rules validieren, Live-Logs oder Dokumentation direkt in den Kontext einbinden 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 Funktionen:
- Aktiv werden: 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 Laufenden bleiben: Verwenden Sie offizielle, versionsspezifische Prompts, um Ihren Agenten durch die Einrichtungsaufgaben zu führen.
- Genauigkeit verbessern: Auf die Umgebung und Schemas Ihres Projekts zugreifen, um relevantere und genauere Hilfe zu bieten.
- Tokenkosten reduzieren: Agent-Skills laden detaillierte Dokumentation nur, wenn eine bestimmte Aufgabe dies erfordert. Dadurch wird der Sitzungsaufwand minimiert.
Anwendbare Firebase-Dienste
In diesem Leitfaden geht es hauptsächlich darum, wie KI-Agenten-Skills, die Firebase-Befehlszeile und der Firebase-MCP-Server zusammenarbeiten, damit Sie diese Dienste und Funktionen schnell einrichten können:
- Cloud Firestore: NoSQL-Datenbank bereitstellen.
- Firebase Authentication: Richten Sie eine sichere Nutzeranmeldung ein.
- Firebase Security Rules: Security Rules für Ihre App generieren und optimieren.
- Firebase Hosting: Projekt für die Bereitstellung einer statischen Web-App einrichten.
Eine vollständige Liste der verfügbaren Skills finden Sie in der vollständigen Liste der Firebase-Agenten-Skills.
Allgemeiner Workflow
In den folgenden Schritten wird ein allgemeiner Workflow für die Verwendung von Firebase-Agenten-Skills zum Einrichten und Verwenden von Firebase-Diensten in einer Web-App beschrieben. Im Hintergrund verwenden Agenten-Skills die Firebase-Befehlszeile 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 in Ihrem bevorzugten Editor mit einem einzigen Prompt installieren:
Antigravity
Option 1: Zugriff auf globaler Ebene
Firebase-Agenten-Skills sind im Firebase-Plug-in im Antigravity Marketplace (und als Build with Google-Integrations-Bundle) enthalten. Installieren Sie das Plug-in mit einer der folgenden Optionen:
- Im Antigravity Marketplace: Klicken Sie auf Anpassungen, wählen Sie den Tab Marketplace aus und klicken Sie dann auf der Firebase-Plug-in-Karte auf +.
- In Antigravity CLI: Führen Sie
/plugin install firebase@agent-marketplaceaus (oder führen Sie/pluginaus und installieren Sie Firebase über den Tab Discover). In Antigravity installierte Plug-ins werden ebenfalls automatisch mit Antigravity CLI synchronisiert. - Während des Onboardings: Aktivieren Sie das Kästchen für den Firebase-Stack.
Option 2: Zugriff auf Projektebene
Führen Sie im Verzeichnis Ihres Projekts den folgenden Befehl 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-Marktplatz oder die Firebase-Quelle aus.
Öffnen Sie Firebase und klicken Sie auf + Installieren.
Neue Aufgabe starten.
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 in Ihrem Terminal den folgenden Befehl aus:
npx skills add firebase/agent-skills --agent=cursor
Andere KI-Agenten
Führen Sie in Ihrem 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-Codierungs-Agenten mit dem Firebase-MCP-Server zu verbinden. Diese Verbindung verbessert die Fähigkeit Ihres KI-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-basierten Programmier-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:
- Klicken Sie in Antigravity im Bereich „Agent“ auf das Menü > MCP-Server.
- Wählen Sie Firebase > Installieren aus.
Dadurch wird Ihre mcp_config.json-Datei automatisch aktualisiert. Sie können sie aufrufen, indem Sie oben im Bereich „MCP Store“ auf MCP-Server verwalten > Rohkonfiguration ansehen klicken. Sie enthält dann den folgenden Inhalt:
{
"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:
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@firebaseInstallation prüfen:
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 im Ordner Ihrer Anwendung aus:
claude mcp add firebase npx -- -y firebase-tools@latest mcpInstallation prüfen:
claude mcp listFolgendes sollte angezeigt werden:
firebase: npx -y firebase-tools@latest mcp - ✓ Connected
Claude für den Computer
Bearbeiten Sie die Datei claude_desktop_config.json, um Claude Desktop für die Verwendung des Firebase-MCP-Servers zu konfigurieren. 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 aus dem Cursor Marketplace. Dadurch wird der MCP-Server automatisch konfiguriert und der Zugriff auf Firebase-Agenten-Skills ermöglicht.
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. - Für alle Projekte (global)
~/.cursor/mcp.jsonbearbeiten
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
Cline
Bearbeiten Sie die Datei cline_mcp_settings.json, um Cline für die Verwendung des Firebase-MCP-Servers zu konfigurieren. Sie können diese Datei öffnen oder erstellen, indem Sie oben im Cline-Bereich auf das Symbol für MCP-Server und dann auf den Button MCP-Server konfigurieren klicken.
{
"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 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 Windsurf Editor zu konfigurieren:
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
Schritt 3: Firebase-Dienste initialisieren
Nachdem Sie die Agent-Fähigkeiten und ‑Tools eingerichtet haben, können Sie jetzt mit natürlicher Sprache Ihren KI-Coding-Agenten Cloud Firestore, Firebase Authentication und Firebase Hosting einrichten lassen.
Bitten Sie Ihren KI-Agenten, einen Dienst einzurichten. Sie können beispielsweise Prompts wie die folgenden verwenden:
- Richten Sie Cloud Firestore als Datenbank für diese App ein.
- Erstellen Sie mit Authentication eine Anmeldeseite und aktualisieren Sie Security Rules, damit nur autorisierte Nutzer ihre eigenen Daten lesen und schreiben können.
- Richten Sie Firebase Hosting ein und stellen Sie die Anwendung in der Produktion bereit.
Prüfen Sie alle Informationen und folgen Sie den Anleitungen, die Ihr Agent möglicherweise bereitstellt, z. B.:
- Pläne: Der Agent schlägt eine Strategie basierend auf Ihrer vorhandenen Codebasis vor.
- Verbinden: Der Agent verknüpft Ihren lokalen Code mit einem vorhandenen Firebase-Projekt oder hilft Ihnen, ein neues Firebase-Projekt zu erstellen.
- Ressourcen initialisieren: Der KI-Agent fügt die erforderlichen Firebase-Bibliotheken und ‑Konfigurationen zu Ihrer Codebasis hinzu.
- Dateien aktualisieren: Der Agent erstellt und aktualisiert alle erforderlichen Dateien, z. B.
firestore.rules(um festzulegen, wer Daten in Ihrer Datenbank lesen, schreiben oder abfragen darf) oderfirebase.json(um der Firebase-Befehlszeile mitzuteilen, welche Dienste bereitgestellt und wie sie konfiguriert werden sollen). - Ausführen: Der 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 vielseitigen 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 Agenten zwar umfangreichen Kontext zu Ihrem Projekt zur Verfügung, aber die besten Ergebnisse erzielen Sie mit klaren und spezifischen Prompts in natürlicher Sprache. 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. Überprüfe meine
firestore.rulesund schlage eine Lösung vor, mit der authentifizierte Nutzer in ihr eigenes Dokument schreiben können.“
Iterieren und verfeinern
KI-Agenten für die Programmierung 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: „Dieser Code verwendet das ältere v8 SDK. Schreibe ihn mit dem modularen Firebase SDK v9 um.“
- Erklärungen anfordern: „Erkläre, wie diese Firebase Security Rules Nutzerdaten schützen.“
Vor dem Ausführen prüfen
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 immer durch, insbesondere Firebase Security Rules und Konfigurationsdateien (z. B.
firebase.json), bevor Sie ihn in der Produktion bereitstellen. - Lokal testen: Bitten Sie den KI-Agenten nach Möglichkeit, Ihnen beim lokalen Testen von Änderungen zu helfen, bevor Sie sie veröffentlichen.
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 Implementierungshinweise zu erhalten.
- Beispiel: „Sieh dir meine Datei
src/web/index.htmlan und zeige mir, wo ich das Standard-Firebase-Initialisierungsskript hinzufügen muss.“
Nächste Schritte
- Vollständige Liste aller verfügbaren Firebase-Agenten-Skills
- Vollständige Liste aller verfügbaren Prompts, Tools und Ressourcen, die der Firebase-MCP-Server bereitstellt
- Weitere Informationen zu den Tools, die von der Firebase-Befehlszeile bereitgestellt werden