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
eapt-get
), Homebrew (brew
) edpkg
.
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.*
)
- Docker (
- Messaggistica
- Emulatore Pub/Sub (
services.pubsub.*
)
- Emulatore Pub/Sub (
- Database
- MySQL (
services.mysql.*
) - Postgres (
services.postgres.*
) - Redis (
services.redis.*
) - Spanner (
services.spanner.*
)
- MySQL (
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:
Seleziona File > Apri cartella.
Accetta la directory
/home/user
predefinita.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.Quando ti viene chiesto di ricreare l'ambiente, fai clic su Annulla.
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
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.
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 comandonpx
per installare ed eseguirefirebase-tools@latest
. Altri server MCP richiedono configurazioni diverse, ma seguono lo stesso formato generale.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.Ricrea il tuo spazio di lavoro per completare la configurazione:
Apri la tavolozza dei comandi (
Shift+Ctrl+P
).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:
In Output (
Shift+Ctrl+U
), fai clic sul menu a discesa e seleziona Gemini.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:
Apri la tavolozza dei comandi (
Shift+Ctrl+P
).Inserisci Firebase Studio: Rebuild Environment.
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:
Se Gemini può svolgere l'attività senza utilizzare uno strumento MCP, potrebbe tentare un metodo diverso. Se vuoi utilizzare uno strumento specifico, prova a nominarlo nel prompt. Ad esempio, potresti dire "Utilizza
firebase_get_sdk_config
per ottenere la configurazione dell'SDK per il progetto corrente".
Passaggi successivi
- Esegui l'integrazione con Firebase e i servizi Google.
- Creare modelli personalizzati.
- Aggiungi un pulsante Apri in Firebase Studio.
- Scopri di più sugli Firebase Studio spazi di lavoro.
- Scopri di più sul server Firebase MCP.
- Completa il codelab del server MCP di Firebase Studio.