Firebase Studio-Arbeitsbereich anpassen

Mit Firebase Studio können Sie Ihren Arbeitsbereich an die individuellen Anforderungen Ihres Projekts anpassen, indem Sie eine einzelne .idx/dev.nix-Konfigurationsdatei definieren, die Folgendes beschreibt:

  • Die Systemtools, die Sie ausführen können müssen (z. B. über das Terminal), z. B. Compiler oder andere Binärdateien.
  • Die Erweiterungen, die Sie installiert haben müssen (z. B. Unterstützung für Programmiersprachen).
  • Wie Ihre App-Vorschauen angezeigt werden sollen (z. B. die Befehle zum Ausführen Ihres Webservers).
  • Globale Umgebungsvariablen, die für lokale Server verfügbar sind, die in Ihrem Arbeitsbereich ausgeführt werden.

Eine vollständige Beschreibung der verfügbaren Optionen finden Sie in der dev.nix-Referenz.

Wenn Sie Ihrem Projekt eine .idx/mcp.json-Datei (für Gemini in Firebase) oder eine .gemini/settings.json-Datei (für Gemini CLI) hinzufügen, können Sie auch eine Verbindung zu MCP-Servern (Model Context Protocol) herstellen, einschließlich des Firebase-MCP-Servers.

Nix und Firebase Studio

Firebase Studio verwendet Nix, um die Umgebungskonfiguration für jeden Arbeitsbereich zu definieren. Konkret verwendet Firebase Studio:

  • Die Programmiersprache Nix zum Beschreiben von Arbeitsbereichsumgebungen. Nix ist eine funktionale Programmiersprache. Die Attribute und Paketbibliotheken, die Sie in der Datei dev.nix definieren können, folgen der Syntax für Nix-Attributsätze.

  • Der Nix-Paketmanager, um die für Ihren Arbeitsbereich verfügbaren Systemtools zu verwalten. Dies ähnelt betriebssystemspezifischen Paketmanagern wie APT (apt und apt-get), Homebrew (brew) und dpkg.

Da Nix-Umgebungen reproduzierbar und deklarativ sind, können Sie im Kontext von Firebase Studio Ihre Nix-Konfigurationsdatei als Teil Ihres Git-Repositorys freigeben, um sicherzustellen, dass jeder, der an Ihrem Projekt arbeitet, dieselbe Umgebungskonfiguration hat.

Einfaches Beispiel

Das folgende Beispiel zeigt eine einfache Umgebungskonfiguration, die Vorschauen ermöglicht:

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

System-Tools hinzufügen

Wenn Sie Ihrem Arbeitsbereich Systemtools wie Compiler oder CLI-Programme für Cloud-Dienste hinzufügen möchten, suchen Sie in der Nix-Paketregistrierung nach der eindeutigen Paket-ID und fügen Sie sie dem packages-Objekt Ihrer dev.nix-Datei hinzu. Stellen Sie dabei `pkgs.:` voran.

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  ...
}

Das unterscheidet sich von der üblichen Installation von Systempaketen mit betriebssystemspezifischen Paketmanagern wie APT (apt und apt-get), Homebrew (brew) und dpkg. Wenn Sie deklarativ beschreiben, welche Systempakete genau benötigt werden, lassen sich Firebase Studio-Arbeitsbereiche einfacher teilen und reproduzieren.

Lokale Knotenbinärdateien verwenden

Genau wie auf Ihrem lokalen Computer können Binärdateien, die sich auf lokal installierte Knotenpakete beziehen (z. B. Pakete, die in Ihrer package.json definiert sind), in einem Terminalfenster ausgeführt werden, indem Sie sie mit dem npx-Befehl aufrufen.

Wenn Sie sich in einem Verzeichnis mit einem node_modules-Ordner befinden (z. B. im Stammverzeichnis eines Webprojekts), können lokal installierte Binärdateien direkt ohne das Präfix npx aufgerufen werden.

gcloud-Komponenten hinzufügen

Eine Standardkonfiguration der gcloud-CLI für Google Cloud ist für alle Firebase Studio-Arbeitsbereiche verfügbar.

Wenn Sie zusätzliche Komponenten benötigen, können Sie sie in Ihre dev.nix-Datei einfügen:

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

IDE-Erweiterungen hinzufügen

Sie haben zwei Möglichkeiten, Erweiterungen in Firebase Studio über die OpenVSX-Erweiterungsregistrierung zu installieren:

  • Im Bereich Erweiterungen in Firebase Studio können Sie Erweiterungen finden und installieren. Dieser Ansatz eignet sich am besten für nutzerspezifische Erweiterungen wie:

    • Benutzerdefinierte Farbschemas
    • Editor-Emulation wie VSCodeVim

  • Fügen Sie Ihrer Datei dev.nix Erweiterungen hinzu. Diese Erweiterungen werden automatisch installiert, wenn Sie die Konfiguration Ihres Arbeitsbereichs freigeben. Dieser Ansatz eignet sich am besten für projektspezifische Erweiterungen, z. B.:

    • Erweiterungen für Programmiersprachen, einschließlich sprachspezifischer Debugger
    • Offizielle Erweiterungen für Cloud-Dienste, die in Ihrem Projekt verwendet werden
    • Code-Formatierer

