Personalizzare lo spazio di lavoro di Firebase Studio

Firebase Studio ti consente di personalizzare il tuo workspace in base alle esigenze specifiche del tuo progetto definendo un unico file di configurazione .idx/dev.nix che descrive:

  • Gli strumenti di sistema che devi poter eseguire (ad esempio dal terminale), come compilatori o altri file binari.
  • Le estensioni che devi installare (ad esempio, il supporto del linguaggio di programmazione).
  • Come devono essere visualizzate le anteprime dell'app (ad esempio, i comandi per eseguire il server web).
  • Variabili di ambiente globali disponibili per i server locali in esecuzione nel tuo workspace.

Consulta il riferimento dev.nix per una descrizione completa di ciò che è disponibile.

Se aggiungi un file .idx/mcp.json (per Gemini in Firebase) o .gemini/settings.json (per Gemini CLI) al tuo progetto, puoi anche connetterti ai server Model Context Protocol (MCP), incluso il server MCP di Firebase.

Nix e Firebase Studio

Firebase Studio utilizza Nix per definire la configurazione dell'ambiente per ogni spazio di lavoro. Nello specifico, Firebase Studio utilizza:

  • Il linguaggio di programmazione Nix per descrivere gli ambienti di lavoro. Nix è un linguaggio di programmazione funzionale. Gli attributi e le librerie di pacchetti che puoi definire nel file dev.nix seguono la sintassi del set di attributi Nix.

  • Gestore di pacchetti Nix per gestire gli strumenti di sistema disponibili per il tuo spazio di lavoro. È simile a gestori di pacchetti specifici del sistema operativo come APT (apt e apt-get), Homebrew (brew) e dpkg.

Poiché gli ambienti Nix sono riproducibili e dichiarativi, nel contesto di Firebase Studio, ciò significa che puoi condividere il file di configurazione Nix come parte del repository Git per assicurarti che tutti coloro che lavorano al tuo progetto abbiano la stessa configurazione dell'ambiente.

Un esempio di base

Il seguente esempio mostra una configurazione di base dell'ambiente che consente le anteprime:

{ 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";
      };
    };
  };
}

Aggiungere strumenti di sistema

Per aggiungere strumenti di sistema all'area di lavoro, come compilatori o programmi CLI per i servizi cloud, trova l'ID pacchetto univoco nel registro dei pacchetti Nix e aggiungilo all'oggetto packages del file dev.nix, con il prefisso "pkgs.":

{ 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
  ];
  ...
}

Questo è diverso dal modo in cui in genere installi i pacchetti di sistema utilizzando gestori di pacchetti specifici del sistema operativo come APT (apt e apt-get), Homebrew (brew) e dpkg. La descrizione dichiarativa esatta dei pacchetti di sistema necessari significa che gli spazi di lavoro Firebase Studio sono più facili da condividere e riprodurre.

Utilizzare i binari dei nodi locali

Proprio come sulla tua macchina locale, i file binari correlati ai pacchetti dei nodi installati localmente (ad esempio, i pacchetti definiti in package.json) possono essere eseguiti in un pannello del terminale richiamandoli con il comando npx.

Per maggiore comodità, se ti trovi in una directory con una cartella node_modules (ad esempio la directory principale di un progetto web), i file binari installati localmente possono essere richiamati direttamente, senza il prefisso npx.

Aggiungere componenti gcloud

Una configurazione predefinita della CLI gcloud per Google Cloud è disponibile per tutti gli spazi di lavoro Firebase Studio.

Se hai bisogno di componenti aggiuntivi, puoi aggiungerli al file dev.nix:

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

Aggiungere estensioni IDE

