Semplifica la configurazione di Firebase per le app web utilizzando strumenti di sviluppo basati sull'AI come Antigravity, Claude Code, Codex e Cursor. Utilizzando le abilità dell'agente Firebase in combinazione con la CLI Firebase e il server Firebase MCP, puoi trasformare il tuo agente di programmazione AI in un esperto Firebase specializzato in grado di scrivere codice, configurare Firebase Security Rules e gestire risorse live.
Questa guida illustra l'utilizzo di un agente di codifica AI per configurare Cloud Firestore, Authentication e Firebase Hosting per un'app web. Torna a trovarci presto per informazioni su app per iOS, Android e Flutter.
Perché utilizzare le competenze e gli strumenti dell'agente Firebase?
I modelli di AI generica spesso hanno difficoltà con configurazioni di progetti specifiche o informazioni obsolete. Questo toolkit colma questa lacuna:
- Competenze dell'agente Firebase: le competenze forniscono all'agente di programmazione esperienza nel dominio. Forniscono documentazione aggiornata e flussi di lavoro ottimali in modo che l'agente conosca il modo corretto e consigliato da Firebase per strutturare l'architettura.
- Server MCP Firebase: il server MCP fornisce all'agente di codifica contesto e accesso. Stabilisce un protocollo standard per consentire all'agente di esaminare in modo programmatico le risorse, i file locali e le configurazioni del progetto attivo.
- Firebase CLI: l'interfaccia a riga di comando offre all'agente di codifica potere di azione. È lo strumento di esecuzione che l'agente utilizza per eseguire attività complesse come l'inizializzazione dei database, la gestione delle configurazioni di autenticazione degli utenti e il deployment del codice per tuo conto.
L'utilizzo delle competenze dell'agente Firebase insieme all'interfaccia a riga di comando Firebase e al server Firebase MCP offre all'agente di programmazione AI ulteriori funzionalità:
- Passa all'azione: fai molto di più che scrivere codice. Il tuo agente può inizializzare i servizi, gestire gli utenti Authentication, eseguire il deployment di nuovi Firebase Security Rules e lavorare direttamente con i tuoi dati Cloud Firestore.
- Rimani al passo: utilizza prompt ufficiali e consapevoli della versione per guidare l'agente durante le attività di configurazione.
- Migliorare l'accuratezza: accedi all'ambiente e agli schemi del tuo progetto per fornire un aiuto più pertinente e preciso.
- Ridurre i costi dei token: le competenze dell'agente caricano la documentazione dettagliata solo quando un'attività specifica lo richiede, il che riduce al minimo l'overhead della sessione.
Con quali servizi Firebase possono aiutarti le competenze e gli strumenti dell'agente?
Questa guida si concentra principalmente su come le competenze dell'agente, la CLI Firebase e il server MCP Firebase funzionano insieme per aiutarti a configurare rapidamente questi servizi e queste funzionalità:
- Cloud Firestore: esegui il provisioning di un database NoSQL.
- Authentication: configura l'accesso sicuro degli utenti.
- Firebase Security Rules: genera e perfeziona Security Rules per la tua app.
- Firebase Hosting: configura il progetto per il deployment dell'app web statica.
Per un elenco completo di ciò che è disponibile, consulta l'elenco completo delle competenze dell'agente Firebase.
Flusso di lavoro generale
I passaggi seguenti descrivono un flusso di lavoro generalizzato per l'utilizzo delle competenze dell'agente Firebase per configurare e utilizzare i servizi Firebase in un'app web. Dietro le quinte, le competenze dell'agente utilizzano la CLI Firebase e il server Firebase MCP per completare queste attività.
Passaggio 1: installa le skill dell'agente Firebase
Nella maggior parte dei casi, puoi installare le skill dell'agente Firebase nell'editor che preferisci con un unico prompt:
Antigravity
Le skill dell'agente Firebase sono incluse in uno dei pacchetti di integrazione Crea con Google per Antigravity. Puoi attivare questo bundle per l'accesso a livello globale in due punti:
- Durante l'onboarding: seleziona la casella di controllo per lo stack Firebase.
- Nelle impostazioni: vai a Impostazioni > Personalizzazioni. Nella sezione Build with Google Plugins (Crea con i plug-in Google), fai clic su Personalizza, poi su Scarica per l'integrazione di Firebase.
Se preferisci l'accesso a livello di progetto, esegui questo comando nella directory del progetto:
npx skills add firebase/agent-skills --agent=antigravity
Claude Code
claude plugin marketplace add firebase/agent-skills
claude plugin install firebase@firebase
Codex
npx skills add firebase/agent-skills --agent=codex
Cursore
Puoi installare le skill dell'agente Firebase direttamente dal Cursor Marketplace o eseguendo questo comando nel terminale:
npx skills add firebase/agent-skills --agent=cursor
Altri agenti
npx skills add firebase/agent-skills
Passaggio 2: connettiti al server MCP Firebase
Sebbene molte competenze dell'agente Firebase utilizzino la CLI Firebase per le attività, è consigliabile connettere l'agente di codifica AI al server MCP di Firebase. Questa connessione migliora la capacità dell'agente di interagire con l'ambiente Firebase, fornendo un'integrazione e un accesso più profondi.
Metodo assistito dall'AI
Nella maggior parte dei casi, puoi chiedere al tuo agente di programmazione AI di configurare il server Firebase MCP. Tuttavia, se ha difficoltà o non vedi il server MCP Firebase nell'elenco, passa al metodo manuale.
Metodo manuale
Antigravity
Per configurare Antigravity in modo da utilizzare il server MCP Firebase:
- In Antigravity, fai clic sul menu nel riquadro Agente > Server MCP.
- Seleziona Firebase > Installa.
In questo modo, il file mcp_config.json viene aggiornato automaticamente. Puoi visualizzarlo
facendo clic su Gestisci server MCP nella parte superiore del riquadro MCP Store >
Visualizza configurazione non elaborata, con i seguenti contenuti:
{
"mcpServers": {
"firebase-mcp-server": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
}
Firebase Studio
Per configurare Firebase Studio in modo che utilizzi il server Firebase MCP, modifica o
crea il file di configurazione: .idx/mcp.json.
Se il file non esiste ancora, crealo facendo clic con il tasto destro del mouse sulla directory principale e selezionando Nuovo file. Aggiungi i seguenti contenuti al file:
{
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
}
Claude
Claude Code
Opzione 1: installa tramite plug-in (consigliata)
Il modo più semplice per configurare il server Firebase MCP in Claude Code è installare il plug-in Firebase ufficiale:
Aggiungi il marketplace Firebase per i plug-in Claude:
claude plugin marketplace add firebase/firebase-toolsInstalla il plug-in Claude per Firebase:
claude plugin install firebase@firebaseVerifica l'installazione:
claude plugin marketplace list
Opzione 2: configura manualmente il server MCP
In alternativa, puoi configurare manualmente il server Firebase MCP:
Esegui questo comando nella cartella dell'app:
claude mcp add firebase npx -- -y firebase-tools@latest mcpVerifica l'installazione:
claude mcp listDovrebbe mostrare:
firebase: npx -y firebase-tools@latest mcp - ✓ Connected
Claude Desktop
Per configurare Claude Desktop in modo che utilizzi il server MCP Firebase, modifica il file claude_desktop_config.json. Puoi aprire o creare questo file dal menu
Claude > Impostazioni. Seleziona la scheda Sviluppatore, quindi fai clic su
Modifica configurazione.
{
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
}
Cline
Per configurare Cline in modo che utilizzi il server MCP Firebase, modifica il file
cline_mcp_settings.json. Puoi aprire o creare questo file facendo clic sull'icona
dei server MCP nella parte superiore del riquadro Client, quindi facendo clic sul pulsante
Configura server MCP.
{
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"],
"disabled": false
}
}
}
Cursore
Opzione 1: plug-in Marketplace (consigliato)
Installa il plug-in Firebase dal Cursor Marketplace. Questa operazione configura automaticamente il server MCP e fornisce l'accesso alle skill dell'agente Firebase.
Opzione 2: configurazione MCP con un solo clic
Se vuoi aggiungere solo il server MCP alla configurazione globale, fai clic sul pulsante seguente:
Opzione 3: configurazione manuale
Se preferisci configurare il server per un progetto specifico o vuoi modificare
manualmente le impostazioni, aggiorna il file mcp.json:
- Per un progetto specifico, modifica
.cursor/mcp.json - Per tutti i progetti (globale), modifica
~/.cursor/mcp.json
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
VS Code Copilot
Per configurare un singolo progetto, modifica il file .vscode/mcp.json nel tuo
workspace:
"servers": {
"firebase": {
"type": "stdio",
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
Per rendere disponibile il server in ogni progetto che apri, modifica le impostazioni utente, ad esempio:
"mcp": {
"servers": {
"firebase": {
"type": "stdio",
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
}
Windsurf
Per configurare Windsurf Editor, modifica il file
~/.codeium/windsurf/mcp_config.json:
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
Passaggio 3: inizializza i servizi Firebase
Una volta configurate le competenze e gli strumenti dell'agente, puoi utilizzare il linguaggio naturale per fare in modo che l'agente di programmazione AI configuri Cloud Firestore, Authentication e Firebase Hosting.
Chiedi al tuo agente di configurare un servizio. Ad esempio, puoi utilizzare prompt come questi:
- Configura Cloud Firestore come database per questa app.
- Crea una pagina di accesso utilizzando Authentication e aggiorna Security Rules per assicurarti che solo gli utenti autorizzati possano leggere e scrivere i propri dati.
- Configura Firebase Hosting ed esegui il deployment dell'app in produzione.
Esamina le informazioni e segui i passaggi guidati che l'agente potrebbe fornirti, ad esempio:
- Piani: l'agente propone una strategia basata sulla tua codebase esistente.
- Connessioni: il tuo agente collega il codice locale a un progetto Firebase esistente o ti aiuta a creare un nuovo progetto Firebase.
- Inizializza le risorse: l'agente aggiunge le librerie e la configurazione Firebase richieste al codebase.
- File di aggiornamento: l'agente crea e aggiorna tutti i file necessari,
come
firestore.rules(per definire chi può leggere, scrivere o eseguire query sui dati all'interno del database) ofirebase.json(per comunicare alla CLI Firebase quali servizi distribuire e come configurarli). - Esegue: l'agente ti guida attraverso ulteriori passaggi di configurazione o deployment.
Suggerimenti generali per la creazione di prompt per un agente di programmazione AI
Per ottenere il massimo dal tuo agente di codifica AI, soprattutto quando lavori con integrazioni sfaccettate come Firebase, considera l'interazione come una collaborazione piuttosto che un comando singolo.
Fornisci informazioni specifiche e un contesto
Anche se il server Firebase MCP fornisce all'agente un contesto significativo sul tuo progetto, i prompt in linguaggio naturale chiari e specifici producono i risultati migliori. Evita richieste vaghe.
- Vago: "Correggi l'errore del database".
- Specifico: "Ricevo l'errore "Autorizzazione negata" quando tento di scrivere nella raccolta "users" in Cloud Firestore. Rivedi il mio
firestore.rulese suggerisci una correzione che consenta agli utenti autenticati di scrivere nel proprio documento".
Esegui iterazioni e perfeziona
Gli agenti di programmazione AI raramente generano codice perfetto al primo tentativo per attività complesse. Se una risposta non è del tutto corretta, continua la conversazione:
- Fornisci i messaggi di errore: incolla eventuali errori del terminale o log della console nella chat.
- Richiedi modifiche: "Questo codice utilizza l'SDK v8 precedente. Riscrivilo utilizzando l'SDK modulare Firebase v9".
- Richiedi spiegazioni: "Spiega in che modo questi Firebase Security Rules proteggono i dati degli utenti".
Verifica prima dell'esecuzione
Gli agenti di programmazione AI sono potenti, ma possono commettere errori o "avere allucinazioni" (inventare funzioni o servizi con nomi errati).
- Rivedi il codice: leggi sempre il codice generato, in particolare i file di configurazione (come
firebase.json) e Firebase Security Rules, prima di eseguire il deployment in produzione. - Testa localmente: quando possibile, chiedi all'agente di aiutarti a testare le modifiche localmente prima di pubblicarle.
Utilizzare la connessione MCP
Poiché il server MCP di Firebase offre all'agente visibilità diretta sulla struttura del progetto, puoi fare riferimento a file specifici per ricevere consigli di implementazione personalizzati.
- Esempio: "Guarda il mio file
src/web/index.htmle mostrami dove aggiungere lo script di inizializzazione Firebase standard".
Passaggi successivi
- Sfoglia un elenco completo di tutte le competenze dell'agente Firebase disponibili.
- Sfoglia un elenco completo di tutti i prompt, gli strumenti e le risorse disponibili forniti dal server Firebase MCP.
- Scopri di più sugli strumenti forniti dall'interfaccia a riga di comando Firebase.