Für den zweiten Ansatz können Sie IDE-Erweiterungen in Ihre dev.nix-Datei einfügen. Suchen Sie dazu die vollständig qualifizierte Erweiterungs-ID (im Format <publisher>.<id>) und fügen Sie sie dem idx.extensions-Objekt hinzu:

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

Allgemeine Dienste hinzufügen

Firebase Studio bietet außerdem eine vereinfachte Einrichtung und Konfiguration für gängige Dienste, die Sie während der Entwicklung benötigen, darunter:

  • Container
    • Docker (services.docker.*)
  • Messaging
    • Pub/Sub-Emulator (services.pubsub.*)
  • Datenbanken
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Weitere Informationen zum Aktivieren dieser Dienste in Ihrem Arbeitsbereich finden Sie in den services.*-Abschnitten der dev.nix-Referenz.

Vorschaubilder anpassen

Weitere Informationen zum Anpassen von App-Vorschauen finden Sie unter App-Vorschau.

Symbol für Arbeitsbereich festlegen

Sie können ein benutzerdefiniertes Symbol für Ihren Arbeitsbereich auswählen, indem Sie eine PNG-Datei mit dem Namen icon.png in das Verzeichnis .idx auf derselben Ebene wie Ihre dev.nix-Datei einfügen. Firebase Studio verwendet dieses Symbol dann, um Ihren Arbeitsbereich in Ihrem Dashboard darzustellen.

Da diese Datei in die Quellcodeverwaltung (z. B. Git) eingecheckt werden kann, ist dies eine gute Möglichkeit, dafür zu sorgen, dass alle, die an Ihrem Projekt arbeiten, dasselbe Symbol für Ihr Projekt sehen, wenn sie Firebase Studio verwenden. Da sich die Datei je nach Git-Branch unterscheiden kann, können Sie dieses Symbol verwenden, um Beta- und Produktions-App-Arbeitsbereiche und andere Elemente visuell zu unterscheiden.

Anpassungen in eine Vorlage umwandeln

Informationen dazu, wie Sie Ihre Umgebungskonfiguration in eine „Starter-Umgebung“ umwandeln, die jeder zum Erstellen neuer Projekte verwenden kann, finden Sie in der Dokumentation unter Benutzerdefinierte Vorlagen erstellen.

Alle Anpassungsoptionen ansehen

Eine detaillierte Beschreibung des Schemas für die Umgebungskonfiguration finden Sie in der dev.nix-Referenz.

Dateien herunterladen

So laden Sie Ihre Dateien als ZIP-Datei herunter:

  • Klicken Sie im Bereich „Explorer“ mit der rechten Maustaste auf ein beliebiges Verzeichnis und wählen Sie Zip and Download (Zippen und herunterladen) aus.

So laden Sie alle Inhalte in Ihrem Projektverzeichnis herunter:

  1. Wählen Sie Datei > Ordner öffnen aus.

  2. Übernehmen Sie das Standardverzeichnis /home/user.

  3. Klicken Sie nach dem Laden der Dateien mit der rechten Maustaste auf Ihr Arbeitsverzeichnis und wählen Sie Zippen und herunterladen aus. Wenn Sie die App Prototyping agent verwenden, ist Ihr Arbeitsverzeichnis studio. Wenn Sie eine Vorlage oder ein hochgeladenes Projekt verwenden, ist dies Ihr Projektname.

  4. Wenn Sie aufgefordert werden, die Umgebung neu zu erstellen, klicken Sie auf Abbrechen.

  5. Wenn der Download abgeschlossen ist, öffnen Sie Ihr Arbeitsverzeichnis noch einmal über das Menü Datei, um zu Ihrem Arbeitsbereich zurückzukehren.

MCP-Server verwenden

MCP-Server bieten zusätzliche Tools und Datenquellen für Gemini. Sie können beispielsweise den Firebase MCP-Server hinzufügen, um Ihre Daten in Cloud Firestore in natürlicher Sprache zu analysieren, während Sie Ihre Anwendung entwickeln oder debuggen.

Vorbereitung

  • Wenn der MCP-Server dies erfordert, müssen Sie Node.js und npm installiert haben.

Kompatiblen MCP-Server auswählen

Firebase Studio bietet grundlegende Unterstützung für MCP-Server. Das bedeutet, dass nicht alle MCP-Server kompatibel sind. Beachten Sie bei der Auswahl eines MCP-Servers, den Sie Ihrem Firebase Studio-Arbeitsbereich hinzufügen möchten, Folgendes:

  • Unterstützt:
    • Standard-Ein-/Ausgabe (stdio) oder Server-Sent Events (SSE)/Streamable HTTP-Transportserver, für die keine speziellen Formen der Authentifizierung erforderlich sind
    • Von MCP-Servern bereitgestellte Tools
  • Derzeit nicht unterstützt:
    • Server, für die eine grafische Benutzeroberfläche oder eine Desktopsitzung erforderlich ist
    • Von MCP-Servern bereitgestellte Prompts, Stichproben oder andere Ressourcen

