Firebase MCP in Firebase Studio

1. Übersicht

In diesem Codelab lernen Sie, wie Sie den App Prototyping-Agent zusammen mit dem Firebase MCP-Server in Firebase Studio verwenden, um eine Full-Stack-Webanwendung zu erstellen, die die Firebase Realtime Database nutzt.

Animiertes GIF der fertigen App

Lerninhalte

  • Statische Web-App mit dem App Prototyping-Agent erstellen
  • Firebase MCP-Server einrichten
  • Firebase Realtime Database über Firebase MCP hinzufügen

Voraussetzungen

  • Einen Browser Ihrer Wahl, z. B. Google Chrome
  • Ein Google-Konto zum Erstellen und Verwalten Ihres Firebase-Projekts

2. App mit dem App Prototyping-Agent generieren

Der App Prototyping-Agent verwendet Gemini in Firebase, um Ihre App zu erstellen. Auch wenn Sie identische Prompts verwenden, können die Ergebnisse variieren. Falls Sie nicht weiterkommen, haben wir eine Reihe von Dateien bereitgestellt, die Sie Ihrem Arbeitsbereich hinzufügen können, um das Codelab an verschiedenen Checkpoints zu starten.

  1. Melden Sie sich in Ihrem Google-Konto an, treten Sie dem Google-Entwicklerprogramm bei und öffnen Sie Firebase Studio.
  2. Geben Sie im Feld Mit KI einen Prototyp einer App erstellen eine Beschreibung der App ein:
    An app for a picker wheel that allows custom input.
  3. Klicken Sie auf Prompt optimieren. Sehen Sie sich den optimierten Prompt an.
  4. Klicken Sie auf Prototyp mit KI erstellen.
  5. Sehen Sie sich den vorgeschlagenen App-Entwurf an. Klicken Sie auf Symbol für die Codicon-Bearbeitung anpassenAnpassen, um sie zu bearbeiten.
  6. Klicken Sie auf Speichern.
  7. Wenn das Blueprint Ihre Änderungen übernommen hat, klicken Sie auf Prototype this App (Prototyp für diese App erstellen).Blueprint für die App
  8. Wenn Ihr Blueprint KI-Elemente enthält, werden Sie vom Agent nach einem Gemini-Schlüssel gefragt. Fügen Sie Ihren eigenen Gemini API-Schlüssel hinzu oder klicken Sie auf Automatisch generieren, um einen Gemini API-Schlüssel zu generieren. Wenn Sie auf Automatisch generieren klicken, wird in Firebase Studio ein Firebase-Projekt erstellt und ein Gemini API-Schlüssel für Sie generiert.
  9. Der App Prototyping-Agent verwendet den Blueprint, um eine erste Version Ihrer App zu erstellen. Wenn er fertig ist, wird die Vorschau Ihrer App zusammen mit einer Gemini-Chatoberfläche angezeigt. Nehmen Sie sich einen Moment Zeit, um Ihre App zu überprüfen und zu testen. Wenn Sie auf Fehler stoßen, klicken Sie im Chat auf Fehler beheben, damit der Agent seine eigenen Fehler beheben kann.

3. Firebase MCP in Firebase Studio einrichten

Der Firebase-MCP-Server erweitert die Funktionen des App Prototyping-Agents, indem er Tools bereitstellt, die der Agent aufrufen kann, um Daten aus Firebase-Diensten wie Firebase Authentication, Cloud Firestore und Firebase Data Connect einzurichten, zu verwalten und abzurufen. So richten Sie die Funktion ein:

  1. Klicken Sie in Firebase Studio auf Symbol für die Studio-CodeansichtZum Code wechseln, um die Codeansicht zu öffnen.
  2. Führen Sie im Terminal (Shift + Ctrl + C) den folgenden Befehl aus, um sich in Ihrem Firebase-Konto anzumelden. Folgen Sie der Anleitung auf dem Bildschirm und behalten Sie alle Standardoptionen bei:
    firebase login --no-localhost
  3. Klicken Sie im Explorer Ctrl+Shift+E mit der rechten Maustaste auf den Ordner „.idx“ und wählen Sie Neue Datei aus. Geben Sie mcp.json als Namen für die Datei ein und drücken Sie die Eingabetaste.
  4. Fügen Sie die Serverkonfigurationen zu .idx/mcp.json hinzu.
    {
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}
    Prüfen Sie, ob Sie mit dem Firebase MCP-Server verbunden sind. Im Ausgabefeld sollten ähnliche Logeinträge angezeigt werden, wobei „Gemini“ als richtiger Channel ausgewählt ist.MCPManager aus Gemini-Protokollen

4. Firebase Realtime Database über Firebase MCP hinzufügen