Puoi installare le estensioni in Firebase Studio utilizzando il registro delle estensioni OpenVSX in due modi:

  • Utilizza il riquadro Estensioni in Firebase Studio per scoprire e installare le estensioni. Questo approccio è ideale per le estensioni specifiche per l'utente, ad esempio:

    • Temi cromatici personalizzati
    • Emulazione dell'editor, ad esempio VSCodeVim
  • Aggiungi estensioni al file dev.nix. Queste estensioni verranno installate automaticamente quando condividi la configurazione dello spazio di lavoro. Questo approccio è ideale per le estensioni specifiche del progetto, ad esempio:

    • Estensioni dei linguaggi di programmazione, inclusi debugger specifici per la lingua
    • Estensioni ufficiali per i servizi cloud utilizzati nel tuo progetto
    • Formattatori di codice

Per il secondo approccio, puoi includere le estensioni IDE nel file dev.nix trovando l'ID estensione completo (nel formato <publisher>.<id>) e aggiungendolo all'oggetto idx.extensions nel seguente modo:

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

Aggiungere servizi comuni

Firebase Studio offre anche una configurazione semplificata per i servizi comuni che potresti dover utilizzare durante lo sviluppo, tra cui:

  • Container
    • Docker (services.docker.*)
  • Messaggistica
    • Emulatore Pub/Sub (services.pubsub.*)
  • Database
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Per informazioni dettagliate sull'attivazione di questi servizi nel tuo spazio di lavoro, consulta le sezioni services.* del dev.nix.

Personalizzare le anteprime

Per informazioni dettagliate su come personalizzare le anteprime delle app, vedi Visualizzare l'anteprima dell'app.

Impostare l'icona dello spazio di lavoro

Puoi scegliere un'icona personalizzata per il tuo spazio di lavoro inserendo un file PNG denominato icon.png all'interno della directory .idx allo stesso livello del file dev.nix. Firebase Studio utilizzerà questa icona per rappresentare il tuo spazio di lavoro nella dashboard.

Poiché questo file può essere archiviato nel controllo del codice sorgente (ad esempio Git), è un buon modo per aiutare tutti coloro che lavorano al tuo progetto a visualizzare la stessa icona per il tuo progetto quando utilizzano Firebase Studio. Poiché il file può variare a seconda dei rami Git, puoi utilizzare questa icona per distinguere visivamente gli spazi di lavoro delle app beta e di produzione e per altri scopi.

Trasformare le personalizzazioni in un modello

Per trasformare la configurazione dell'ambiente in un "ambiente iniziale" che chiunque può utilizzare per creare nuovi progetti, consulta la documentazione relativa alla creazione di modelli personalizzati.

Esplorare tutte le opzioni di personalizzazione

Consulta il riferimento dev.nix per una descrizione dettagliata dello schema di configurazione dell'ambiente.

Scaricare i file

Per scaricare i file come file ZIP:

  • Fai clic con il tasto destro del mouse su una directory nel riquadro Explorer e seleziona Comprimi e scarica.

Per scaricare tutti i contenuti della directory del progetto:

  1. Seleziona File > Apri cartella.

  2. Accetta la directory /home/user predefinita.

  3. Dopo il caricamento dei file, fai clic con il tasto destro del mouse sulla directory di lavoro e seleziona Comprimi e scarica. Se utilizzi App Prototyping agent, la tua directory di lavoro sarà studio. Se utilizzi un modello o un progetto caricato, questo sarà il nome del progetto.

  4. Quando ti viene chiesto di ricreare l'ambiente, fai clic su Annulla.

  5. Una volta completato il download, riapri la directory di lavoro dal menu File per tornare al tuo spazio di lavoro.

Utilizzare i server MCP

I server MCP forniscono strumenti e origini dati aggiuntivi per l'utilizzo di Gemini. Ad esempio, puoi aggiungere il server Firebase MCP per esplorare i tuoi dati in Cloud Firestore utilizzando il linguaggio naturale durante la creazione o il debug dell'applicazione.

Prerequisiti

  • Se il server MCP lo richiede, assicurati di avere un'installazione funzionante di Node.js e npm.

Scegliere un server MCP compatibile

