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 skill dell'agente Firebase insieme all'Firebase CLI e al server MCP di Firebase, puoi trasformare il tuo agente di programmazione AI in un esperto di Firebase specializzato in grado di scrivere codice, configurare Firebase Security Rules e gestire le risorse live.
Questa guida spiega come utilizzare un agente di programmazione AI per configurare Cloud Firestore, Firebase Authentication, e Firebase Hosting per un'app web. A breve saranno disponibili informazioni sulle app per iOS, Android e Flutter.
Perché utilizzare le skill e gli strumenti dell'agente Firebase?
Gli agenti di programmazione AI spesso hanno difficoltà con configurazioni di progetti specifici o informazioni obsolete. Questo toolkit colma questa lacuna combinando istruzioni specializzate (skill dell'agente) con due tipi complementari di strumenti di esecuzione dell'agente (interfaccia a riga di comando e server MCP):
- Skill dell'agente Firebase: forniscono all' agente di programmazione competenze e flussi di lavoro specifici del dominio. In qualità di livello di istruzioni, le skill guidano l'agente sulle best practice per l'utilizzo di Firebase, inclusa la scrittura di codice. Le skill insegnano anche all'agente quando e come utilizzare la Firebase CLI e il server MCP di Firebase.
- Strumenti di esecuzione dell'agente:
- Firebase CLI (strumenti a riga di comando): fornisce strumenti per il ciclo di vita del progetto e le attività dell'ambiente. L'agente può eseguire comandi dell'interfaccia a riga di comando in un ambiente terminale per configurare i servizi in un progetto Firebase, eseguire il deployment di siti completi o risorse di backend, avviare emulatori locali e altro ancora.
- Server MCP di Firebase (strumenti e risorse programmatiche): fornisce strumenti per l'ispezione in tempo reale e le operazioni sui dati. Tramite chiamate di strumenti strutturate, l'agente può eseguire query e aggiornare programmaticamente Cloud Firestore documenti, gestire Firebase Authentication utenti, convalidare Security Rules, estrarre log o documentazione live direttamente nel contesto, e altro ancora.
L'utilizzo delle skill dell'agente Firebase insieme alla Firebase CLI e al server MCP di Firebase offre al tuo agente di programmazione AI funzionalità aggiuntive:
- Passa all'azione: non solo scrivere codice. L'agente può inizializzare i servizi, gestire gli utenti Firebase Authentication, eseguire il deployment di nuove Firebase Security Rules, e lavorare direttamente con i dati Cloud Firestore.
- Rimanere aggiornato: utilizza prompt ufficiali e sensibili alla versione per guidare l'agente nelle attività di configurazione.
- Migliorare la precisione: accedi all'ambiente e agli schemi del progetto per fornire un aiuto più pertinente e accurato.
- Ridurre i costi dei token: le skill dell'agente caricano la documentazione dettagliata solo quando è necessaria per un'attività specifica, il che riduce al minimo il sovraccarico della sessione.
Servizi Firebase applicabili
Questa guida si concentra principalmente su come le skill dell'agente, la Firebase CLI e il server MCP di Firebase funzionano insieme per aiutarti a configurare rapidamente questi servizi e funzionalità:
- Cloud Firestore: provisioning di un database NoSQL.
- Firebase Authentication: configurazione dell'accesso sicuro degli utenti.
- Firebase Security Rules: generazione e perfezionamento di Security Rules per l'app.
- Firebase Hosting: configurazione del progetto per il deployment di app web statiche.
Per un elenco completo di ciò che è disponibile, consulta l' elenco completo delle skill dell'agente Firebase.
Workflow generale
I passaggi seguenti descrivono un workflow generalizzato per l'utilizzo delle skill dell'agente Firebase per configurare e utilizzare i servizi Firebase in un'**app web**. Dietro le quinte, le skill dell'agente utilizzano l'interfaccia a riga di comando di FirebaseFirebase e il server MCP di Firebase per completare queste attività.
Passaggio 1: installa le skill dell'agente Firebase
Nella maggior parte dei casi, puoi installare le skill dell'agente Firebase nel tuo editor preferito con un solo prompt:
Antigravity
Opzione 1: accesso a livello globale
Le skill dell'agente Firebase sono incluse nel plug-in Firebase in the Antigravity Marketplace (e come bundle di integrazione Build with Google). Installa il plug-in utilizzando una delle seguenti opzioni:
- Da Antigravity Marketplace: fai clic su Personalizzazioni, seleziona la scheda Marketplace e poi fai clic su + nella scheda del plug-in Firebase.
- Nell'Antigravity CLI interfaccia a riga di comando di Antigravity: esegui
/plugin install firebase@agent-marketplace(oppure esegui/plugine installa Firebase dalla scheda Scopri). I plug-in installati in Antigravity vengono sincronizzati automaticamente anche con Antigravity CLI. - Durante l'onboarding: seleziona la casella di controllo per lo stack Firebase.
Opzione 2: accesso a livello di progetto
Esegui questo comando nella directory del progetto:
npx skills add firebase/agent-skills --agent=antigravity
Claude Code
Esegui questi comandi nel terminale:
claude plugin marketplace add firebase/agent-skills
claude plugin install firebase@firebase
Codex
Opzione 1: terminale Codex
Esegui questi comandi nel terminale:
codex plugin marketplace add firebase/agent-skills codex plugin add firebase@firebaseOpzione 2: app Codex
Completa le seguenti attività una sola volta:
Registrati tramite il terminale:
codex plugin marketplace add firebase/agent-skillsRiavvia completamente l'app Codex.
Apri Plug-in.
Seleziona il marketplace/l'origine Firebase.
Apri Firebase e fai clic su + Installa.
Inizia una nuova attività.
Digita
@Firebaseper selezionare il plug-in o chiedi a Codex di eseguire un'attività Firebase.
Cursor
Opzione 1: installa il plug-in direttamente dal Cursor Marketplace.
Opzione 2: esegui questo comando nel terminale:
npx skills add firebase/agent-skills --agent=cursor
Altri agenti
Esegui questo comando nel terminale:
npx skills add firebase/agent-skills
Passaggio 2: connettiti al server MCP di Firebase
Sebbene molte skill dell'agente Firebase utilizzino la CLI Firebase per le attività, è consigliabile anche connettere l'agente di programmazione 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ù approfonditi.
Metodo assistito dall'AI
Nella maggior parte dei casi, puoi chiedere al tuo agente di programmazione AI di configurare il server MCP di Firebase. Tuttavia, se ha difficoltà o non vedi il server MCP di Firebase nell'elenco, passa al metodo manuale.
Metodo manuale
Antigravity
Per configurare Antigravity in modo che utilizzi il server MCP di 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 con i seguenti contenuti, che puoi visualizzare
facendo clic su Gestisci server MCP nella parte superiore del riquadro MCP Store >
Visualizza configurazione non elaborata:
{
"mcpServers": {
"firebase-mcp-server": {
"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 MCP di Firebase 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 MCP di Firebase:
Esegui questo comando nella cartella dell'app:
claude mcp add firebase npx -- -y firebase-tools@latest mcpVerifica l'installazione:
claude mcp listDovrebbe essere visualizzato:
firebase: npx -y firebase-tools@latest mcp - ✓ Connected
Claude Desktop
Per configurare Claude Desktop in modo che utilizzi il server MCP di Firebase, modifica il file claude_desktop_config.json. Puoi aprire o creare questo file dal menu Claude > Impostazioni. Seleziona la scheda Sviluppatore, poi fai clic su Modifica configurazione.
{
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
}
Cursor
Opzione 1: plug-in Marketplace (consigliata)
Installa il plug-in Firebase da Cursor Marketplace. In questo modo, il server MCP viene configurato automaticamente e viene fornito l'accesso a skill dell'agente Firebase.
Opzione 2: configurazione MCP con un solo clic
Se vuoi aggiungere il server MCP solo alla configurazione globale, fai clic sul seguente pulsante:
Opzione 3: configurazione manuale
Se preferisci configurare il server per un progetto specifico o modificare manualmente le impostazioni, aggiorna il file mcp.json:
- Per un progetto specifico, modifica
.cursor/mcp.json - Per tutti i progetti (a livello globale), modifica
~/.cursor/mcp.json
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
Cline
Per configurare Cline in modo che utilizzi il server MCP di Firebase, modifica il file cline_mcp_settings.json. Puoi aprire o creare questo file facendo clic sull'icona Server MCP nella parte superiore del riquadro Cline, poi facendo clic sul pulsante Configura server MCP.
{
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"],
"disabled": false
}
}
}
VS Code Copilot
Per configurare un singolo progetto, modifica il file .vscode/mcp.json nel workspace:
"servers": {
"firebase": {
"type": "stdio",
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
Per rendere il server disponibile 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 skill e gli strumenti dell'agente, puoi utilizzare il linguaggio naturale per chiedere al tuo agente di programmazione AI di configurare Cloud Firestore, Firebase Authentication, e Firebase Hosting.
Chiedi all'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 garantire 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 fornire, ad esempio:
- Piani: l'agente propone una strategia basata sul codebase esistente.
- Connessioni: l'agente collega il codice locale a un progetto Firebase esistente o ti aiuta a creare un nuovo progetto Firebase.
- Inizializzazione delle risorse: l'agente aggiunge le librerie e la configurazione Firebase richieste al codebase.
- Aggiornamento dei file: l'agente crea e aggiorna tutti i file necessari,
ad esempio
firestore.rules(per definire chi può leggere, scrivere o eseguire query sui dati all'interno del database) ofirebase.json(per comunicare all'Firebase CLI quali servizi eseguire il deployment e come configurarli). - Esecuzione: l'agente ti guida attraverso ulteriori passaggi di configurazione o deployment.
Suggerimenti generali per i prompt di un agente di programmazione AI
Per sfruttare al meglio il tuo agente di programmazione AI, soprattutto quando lavori con integrazioni complesse come Firebase, considera l'interazione come una collaborazione anziché un comando una tantum.
Fornisci informazioni specifiche e crea un contesto
Sebbene il server MCP di Firebase fornisca 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 un errore 'Autorizzazione negata' quando provo a scrivere in
nella raccolta 'users' in Cloud Firestore. Esamina il mio file
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 messaggi di errore: incolla eventuali errori del terminale o log della console nella chat.
- Chiedi 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 di eseguire
Gli agenti di programmazione AI sono potenti, ma possono commettere errori o "avere allucinazioni" (inventare funzioni con nome o servizi con nomi errati).
- Esamina il codice: leggi sempre il codice generato, in particolare Firebase Security Rules
e i file di configurazione (come
firebase.json), prima di eseguire il deployment in produzione. - Testa localmente: quando possibile, chiedi all'agente di aiutarti a testare le modifiche localmente prima di pubblicarle.
Utilizza la connessione MCP
Poiché il server MCP di Firebase offre all'agente visibilità diretta nella struttura del progetto, puoi fare riferimento a file specifici per ricevere consigli di implementazione personalizzati.
- Esempio: "Esamina il mio file
src/web/index.htmle mostrami dove aggiungere lo script di inizializzazione Firebase standard."
Passaggi successivi
- Consulta un elenco completo di tutte le skill dell'agente Firebase disponibili.
- Consulta un elenco completo di tutti i prompt, gli strumenti e le risorse disponibili forniti dal server MCP di Firebase.
- Scopri di più sugli strumenti forniti dall'interfaccia a riga di comando Firebase.