Firebase MCP in Firebase Studio

1. Panoramica

Anteprima:Firebase Studio e Firebase MCP sono in anteprima, il che significa che non sono soggetti a SLA o a norme sul ritiro e potrebbero cambiare in modi incompatibili con le versioni precedenti.

In questo codelab, ti eserciterai a utilizzare l'agente di prototipazione delle app insieme al server Firebase MCP in Firebase Studio per creare un'app web full-stack che utilizza Firestore.

Obiettivi didattici

• Generare un'app web statica utilizzando l'agente di prototipazione di app
• Connettersi a un progetto Firebase
• Configurare il server MCP Firebase
• Aggiungi Firestore utilizzando Firebase MCP

Che cosa ti serve

• Un browser a tua scelta, ad esempio Google Chrome
• Un Account Google per la creazione e la gestione del tuo progetto Firebase

2. Genera l'app utilizzando l'agente di prototipazione di app

L'agente Prototipazione app utilizza Gemini in Firebase per creare la tua app. Anche utilizzando prompt identici, i risultati possono variare.

1. Accedi al tuo Account Google, registrati al programma per sviluppatori Google e apri Firebase Studio.
2. Nel campo Crea il prototipo di un'app con l'AI, inserisci una descrizione dell'app:

   An app for a picker wheel that allows custom input.
   

3. Fai clic su Migliora prompt. Rivedi il prompt migliorato.
4. Fai clic su Prototipo con l'AI.
5. Esamina il progetto di app suggerito. Fai clic su Personalizza per modificarlo.
6. Fai clic su Salva.
7. Quando il progetto termina di incorporare gli aggiornamenti, fai clic su Prototipo di questa app.
8. Se il tuo progetto contiene elementi di AI, l'agente ti chiede una chiave Gemini Gemini. Aggiungi la tua chiave API Gemini o fai clic su Genera automaticamente per generare una chiave API Gemini. Se fai clic su Genera automaticamente, Firebase Studio crea un progetto Firebase e genera una chiave API Gemini per te.
9. L'agente di prototipazione di app utilizza il progetto per creare una prima versione dell'app. Al termine, viene visualizzata l'anteprima dell'app insieme a un'interfaccia di chat di Gemini. Prenditi un momento per esaminare e testare la tua app. Se riscontri errori, fai clic su Correggi errore nella chat per consentire all'agente di correggere i propri errori.

3. (Facoltativo) Ottieni il codice

Se hai difficoltà, utilizza i file di esempio per seguire più da vicino l'app di esempio da questo punto in poi.

1. Scarica i file nella cartella.
2. In Firebase Studio, fai clic su Passa al codice per aprire la visualizzazione Codice.
3. Trascina i file scaricati nel riquadro Esplora di Firebase Studio. Consenti ai file di sostituire eventuali file esistenti.
4. Nel terminale (Shift+Ctrl+C), esegui il comando seguente per installare i pacchetti.

   npm install
   

5. Apri il riquadro Controllo del codice sorgente di Firebase Studio, digita un messaggio per descrivere la modifica al codice, ad esempio "codice importato da GitHub", quindi premi Commit.
6. Fai clic su Passa a Prototyper per continuare il codelab utilizzando la versione di esempio dell'app.

Nota:per utilizzare l'agente Prototipazione app, devi aver avviato uno spazio di lavoro con un prompt. In altre parole, ai fini di questo codelab, non creare un nuovo spazio di lavoro utilizzando questi file, ma sostituisci semplicemente i file esistenti.

4. Connettersi a un progetto Firebase

Complimenti! La tua app funziona localmente. Per fornirgli un backend, lo collegherai a un progetto Firebase.

