Se usó la API de Cloud Translation para traducir esta página.

MCP de Firebase en Firebase Studio

1. Descripción general

En este codelab, practicarás el uso del agente de creación de prototipos de apps junto con el servidor de MCP de Firebase en Firebase Studio para crear una app web de pila completa que use Firestore.

GIF animado de la app final

Qué aprenderás

Genera una app web estática con el agente de prototipado de apps
Configura el servidor de MCP de Firebase
Agrega Firestore con Firebase MCP

Requisitos

Un navegador de tu elección, como Google Chrome
Una Cuenta de Google para crear y administrar tu proyecto de Firebase

2. Genera tu app con el agente de App Prototyping

El agente de Prototipado de apps usa Gemini en Firebase para compilar tu app. Incluso cuando se usan instrucciones idénticas, los resultados pueden variar. Si te quedas atascado, te proporcionamos un conjunto de archivos que puedes agregar a tu espacio de trabajo para retomar el lab en varios puntos de control a lo largo de este codelab.

Accede a tu Cuenta de Google, únete al Programa para desarrolladores de Google y abre Firebase Studio.
En el campo Prototipar una app con IA, ingresa una descripción de la app:
```
An app for a picker wheel that allows custom input.
```
Haz clic en Mejorar instrucción. Revisa la instrucción mejorada.
Haz clic en Prototipar con IA.
Revisa el plano de la app sugerido. Haz clic en Personalizar para editarlo.
Haz clic en Guardar.
Cuando el esquema termine de incorporar tus actualizaciones, haz clic en Prototipar esta app.
Si tu diseño contiene elementos de IA, el agente te pedirá una clave de Gemini. Agrega tu propia clave de API de Gemini o haz clic en Generar automáticamente para generar una. Si haces clic en Generar automáticamente, Firebase Studio creará un proyecto de Firebase y generará una clave de API de Gemini por ti.
El agente de App Prototyping usa el plan para crear una primera versión de tu app. Cuando termina, aparece la vista previa de tu app junto con una interfaz de chat de Gemini. Tómate un momento para revisar y probar tu app. Si encuentras errores, haz clic en Corregir error en el chat para permitir que el agente corrija sus propios errores.

3. Configura el MCP de Firebase en Firebase Studio

El servidor de MCP de Firebase extiende las capacidades del agente de creación de prototipos de apps, ya que proporciona herramientas que el agente puede llamar para configurar, administrar y extraer datos de los servicios de Firebase, incluidos Firebase Authentication, Cloud Firestore y Firebase Data Connect. A continuación, te indicamos cómo configurarlo.

En Firebase Studio, haz clic en Cambiar al código para abrir la vista Código.
En la terminal (Shift + Ctrl + C), ejecuta el siguiente comando para acceder a tu cuenta de Firebase. Sigue las instrucciones en pantalla y deja todas las opciones predeterminadas:
```
firebase login --no-localhost
```
En el Explorador (Ctrl+Shift+E), haz clic con el botón derecho en la carpeta .idx y selecciona Archivo nuevo. Asigna el nombre mcp.json al archivo y presiona Intro.

Agrega la configuración del servidor a .idx/mcp.json.

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

Verifica que estés conectado al servidor de MCP de Firebase. Deberías ver entradas de registro similares en el panel Output, con "Gemini" seleccionado como el canal correcto. Registros de MCPManager de Gemini

4. Agrega Firestore con Firebase MCP

Objetivo 1: Agrega Firebase a tu app

Cambia a Prototyper. En la interfaz de chat, pídele al agente que cree un proyecto de Firebase.
```
Create a Firebase project.
```
Omite este paso si ya creaste un proyecto de Firebase cuando usaste la opción de generación automática para obtener una clave de API de Gemini. El ID del proyecto debería aparecer junto al nombre del espacio de trabajo en la esquina superior izquierda de la pantalla. También puedes pedirle al agente que enumere tus proyectos y anotar el que deseas usar.
```
List my Firebase projects.
```
Se espera que el agente llame a la herramienta de MCP de Firebase firebase_list_projects.
Pídele al agente que use tu proyecto de Firebase para el desarrollo local.
```
Use `spinsync-3y3c6` as my Firebase project in my local environment.
```
Asegúrate de ver un archivo .firebaserc que establezca tu proyecto predeterminado de Firebase. Este archivo le indica a Firebase CLI qué proyecto de Firebase debe usar. Si no ves este archivo, vuelve a solicitarlo específicamente.
Pídele al agente que cree una app web en tu proyecto de Firebase.
```
Create a web app in my Firebase project.
```
Se espera que el agente llame a la herramienta firebase_create_app. Si el agente no lo hace, vuelve a intentarlo o sigue estas instrucciones para completar el paso en Firebase console.Es posible que el agente llame a la herramienta firebase_get_sdk_config y cree los archivos necesarios para conectar tu proyecto a tu app web de Firebase. Si no lo hace, pídele que lo haga.
```
Add my Firebase SDK configuration to my app.
```
El agente suele colocar tu clave de API y otros parámetros de configuración directamente en src/lib/firebase.ts. Pídele que los quite del código de tu aplicación para mantenerla segura.
```
Secure my code by moving my Firebase config to my `.env` file.
```

Objetivo 2: Agrega Firestore

Cambiar a Código En la interfaz de chat, pídele al agente que use Firestore en tu app.
```
Use Firestore for user entries. Give anyone read and write access.
```
Se espera que el agente actualice tu código fuente para usar Firestore en lugar del almacenamiento local para las entradas del usuario y cree reglas de seguridad de Firestore. Ten en cuenta que es posible que llame a la herramienta de MCP de Firebase firebase_init o que te solicite que ejecutes el comando firebase init en la terminal para inicializar Firestore. De todos modos, asegúrate de ver el archivo firestore.rules con el siguiente contenido antes de continuar.
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
```
Aquí les otorgas a todos acceso de lectura y escritura a tu base de datos. Fuera de este codelab, siempre debes proteger tus bases de datos. Obtén más información sobre este tema en nuestra documentación.
En la terminal (Shift+Ctrl+C), inicializa Firestore si el agente no te lo solicitó antes.
```
firebase init firestore
```
Sigue las instrucciones en pantalla y deja las opciones predeterminadas. No reemplaces las reglas de seguridad del paso anterior y, luego, implementa las reglas de seguridad para la instancia de tu base de datos.
```
firebase deploy --only firestore
```
Esto aprovisionará una instancia de base de datos de Firestore para ti.

Objetivo 3: Probarla

Vuelve a cargar tu app, crea y borra entradas en la ruleta y observa estas actualizaciones en la página de Firestore en Firebase console.

App en Studio y Console

5. Conclusión

¡Felicitaciones! Creaste correctamente una app web de pila completa con el agente de prototipado de apps y el MCP de Firebase. No dudes en probar otras herramientas que ofrece el servidor de MCP de Firebase y expandir las capacidades de tu app.