Ziel 1: Firebase zu Ihrer App hinzufügen

  1. Zu Prototyper wechseln Bitten Sie den Agent in der Chatoberfläche, ein Projekt zu erstellen.
    Create a Firebase project for my app.
    Der Kundenservicemitarbeiter ruft das Firebase MCP-Tool firebase_create_project auf.Überspringen Sie diesen Schritt, wenn Sie bereits ein Firebase-Projekt erstellt haben, als Sie die Option zum automatischen Generieren verwendet haben, um einen Gemini API-Schlüssel zu erhalten. Ihre Projekt-ID sollte oben links auf dem Bildschirm neben dem Namen Ihres Arbeitsbereichs angezeigt werden. Alternativ können Sie den Kundenservicemitarbeiter bitten, Ihre Projekte aufzulisten, und sich das gewünschte Projekt notieren.
    List my Firebase projects
    Der Agent ruft das Firebase-MCP-Tool firebase_list_projects auf.
  2. Bitten Sie den Kundenservicemitarbeiter, eine Verbindung zu diesem Projekt herzustellen.
    Connect my app to my project `spinsync-3y3c6`.
    Achten Sie darauf, dass eine .firebaserc-Datei angezeigt wird, in der Ihr aktives Projekt festgelegt ist. Wenn nicht, bitten Sie den Kundenservicemitarbeiter, Ihre Firebase-Umgebung zu aktualisieren.
    Update my Firebase environment to use this project.
    Der Agent ruft das Firebase-MCP-Tool firebase_update_environment auf . Es ist jedoch möglich, dass der Agent dies ohne Aufrufen des Tools erledigt.Prüfen Sie außerdem, ob in Ihrer Firebase-Umgebung das richtige aktive Projekt und Sie als authentifizierter Nutzer vorhanden sind.
    Show me my current Firebase environment.
    Der Agent ruft das Firebase-MCP-Tool firebase_get_environment auf.
  3. Bitten Sie den Agenten, eine Web-App in Ihrem Firebase-Projekt zu erstellen.
    Create a web app in my active Firebase project.
    Der Agent ruft das Tool firebase_create_app auf und gibt die App-ID zurück. Wenn der Agent dies nicht tut, versuchen Sie es noch einmal, indem Sie auf klicken, oder folgen Sie dieser Anleitung, um den Schritt in der Firebase Console auszuführen.
    Use the App ID to get the SDK configuration and add to my app.
    Der Agent sollte das Tool firebase_get_sdk_config aufrufen und Ihren Code mit Ihrer Firebase-Konfiguration aktualisieren.Wenn Ihr API-Schlüssel und andere Konfigurationen nach der Meldung des Agents, dass die Aufgabe abgeschlossen ist, in src/lib/firebase.ts angezeigt werden, bitten Sie ihn, sie zu entfernen, um Ihre App zu schützen.
    Secure my code by moving my Firebase config to the `.env` file.

Ziel 2: Firebase Realtime Database hinzufügen

  1. Bleiben Sie bei Prototyper oder wechseln Sie zu Prototyper. Bitten Sie den Agenten in der Chatoberfläche, die Firebase Realtime Database in Ihrem Projekt einzurichten.
    Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
    Erwarte, dass der Kundenservicemitarbeiter das Firebase MCP-Tool firebase_init aufruft und Sicherheitsregeln in database.rules.json erstellt, wenn die Dateiänderungen am Ende dieses Gesprächs abgeschlossen sind.
    {
    "rules": {
        ".read": true,
        ".write": true
    }
}
    Hier gewähren Sie allen Lese- und Schreibzugriff auf Ihre Datenbank. Außerhalb dieses Codelabs sollten Sie Ihre Datenbanken immer schützen. Weitere Informationen zu diesem Thema finden Sie in unserer Dokumentation.
  2. Zu Code wechseln Initialisieren Sie die Firebase Realtime Database im Terminal (Shift + Ctrl + C).
    firebase init database
    Folgen Sie der Anleitung auf dem Bildschirm und behalten Sie die Standardoptionen bei.Stellen Sie dann die Sicherheitsregeln für Ihre Datenbankinstanz bereit.
    firebase deploy --only database
  3. Zu Prototyper wechseln Bitten Sie den Agent, Ihre Standarddatenbankinstanz für Nutzereingaben zu verwenden.
    Use my default Realtime Database instance for user entries.
    Der Agent aktualisiert den restlichen Quellcode, um Ihre App mit Ihrer Datenbankinstanz zu verbinden.

Ziel 3: Testen

  1. Erstellen Sie einige neue Einträge für das Glücksrad und beobachten Sie, wie sie auf der Seite „Firebase Realtime Database“ in der Firebase Console angezeigt werden.

Firebase Realtime Database in der Firebase Console

5. Fazit

Glückwunsch! Sie haben mit dem App Prototyping-Agent und Firebase MCP erfolgreich eine Full-Stack-Web-App erstellt. Probieren Sie ruhig andere Tools aus, die vom Firebase-MCP-Server angeboten werden, und erweitern Sie die Funktionen Ihrer App.

Weitere Informationen