1. Chiedi all'agente di prototipazione di app di connettersi a un progetto Firebase.

   Connect to a Firebase project.
   

   L'agente creerà un nuovo progetto o si connetterà a uno esistente (se in precedenza hai utilizzato l'opzione di generazione automatica per ottenere una chiave API Gemini, il progetto dovrebbe essere visualizzato accanto al nome dello spazio di lavoro nell'angolo in alto a sinistra dello schermo), quindi genererà la configurazione Firebase necessaria e la integrerà nella tua app tramite src/lib/firebase.ts (come mostrato).

   import { initializeApp, getApp, getApps } from 'firebase/app';
   
   const firebaseConfig = {
     "projectId": "foo-bar-baz",
     "appId": "1:630673270654:web:3eda41879acd38fa96ce14",
     "storageBucket": "foo-bar-baz.firebasestorage.app",
     "apiKey": "AIzaSyDGoMZQia334izw8JedslMTUD0fNpmFca0",
     "authDomain": "foo-bar-baz.firebaseapp.com",
     "measurementId": "",
     "messagingSenderId": "630673270654"
   };
   
   // Initialize Firebase
   const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
   
   export default app;
   

   Se il prompt precedente non riesce a completare l'attività in una sola volta, non esitare a chiedere di nuovo all'agente. Se necessario, suddividi i passaggi.

   Create a new Firebase project.
   

5. Configura Firebase MCP in Firebase Studio

Il server Firebase MCP estende le funzionalità dell'agente di prototipazione delle app fornendo strumenti che l'agente può chiamare per configurare, gestire ed estrarre dati dai servizi Firebase, tra cui Firebase Authentication, Cloud Firestore e Firebase Data Connect. Ecco come configurarlo.

1. Fai clic su Passa al codice per aprire la Vista codice.
2. Nel terminale (Shift+Ctrl+C), esegui il seguente comando per accedere al tuo account Firebase, seguendo le istruzioni sullo schermo e lasciando tutte le opzioni predefinite:

   firebase login --no-localhost
   

3. In Esplora risorse (Ctrl+Shift+E), fai clic con il tasto destro del mouse sulla cartella .idx e seleziona Nuovo file. Assegna al file il nome mcp.json e premi Invio.
4. Aggiungi le configurazioni del server a .idx/mcp.json.

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

   Verifica di essere connesso al server MCP di Firebase. Nel riquadro Output dovresti visualizzare voci di log simili, con "Gemini" selezionato come canale corretto.

6. Aggiungi Firestore utilizzando Firebase MCP

Obiettivo 1: aggiungi Firestore

1. Passa a Prototyper. Nell'interfaccia di chat, chiedi all'agente di utilizzare Firestore nella tua app.

   Use Firestore for user entries. Give anyone read and write access.
   

   L'agente dovrebbe:
   • inizializza Firestore chiamando lo strumento Firebase MCP firebase_init, che crea regole Firestore (come mostrato) e file di indice tra le altre modifiche alla configurazione
   • aggiorna il codice dell'applicazione in modo da utilizzare Firestore anziché l'archiviazione locale

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /{document=**} {
         allow read, write: if true;
       }
     }
   }
   

   Qui concedi a tutti l'accesso in lettura e scrittura al tuo database. Al di fuori di questo codelab, devi sempre proteggere i tuoi database. Scopri di più su questo argomento nella nostra documentazione.
2. Passa al codice. Nel terminale (Shift+Ctrl+C), inizializza Firestore se non hai mai attivato l'API Firestore nel progetto Firebase corrente.

   firebase init firestore
   

   Segui le istruzioni sullo schermo e lascia le opzioni predefinite. Non sovrascrivere le regole di sicurezza del passaggio precedente, poi implementa le regole di sicurezza per l'istanza del database.

   firebase deploy --only firestore
   

   Verrà eseguito il provisioning di un'istanza del database Firestore.

Obiettivo 2: prova

1. Ricarica l'app, crea ed elimina voci nella ruota di selezione e guarda questi aggiornamenti nella pagina Firestore della console Firebase.

2. Puoi anche chattare con Firestore per eseguire query sul tuo database.

   List my Firestore collections.
   

   Prevedi che Gemini chiami lo strumento MCP di Firebase firestore_list_collections.

7. Conclusione

Complimenti! Hai creato correttamente un'app web full-stack utilizzando l'agente Prototipazione app con Firebase MCP. Prova gli altri strumenti offerti dal server MCP di Firebase ed espandi le funzionalità della tua app.

Scopri di più

• Strumenti MCP di Firebase
• Firebase MCP su GitHub
• Suggerimenti e trucchi per Firebase 2
• Scopri di più sugli spazi di lavoro di Firebase Studio