MCP-Server hinzufügen

  1. Bearbeiten oder erstellen Sie im Explorer (Ctrl+Shift+E) die MCP-Konfigurationsdatei.

    • Gemini in Firebase-Chats verwendet .idx/mcp.json.

    • Gemini CLI verwendet .gemini/settings.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. Erstellen oder bearbeiten Sie beide Dateien, um den MCP-Server in Gemini in Firebase und Gemini CLI zu verwenden.

  2. Fügen Sie der Datei die Serverkonfiguration hinzu. Wenn Sie beispielsweise den Firebase MCP-Server hinzufügen möchten, geben Sie Folgendes ein:

    {
  "mcpServers": {
   "firebase": {
     "command": "npx",
     "args": [
       "-y",
       "firebase-tools@latest",
       "experimental:mcp"
      ]
    }
  }
}

    Diese Konfigurationsdatei weist Gemini an, welchen MCP-Server es verwenden soll. In diesem Beispiel haben wir einen Server namens firebase hinzugefügt, der den Befehl npx verwendet, um firebase-tools@latest zu installieren und auszuführen. Für andere MCP-Server sind andere Konfigurationen erforderlich, aber sie folgen dem gleichen allgemeinen Format.

  3. Führen Sie im Terminal (Shift+Ctrl+C) alle erforderlichen Befehle aus, um die Installation abzuschließen. Wenn Sie beispielsweise den Firebase MCP-Server verwenden möchten, geben Sie den folgenden Befehl ein, um sich in Ihrem Konto anzumelden:

    firebase login --no-localhost

    Folgen Sie der Anleitung im Terminal, um die Sitzung zu autorisieren. Für einige Tools ist ein verknüpftes Firebase-Projekt erforderlich. Sie können den Firebase MCP-Server verwenden, um ein Projekt zu erstellen, oder Sie können den folgenden Befehl ausführen, um ein Firebase-Projekt zu initialisieren:

    firebase init

    Dadurch wird eine firebase.json-Datei in Ihrem Stammverzeichnis erstellt.

  4. So schließen Sie die Einrichtung ab:

    1. Öffnen Sie die Befehlspalette (Shift+Ctrl+P).

    2. Geben Sie Firebase Studio: Rebuild Environment ein.

MCP-Tools verwenden

Nach der Installation des gewünschten MCP-Servers sind die von ihm bereitgestellten Tools oder Daten in folgenden Bereichen verfügbar:

  • Gemini CLI
  • Gemini im Firebase-Chat bei Verwendung der Modi „Agent“ und „Agent (Auto-run)“
  • die App Prototyping agent

Wenn Sie beispielsweise den Firebase MCP-Server hinzufügen, können Sie Gemini bitten, die SDK-Konfiguration für das aktuelle Projekt abzurufen, Daten aus Cloud Firestore und Realtime Database abzurufen und Sie bei der Einrichtung von Firebase-Diensten zu unterstützen. Weitere Informationen

Fehlerbehebung bei MCP-Servern

Wenn ein MCP-Server nicht wie erwartet funktioniert, öffnen Sie die Gemini-Logs, um nach Fehlern zu suchen:

  1. Klicken Sie unter „Ausgabe“ (Shift+Ctrl+U) auf das Drop-down-Menü und wählen Sie Gemini aus.

  2. Suchen Sie nach Nachrichten, die mit dem Tag [MCPManager] beginnen. Diese Logs enthalten Informationen dazu, welche MCP-Server eingerichtet wurden, sowie alle Fehlermeldungen. Anhand dieser Informationen können Sie Fehler in Ihrer Konfiguration beheben. Wenn eine Verbindung zu einem MCP-Server hergestellt wurde, wird eine Liste der von ihm hinzugefügten Tools angezeigt.

Wenn ein MCP-Server nicht installiert oder keine Verbindung hergestellt werden kann, versuchen Sie, den Arbeitsbereich neu zu erstellen:

  1. Öffnen Sie die Befehlspalette (Shift+Ctrl+P).

  2. Geben Sie Firebase Studio: Rebuild Environment ein.

  3. Warten Sie, bis Ihr Arbeitsbereich neu erstellt wurde, und versuchen Sie dann noch einmal, den ausgewählten MCP-Server zu verwenden.

Wenn der MCP-Server eine Verbindung herstellt, Gemini die bereitgestellten Tools aber nicht verwendet:

  • Neue Gemini Chat-Sitzung starten

  • Wenn Gemini die Aufgabe ohne ein MCP-Tool erledigen kann, wird möglicherweise eine andere Methode verwendet. Wenn Sie ein bestimmtes Tool verwenden möchten, nennen Sie es in Ihrem Prompt. Sie könnten beispielsweise sagen: „Verwende firebase_get_sdk_config, um die SDK-Konfiguration für das aktuelle Projekt abzurufen.“

  • Am Google-Entwicklerprogramm teilnehmen

Nächste Schritte