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 endgültigen App

Lerninhalte

  • Statische Web-App mit dem App Prototyping-Agent erstellen
  • Mit einem Firebase-Projekt verknüpfen
  • 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.

  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. Optional: Code abrufen

Wenn Sie nicht weiterkommen, können Sie ab diesem Punkt die Beispieldateien verwenden, um der Beispiel-App genauer zu folgen.

  1. Laden Sie die Dateien im Ordner herunter.
  2. Klicken Sie in Firebase Studio auf Symbol für die Codeansicht Zu Code wechseln, um die Codeansicht zu öffnen.
  3. Ziehen Sie die heruntergeladenen Dateien in den Explorer-Bereich von Firebase Studio. Erlauben Sie, dass die Dateien vorhandene Dateien ersetzen.
  4. Führen Sie im Terminal (Shift + Ctrl + C) den folgenden Befehl aus, um Pakete zu installieren.
    npm install
  5. Öffnen Sie den Bereich Quellcodeverwaltung in Firebase Studio, geben Sie eine Nachricht ein, um die Codeänderung zu beschreiben, z. B. „Code von GitHub importiert“, und klicken Sie dann auf Commit.
  6. Klicken Sie auf Zu Prototyper wechseln, um das Codelab mit der Beispielversion der App fortzusetzen.

4. Mit einem Firebase-Projekt verknüpfen

Glückwunsch! Ihre App funktioniert lokal. Als Nächstes verbinden Sie sie mit einem Firebase-Projekt, um ihr ein Backend zu geben.

  1. Bitten Sie den App Prototyping-Agent, eine Verbindung zu einem Firebase-Projekt herzustellen.
    Connect to a Firebase project.
    Der Agent erstellt ein neues Projekt oder stellt eine Verbindung zu einem bestehenden Projekt her. Wenn Sie zuvor die Option zum automatischen Generieren verwendet haben, um einen Gemini API-Schlüssel zu erhalten, sollte Ihr Projekt in der linken oberen Ecke des Bildschirms neben Ihrem Arbeitsbereichsnamen angezeigt werden. Anschließend generiert der Agent die erforderliche Firebase-Konfiguration und integriert sie über src/lib/firebase.ts in Ihre App (siehe Abbildung).
    import { initializeApp, getApp, getApps } from 'firebase/app';

const firebaseConfig = {
  "projectId": "foo-bar-baz",
  "appId": "1:630673270654:web:3eda41879acd38fa96ce14",
  "storageBucket": "foo-bar-baz.firebasestorage.app",
  "apiKey": "AIzaSyDGoMZQia334izw8JedslMTUD0fNpmFca0",
  "authDomain": "foo-bar-baz.firebaseapp.com",
  "measurementId": "",
  "messagingSenderId": "630673270654"
};

// Initialize Firebase
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

export default app;
    Wenn der oben genannte Prompt die Aufgabe nicht auf einmal erledigen kann, fragen Sie den Kundenservicemitarbeiter noch einmal. Teilen Sie die Schritte bei Bedarf auf.
    Create a new Firebase project.

5. 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 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 rechter Channel ausgewählt ist.MCPManager aus Gemini-Protokollen

6. Firestore mit Firebase MCP hinzufügen

Ziel 1: Firestore hinzufügen

  1. Zu Prototyper 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 Kundenservicemitarbeiter wird Folgendes tun:
    • Initialisieren Sie Firestore, indem Sie das Firebase MCP-Tool firebase_init aufrufen. Dadurch werden unter anderem Firestore-Regeln (wie unten dargestellt) erstellt und Dateien indexiert.
    • Anwendungscode aktualisieren, um Firestore anstelle des lokalen Speichers zu verwenden
    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. Zu Code wechseln Initialisieren Sie Firestore im Terminal (Shift + Ctrl + C), falls Sie die Firestore API im aktuellen Firebase-Projekt noch nie aktiviert haben.
    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 2: 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

  1. Sie können auch mit Firestore chatten, um Ihre Datenbank abzufragen.
    List my Firestore collections.
    Gemini ruft das Firebase-MCP-Tool firestore_list_collections auf.

Mit Firestore chatten

7. 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