Firebase MCP in Firebase Studio

1. Übersicht

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

Animiertes GIF der fertigen App

Lerninhalte

  • Statische Web-App mit dem App Prototyping-Agent erstellen
  • Firebase MCP-Server einrichten
  • Firestore mit 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. Benennen Sie die Datei mcp.json 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. Firestore mit Firebase MCP hinzufügen

Ziel 1: Firebase zu Ihrer App hinzufügen

  1. Zu Prototyper wechseln Bitten Sie den Agent im Chat, ein Firebase-Projekt zu erstellen.
    Create a Firebase project.
    Überspringen Sie diesen Schritt, wenn Sie bereits ein Firebase-Projekt erstellt haben, als Sie die Option zum automatischen Generieren eines Gemini API-Schlüssels verwendet haben. Ihre Projekt-ID sollte oben links auf dem Bildschirm neben dem Namen Ihres Arbeitsbereichs angezeigt werden. Alternativ können Sie den Agenten 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 Agenten, Ihr Firebase-Projekt für die lokale Entwicklung zu verwenden.
    Use `spinsync-3y3c6` as my Firebase project in my local environment.
    Achten Sie darauf, dass eine .firebaserc-Datei angezeigt wird, in der Ihr Standard-Firebase-Projekt festgelegt ist. Diese Datei gibt an, welches Firebase-Projekt von der Firebase CLI verwendet werden soll. Wenn Sie diese Datei nicht sehen, fragen Sie noch einmal speziell nach dieser Datei.
  3. Bitten Sie den Agenten, eine Web-App in Ihrem Firebase-Projekt zu erstellen.
    Create a web app in my Firebase project.
    Der Kundenservicemitarbeiter ruft das Tool firebase_create_app auf. Wenn der Agent dies nicht tut, versuchen Sie es noch einmal oder folgen Sie dieser Anleitung, um den Schritt in der Firebase Console auszuführen.Der Agent ruft möglicherweise das Tool firebase_get_sdk_config auf und erstellt die erforderlichen Dateien, um Ihr Projekt mit Ihrer Firebase-Web-App zu verbinden. Falls nicht, fordern Sie ihn dazu auf.
    Add my Firebase SDK configuration to my app.
    Der Agent fügt Ihren API-Schlüssel und andere Konfigurationen häufig direkt in src/lib/firebase.ts ein. Bitten Sie es, sie aus Ihrem Anwendungscode zu entfernen, um Ihre App zu schützen.
    Secure my code by moving my Firebase config to my `.env` file.

Ziel 2: Firestore hinzufügen

  1. Zu Code wechseln Bitten Sie den Agent in der Chatoberfläche, Firestore in Ihrer App zu verwenden.
    Use Firestore for user entries. Give anyone read and write access.
    Der Agent sollte den Quellcode so aktualisieren, dass Firestore anstelle des lokalen Speichers für Nutzereingaben verwendet wird, und Firestore-Sicherheitsregeln erstellen. Dabei wird möglicherweise das Firebase MCP-Tool firebase_init aufgerufen oder Sie werden aufgefordert, den Befehl firebase init im Terminal auszuführen, um Firestore zu initialisieren. Unabhängig davon sollten Sie vor dem Fortfahren die Datei firestore.rules mit dem folgenden Inhalt sehen.
    rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if 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. Initialisieren Sie Firestore im Terminal (Shift + Ctrl + C), falls Sie noch nicht dazu aufgefordert wurden.
    firebase init firestore
    Folgen Sie der Anleitung auf dem Bildschirm und behalten Sie die Standardoptionen bei. Überschreiben Sie die Sicherheitsregeln aus dem vorherigen Schritt nicht.Stellen Sie dann die Sicherheitsregeln für Ihre Datenbankinstanz bereit.
    firebase deploy --only firestore
    Dadurch wird eine Firestore-Datenbankinstanz für Sie bereitgestellt.

Ziel 3: Testen

  1. Laden Sie Ihre App neu, erstellen und löschen Sie Einträge auf dem Glücksrad und sehen Sie sich diese Aktualisierungen auf der Firestore-Seite in der Firebase Console an.

App in Studio und 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