Integrare i servizi Firebase utilizzando l'assistenza AI

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 alla CLI Firebase e al server MCP Firebase, puoi trasformare il tuo agente di programmazione AI in un esperto 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. Torna a consultare questa pagina per 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 progetto specifiche o informazioni obsolete. Questo toolkit colma questa lacuna combinando istruzioni specializzate (skill dell'agente) con due tipi complementari di strumenti di esecuzione dell'agente (CLI e server MCP):

  • Skill dell'agente Firebase: forniscono all'agente di programmazione competenze di dominio e workflow. 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 CLI Firebase e il server MCP Firebase.
  • Strumenti di esecuzione degli agenti:
    • Interfaccia a riga di comando Firebase (strumenti a riga di comando): fornisce strumenti per il ciclo di vita dei progetti 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 Firebase (strumenti e risorse programmatici): fornisce strumenti per ispezione in tempo reale e operazioni sui dati. Tramite chiamate di strumenti strutturate, l'agente può eseguire query e aggiornare in modo programmatico i documenti Cloud Firestore, gestire gli utenti Firebase Authentication, convalidare Security Rules, estrarre log o documentazione in tempo reale direttamente nel contesto e altro ancora.

L'utilizzo delle skill dell'agente Firebase insieme alla CLI Firebase e al server MCP di Firebase offre al tuo agente di programmazione AI funzionalità aggiuntive:

  • Passa all'azione: non limitarti a scrivere codice. L'agente può inizializzare i servizi, gestire gli utenti Firebase 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 sensibili alla versione per guidare l'agente nelle attività di configurazione.
  • Migliorare l'accuratezza: accedi all'ambiente e agli schemi del tuo progetto per fornire un aiuto più pertinente e accurato.
  • Riduci i costi dei token: le skill degli agenti caricano la documentazione dettagliata solo quando un'attività specifica lo richiede, riducendo al minimo l'overhead della sessione.

Servizi Firebase applicabili

Questa guida si concentra principalmente su come le skill dell'agente, l'interfaccia a riga di comando Firebase e il server MCP di Firebase interagiscono per aiutarti a configurare rapidamente questi servizi e funzionalità:

  • Cloud Firestore: esegue il provisioning di un database NoSQL.
  • Firebase 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 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 flusso di lavoro 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 Firebase 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 singolo prompt:

Antigravity

  • Opzione 1: accesso a livello globale

    Le skill dell'agente Firebase sono incluse nel plug-in Firebase nel Antigravity Marketplace (e come bundle di integrazione Build with Google). Installa il plug-in utilizzando una delle seguenti opzioni:

    • Dal Marketplace di Antigravity: fai clic su Personalizzazioni, seleziona la scheda Marketplace e poi fai clic su + nella scheda del plug-in Firebase.
    • In Antigravity CLI: esegui /plugin install firebase@agent-marketplace (o esegui /plugin e 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@firebase
    
  • Opzione 2: app Codex

    1. Completa le seguenti attività una volta:

      1. Registrati tramite il terminale:

        codex plugin marketplace add firebase/agent-skills
        
      2. Riavvia completamente l'app Codex.

      3. Apri Plugin.

      4. Seleziona il marketplace/la fonte Firebase.

      5. Apri Firebase e fai clic su + Installa.

    2. Inizia una nuova attività.

    3. Digita @Firebase per selezionare il plug-in o chiedi a Codex di eseguire un'attività Firebase.

Cursore

  • 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 l'interfaccia a riga di comando Firebase per le attività, ti consigliamo anche di 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 all'agente di programmazione AI di configurare il server MCP di Firebase. Tuttavia, se riscontri problemi o non vedi il server MCP Firebase nell'elenco, passa al metodo manuale.

Metodo manuale

Antigravity

Per configurare Antigravity in modo che utilizzi il server MCP di Firebase:

  1. In Antigravity, fai clic sul menu nel riquadro Agente > Server MCP.
  2. Seleziona Firebase > Installa.

In questo modo, il file mcp_config.json viene aggiornato automaticamente con i seguenti contenuti. Puoi visualizzarlo 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 Firebase in Claude Code è installare il plug-in Firebase ufficiale:

    1. Aggiungi il marketplace di Firebase per i plug-in Claude:

      claude plugin marketplace add firebase/firebase-tools
    2. Installa il plug-in Claude per Firebase:

      claude plugin install firebase@firebase
    3. Verifica l'installazione:

      claude plugin marketplace list
  • Opzione 2: configura manualmente il server MCP

    In alternativa, puoi configurare manualmente il server MCP di Firebase:

    1. Esegui questo comando nella cartella dell'app:

      claude mcp add firebase npx -- -y firebase-tools@latest mcp
    2. Verifica l'installazione:

      claude mcp list

      Dovrebbe mostrare:

      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 > Settings. Seleziona la scheda Sviluppatore, quindi fai clic su Modifica configurazione.

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

Cursore

Opzione 1: plug-in Marketplace (consigliato)

Installa il plug-in Firebase da Cursor Marketplace. In questo modo, il server MCP viene configurato automaticamente e viene fornito l'accesso alle skill dell'agente Firebase.

Opzione 2: configurazione di MCP con un solo clic

Se vuoi aggiungere il server MCP solo alla tua configurazione globale, fai clic sul seguente pulsante:

Installa il server MCP

Opzione 3: configurazione manuale

Se preferisci configurare il server per un progetto specifico o vuoi modificare le impostazioni manualmente, aggiorna il file mcp.json:

  • Per un progetto specifico, modifica .cursor/mcp.json
  • Per tutti i progetti (globali), 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, quindi 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 tuo 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 configurati gli strumenti e le skill dell'agente, ora puoi utilizzare il linguaggio naturale per fare in modo che l'agente di programmazione AI configuri Cloud Firestore, Firebase Authentication e Firebase Hosting.

  1. 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 assicurarti che solo gli utenti autorizzati possano leggere e scrivere i propri dati.
    • Configura Firebase Hosting e distribuisci l'app in produzione.
  2. Esamina le informazioni e segui le procedure guidate che l'agente potrebbe fornire, ad esempio:

    1. Pianifica: l'agente propone una strategia basata sul codebase esistente.
    2. Connessione: l'agente collega il codice locale a un progetto Firebase esistente o ti aiuta a crearne uno nuovo.
    3. Inizializza le risorse: l'agente aggiunge le librerie e la configurazione Firebase richieste al codebase.
    4. Aggiorna i file: 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) o firebase.json (per informare l'interfaccia a riga di comando Firebase su quali servizi eseguire il deployment e come configurarli).
    5. 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 programmazione AI, soprattutto quando lavori con integrazioni sfaccettate come Firebase, considera l'interazione come una collaborazione anziché come un comando singolo.

Fornisci informazioni specifiche e crea un contesto

Sebbene il server Firebase MCP 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 nella raccolta 'utenti' in Cloud Firestore. Rivedi il mio firestore.rules e suggerisci una correzione che consenta agli utenti autenticati di scrivere nel proprio documento."

Esegui iterazioni e perfeziona

Gli agenti di programmazione AI raramente generano un codice perfetto al primo tentativo per attività complesse. Se una risposta non è del tutto corretta, continua la conversazione:

  • Fornisci i messaggi di errore: incolla nella chat eventuali errori del terminale o log della console.
  • Chiedi modifiche: "Quel codice utilizza l'SDK v8 precedente. Riscrivilo utilizzando l'SDK modulare Firebase v9."
  • Richiedi spiegazioni: "Spiega in che modo Firebase Security Rules protegge i dati degli utenti".

Verifica prima dell'esecuzione

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.
  • Esegui test in locale: se possibile, chiedi all'agente di aiutarti a testare le modifiche in locale prima di pubblicarle.

Utilizza la connessione MCP

Poiché il server MCP di Firebase offre all'agente una 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.html e mostrami dove aggiungere lo script di inizializzazione Firebase standard."

Passaggi successivi