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 competenze dell'agente Firebase insieme all'Firebase CLI 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 illustra l'utilizzo di un agente di programmazione AI per configurare Cloud Firestore, Authentication e Firebase Hosting per una app web. Ritorna a breve per informazioni sulle app per iOS, Android e Flutter.

Perché utilizzare le competenze e gli strumenti dell'agente Firebase?

I modelli di AI generici spesso hanno difficoltà con configurazioni di progetti specifici 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 programmazione contesto e accesso. Stabilisce un protocollo standard per l'agente per ispezionare a livello di programmazione le risorse, i file locali e le configurazioni del progetto attivo.
  • Firebase CLI: L'interfaccia a riga di comando fornisce all'agente di programmazione 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 utente e il deployment del codice per tuo conto.

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

  • Passa all'azione: fai di più che scrivere codice. L'agente può inizializzare i servizi, gestire gli utenti Authentication, eseguire il deployment di nuove Firebase Security Rules, e lavorare direttamente con i dati Cloud Firestore.
  • Rimani aggiornato: utilizza prompt ufficiali e sensibili alla versione per guidare l'agente nelle attività di configurazione.
  • Migliora la precisione: accedi all'ambiente e agli schemi del progetto per fornire assistenza più pertinente e precisa.
  • Riduci i costi dei token: le competenze dell'agente caricano la documentazione dettagliata solo quando è necessaria per un'attività specifica, il che riduce al minimo l'overhead della sessione.

Quali servizi Firebase possono essere assistiti dalle competenze e dagli strumenti dell'agente?

Questa guida si concentra principalmente su come le competenze dell'agente, la Firebase CLI e il server MCP Firebase funzionano insieme per aiutarti a configurare rapidamente questi servizi e 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 di app web statiche.

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 l'interfaccia a riga di comandoFirebase e il server MCP Firebase per completare queste attività.

Passaggio 1: installa le competenze dell'agente Firebase

Nella maggior parte dei casi, puoi installare le competenze dell'agente Firebase nell'editor che preferisci con un singolo prompt:

Antigravity

Le competenze dell'agente Firebase sono incluse come uno dei Crea con Google bundle di integrazione 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. In Plug-in Crea con Google, fai clic su Personalizza, quindi su Scarica per l'integrazione di Firebase.

Se preferisci l'accesso a livello di progetto, esegui il seguente 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

Cursor

Puoi installare le competenze dell'agente Firebase direttamente da Cursor Marketplace o eseguendo il seguente 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 Firebase CLI per le attività, è consigliabile connettere l'agente di programmazione AI al server MCP 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 Firebase. 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 che utilizzi il server MCP Firebase:

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

Questo aggiorna automaticamente il file mcp_config.json, che puoi visualizzare 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 MCP Firebase, 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 MCP Firebase in Claude Code è installare il plug-in Firebase ufficiale:

    1. Aggiungi il marketplace 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 Firebase:

    1. Esegui il seguente comando nella cartella dell'app:

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

      claude mcp list

      Dovrebbe essere visualizzato:

      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 Server MCP nella parte superiore del riquadro Cline, quindi facendo clic sul pulsante Configura server MCP.

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

Cursor

Opzione 1: plug-in Marketplace (consigliata)

Installa il plug-in Firebase da Cursor Marketplace. Questo configura automaticamente il server MCP e fornisce l'accesso a competenze dell'agente Firebase.

Opzione 2: configurazione MCP con un clic

Se vuoi aggiungere il server MCP solo alla 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 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"]
  }
}

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

Con le competenze e gli strumenti dell'agente configurati, ora puoi utilizzare il linguaggio naturale per chiedere all'agente di programmazione AI di configurare Cloud Firestore, 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 garantire che solo gli utenti autorizzati possano leggere e scrivere i propri dati.
    • Configura Firebase Hosting ed esegui il deployment dell'app in produzione.
  2. Esamina tutte le informazioni e segui i passaggi guidati che l'agente potrebbe fornire, ad esempio:

    1. Piani: l'agente propone una strategia basata sul codebase esistente.
    2. Connessioni: l'agente collega il codice locale a un progetto Firebase esistente o ti aiuta a creare un nuovo progetto Firebase.
    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, ad esempio firestore.rules (per definire chi può leggere, scrivere o eseguire query sui dati all'interno del database) o firebase.json (per comunicare all'Firebase CLI quali servizi eseguire il deployment e come configurarli).
    5. Esegue: l'agente ti guida attraverso ulteriori passaggi di configurazione o deployment.

Suggerimenti generali per i prompt di 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é un comando una tantum.

Fornisci informazioni specifiche e crea un contesto

Sebbene il server MCP Firebase fornisca all'agente un contesto significativo sul tuo progetto, i prompt in linguaggio naturale chiari e specifici producono i risultati migliori. Evita le richieste vaghe.

  • Vago: "Correggi l'errore del database."
  • Specifico: "Ricevo un errore "Autorizzazione negata" quando tento di scrivere nella raccolta "users" in Cloud Firestore. Esamina il mio firestore.rules e suggerisci una correzione che consenta agli utenti autenticati di scrivere nel proprio documento."

Ripeti 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 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 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.html e mostrami dove aggiungere lo script di inizializzazione Firebase standard."

Passaggi successivi