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 aplicaciones junto con el servidor de MCP de Firebase en Firebase Studio para crear una app web de pila completa que use Firebase Realtime Database.

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 Firebase Realtime Database 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 Firebase Realtime Database 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.
```
Create a Firebase project for my app.
```
Se espera que el agente llame a la herramienta de MCP de Firebase firebase_create_project.Omite este paso si ya creaste un proyecto de Firebase mientras usabas 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. Como alternativa, pídele al agente que enumere tus proyectos y anota 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 se conecte a este proyecto.
```
Connect my app to my project `spinsync-3y3c6`.
```
Asegúrate de ver un archivo .firebaserc que establezca tu proyecto activo. Si no es así, pídele al agente que actualice tu entorno de Firebase.
```
Update my Firebase environment to use this project.
```
Se espera que el agente llame a la herramienta de MCP de Firebase firebase_update_environment . Sin embargo, es posible que el agente lo logre sin llamar a la herramienta.Por último, verifica que tu entorno de Firebase tenga el proyecto activo correcto y que tú seas el usuario autenticado.
```
Show me my current Firebase environment.
```
Se espera que el agente llame a la herramienta de MCP de Firebase firebase_get_environment.
Pídele al agente que cree una app web en tu proyecto de Firebase.
```
Create a web app in my active Firebase project.
```
Se espera que el agente llame a la herramienta firebase_create_app y muestre el ID de la app. Si el agente no lo hace, vuelve a intentarlo haciendo clic en , o bien sigue estas instrucciones para completar el paso en Firebase console.
```
Use the App ID to get the SDK configuration and add to my app.
```
Espera a que el agente llame a la herramienta firebase_get_sdk_config y actualice tu código con la configuración de Firebase.Si tu clave de API y otros parámetros de configuración aparecen en src/lib/firebase.ts después de que el agente declare que se completó la tarea, pídele que los quite para mantener la seguridad de tu app.
```
Secure my code by moving my Firebase config to the `.env` file.
```

Objetivo 2: Agrega Firebase Realtime Database

Quédate en Prototyper o cambia a Prototyper. En la interfaz de chat, pídele al agente que configure Firebase Realtime Database en tu proyecto.
```
Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
```
Se espera que el agente llame a la herramienta MCP de Firebase firebase_init y cree reglas de seguridad en database.rules.json como parte de los cambios en el archivo al final de este turno de conversación.
```
{
    "rules": {
        ".read": true,
        ".write": 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.
Cambiar a Código En la terminal (Shift + Ctrl + C), inicializa Firebase Realtime Database.
```
firebase init database
```
Sigue las instrucciones en pantalla y deja las opciones predeterminadas.Luego, implementa las reglas de seguridad para la instancia de tu base de datos.
```
firebase deploy --only database
```
Cambia a Prototyper. Pídele al agente que use tu instancia de base de datos predeterminada para las entradas del usuario.
```
Use my default Realtime Database instance for user entries.
```
Espera a que el agente actualice el resto del código fuente para conectar tu app a la instancia de la base de datos.

Objetivo 3: Probarla

Crea algunas entradas nuevas para la ruleta y observa cómo aparecen en la página de Firebase Realtime Database en Firebase console.

Firebase Realtime Database en Firebase 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.