Firebase Studio offre un supporto di base per i server MCP, il che significa che non tutti i server MCP sono compatibili. Quando scegli un server MCP da aggiungere al tuo workspace Firebase Studio, tieni presente quanto segue:

  • Supportato:
    • Server di trasporto di input/output standard (stdio) o Server-Sent Events (SSE)/HTTP streamable che non richiedono forme speciali di autenticazione
    • Strumenti forniti dai server MCP
  • Funzionalità attualmente non supportata:
    • Server che richiedono una Graphic User Interface o una sessione desktop
    • Prompt, campionamento o altre risorse fornite dai server MCP

Aggiungere un server MCP

  1. In Explorer (Ctrl+Shift+E), modifica o crea il file di configurazione MCP.

    • Gemini nella chat Firebase utilizza .idx/mcp.json.

    • Gemini CLI utilizza .gemini/settings.json.

    Se il file non esiste ancora, crealo facendo clic con il tasto destro del mouse sulla directory principale e selezionando Nuovo file. Crea o modifica entrambi i file per utilizzare il server MCP in Gemini in Firebase e Gemini CLI.

  2. Aggiungi la configurazione del server al contenuto del file. Ad esempio, per aggiungere il server MCP Firebase, inserisci:

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

    Questo file di configurazione indica a Gemini quale server MCP deve utilizzare. In questo esempio, abbiamo aggiunto un server chiamato firebase che utilizzerà il comando npx per installare ed eseguire firebase-tools@latest. Altri server MCP richiedono configurazioni diverse, ma seguono lo stesso formato generale.

  3. Nel terminale (Shift+Ctrl+C), esegui i comandi necessari per completare l'installazione. Ad esempio, per utilizzare il server Firebase MCP, inserisci il seguente comando per accedere al tuo account:

    firebase login --no-localhost
    

    Segui le istruzioni nel terminale per autorizzare la sessione. Alcuni strumenti richiedono un progetto Firebase collegato. Puoi utilizzare il server Firebase MCP per creare un progetto oppure puoi eseguire il seguente comando per inizializzare un progetto Firebase:

    firebase init
    

    Viene creato un file firebase.json nella directory principale.

  4. Ricrea il tuo spazio di lavoro per completare la configurazione:

    1. Apri la tavolozza dei comandi (Shift+Ctrl+P).

    2. Inserisci Firebase Studio: Rebuild Environment.

Utilizzare gli strumenti MCP

Dopo aver installato il server MCP che vuoi utilizzare, gli strumenti o i dati che fornisce sono disponibili in:

  • Interfaccia a riga di comando Gemini
  • Gemini nella chat di Firebase quando si utilizzano le modalità Agente e Agente (esecuzione automatica)
  • App Prototyping agent

Ad esempio, se aggiungi il server Firebase MCP, puoi chiedere a Gemini di recuperare la configurazione dell'SDK per il progetto corrente, recuperare i dati archiviati in Cloud Firestore e Realtime Database, aiutarti a configurare i servizi Firebase e altro ancora.

Risolvere i problemi dei server MCP

Se un server MCP non funziona come previsto, apri i log Gemini per verificare la presenza di errori:

  1. In Output (Shift+Ctrl+U), fai clic sul menu a discesa e seleziona Gemini.

  2. Controlla i messaggi che iniziano con un tag [MCPManager]. Questi log contengono informazioni sui server MCP configurati, nonché eventuali messaggi di errore. Utilizza queste informazioni per risolvere i problemi di configurazione. Quando un server MCP si connette correttamente, viene visualizzato un elenco degli strumenti aggiunti.

Se l'installazione o la connessione di un server MCP non riesce, prova a ricreare lo spazio di lavoro:

  1. Apri la tavolozza dei comandi (Shift+Ctrl+P).

  2. Inserisci Firebase Studio: Rebuild Environment.

  3. Attendi la ricostruzione dello spazio di lavoro, quindi riprova a utilizzare il server MCP scelto.

Se il server MCP si connette, ma Gemini non utilizza gli strumenti che fornisce:

Passaggi successivi