Integra servicios de Firebase con asistencia de IA

Optimiza la configuración de Firebase para apps web con herramientas de desarrollo potenciadas por IA, como Antigravity, Claude Code, Codex y Cursor. Si usas las habilidades de Firebase para agentes junto con la CLI de Firebase y el servidor de MCP de Firebase, puedes transformar tu agente de programación de IA en un experto especializado en Firebase que puede escribir código, configurar Firebase Security Rules y administrar recursos en vivo.

En esta guía, se explica cómo usar un agente de programación de IA para configurar Cloud Firestore, Firebase Authentication y Firebase Hosting para una app web. Vuelve pronto para obtener información sobre las apps para iOS, Android y Flutter.

¿Por qué usar las habilidades y herramientas de agentes de Firebase?

Los agentes de programación de IA suelen tener dificultades con parámetros de configuración de proyectos específicos o información obsoleta. Este kit de herramientas cierra esa brecha combinando instrucciones especializadas (habilidades de agente) con dos tipos complementarios de herramientas de ejecución de agentes (CLI y servidor de MCP):

  • Habilidades de Firebase para agentes: Proporcionan al agente de programación experiencia en el dominio y flujos de trabajo. Como capa de instrucciones, las habilidades guían al agente sobre las prácticas recomendadas para trabajar con Firebase, incluida la escritura de código. Las habilidades también le enseñan al agente cuándo y cómo usar la CLI de Firebase y el servidor de MCP de Firebase.
  • Herramientas de ejecución de agentes:
    • CLI deFirebase (herramientas de línea de comandos): Proporciona herramientas para las tareas del ciclo de vida y del entorno del proyecto. El agente puede ejecutar comandos de la CLI en un entorno de terminal para configurar servicios en un proyecto de Firebase, implementar sitios completos o recursos de backend, iniciar emuladores locales y mucho más.
    • Servidor de MCP de Firebase (herramientas y recursos programáticos): Proporciona herramientas para la inspección en tiempo real y las operaciones de datos. A través de llamadas a herramientas estructuradas, el agente puede consultar y actualizar de forma programática documentos de Cloud Firestore, administrar usuarios de Firebase Authentication, validar Security Rules, extraer registros o documentación en vivo directamente en el contexto, y mucho más.

Usar las habilidades de Firebase para agentes junto con la CLI de Firebase y el servidor de MCP de Firebase le brinda a tu agente de programación de IA capacidades adicionales:

  • Toma medidas: No te limites a escribir código. Tu agente puede inicializar servicios, administrar usuarios de Firebase Authentication, implementar nuevos Firebase Security Rules y trabajar directamente con tus datos de Cloud Firestore.
  • Mantente al tanto: Usa instrucciones oficiales que tengan en cuenta la versión para guiar a tu agente en las tareas de configuración.
  • Mejora la precisión: Accede al entorno y a los esquemas de tu proyecto para proporcionar ayuda más pertinente y precisa.
  • Reduce los costos de los tokens: Las habilidades de los agentes cargan documentación detallada solo cuando una tarea específica lo requiere, lo que minimiza la sobrecarga de la sesión.

Servicios de Firebase aplicables

Esta guía se enfoca principalmente en cómo las habilidades de los agentes, la CLI de Firebase y el servidor de MCP de Firebase funcionan juntos para ayudarte a configurar rápidamente estos servicios y funciones:

  • Cloud Firestore: Aprovisiona una base de datos NoSQL.
  • Firebase Authentication: Configura el acceso seguro de los usuarios.
  • Firebase Security Rules: Genera y define mejor Security Rules para tu app.
  • Firebase Hosting: Configura tu proyecto para la implementación de la app web estática.

Para obtener una lista completa de lo que está disponible, consulta la lista completa de habilidades de Firebase para agentes.

Flujo de trabajo general

En los siguientes pasos, se describe un flujo de trabajo generalizado para usar las habilidades de Firebase para agentes con el objetivo de configurar y usar los servicios de Firebase en una app web. En segundo plano, las habilidades de agentes usan la CLI de Firebase y el servidor de MCP de Firebase para completar estas tareas.

Paso 1: Instala habilidades de Firebase para agentes

En la mayoría de los casos, puedes instalar habilidades de Firebase para agentes en tu editor preferido con una sola instrucción:

Antigravity

  • Opción 1: Acceso a nivel global

    Las habilidades de Firebase para agentes se incluyen en el complemento de Firebase en el Marketplace de Antigravity (y como un paquete de integración de Build with Google). Instala el complemento con cualquiera de las siguientes opciones:

    • Desde Antigravity Marketplace: Haz clic en Customizations, selecciona la pestaña Marketplace y, luego, haz clic en + en la tarjeta del complemento de Firebase.
    • En Antigravity CLI, ejecuta /plugin install firebase@agent-marketplace (o ejecuta /plugin y, luego, instala Firebase desde la pestaña Descubrir). Los complementos instalados en Antigravity también se sincronizan automáticamente con Antigravity CLI.
    • Durante la incorporación: Selecciona la casilla de verificación de la pila de Firebase.
  • Opción 2: Acceso a nivel del proyecto

    Ejecuta el siguiente comando en el directorio de tu proyecto:

    npx skills add firebase/agent-skills --agent=antigravity
    

Claude Code

Ejecuta los siguientes comandos en tu terminal:

claude plugin marketplace add firebase/agent-skills
claude plugin install firebase@firebase

Codex

  • Opción 1: Terminal de Codex

    Ejecuta los siguientes comandos en tu terminal:

    codex plugin marketplace add firebase/agent-skills
    codex plugin add firebase@firebase
    
  • Opción 2: App de Codex

    1. Completa las siguientes tareas una vez:

      1. Regístrate a través de la terminal:

        codex plugin marketplace add firebase/agent-skills
        
      2. Reinicia por completo la app de Codex.

      3. Abre Plugins.

      4. Selecciona el mercado o la fuente de Firebase.

      5. Abre Firebase y haz clic en + Instalar.

    2. Inicia una tarea nueva.

    3. Escribe @Firebase para seleccionar el complemento o pídele a Codex que realice una tarea de Firebase.

Cursor

  • Opción 1: Instala el complemento directamente desde Cursor Marketplace.

  • Opción 2: Ejecuta el siguiente comando en la terminal:

    npx skills add firebase/agent-skills --agent=cursor
    

Otros agentes

Ejecuta el siguiente comando en la terminal:

npx skills add firebase/agent-skills

Paso 2: Conéctate al servidor de MCP de Firebase

Si bien muchas habilidades de Firebase para agentes usan la CLI de Firebase para las tareas, también se recomienda conectar tu agente de programación de IA al servidor de MCP de Firebase. Esta conexión mejora la capacidad de tu agente para interactuar con tu entorno de Firebase, lo que proporciona una integración y un acceso más profundos.

Método asistido por IA

En la mayoría de los casos, puedes pedirle a tu agente de programación de IA que configure el servidor de MCP de Firebase. Sin embargo, si tiene dificultades o no ves el servidor de MCP de Firebase en la lista, cambia al método manual.

Método manual

Antigravity

Para configurar Antigravity de modo que use el servidor de MCP de Firebase, haz lo siguiente:

  1. En Antigravity, haz clic en el menú en el panel Agent > servidores de MCP.
  2. Selecciona Firebase > Install.

Esto actualiza automáticamente tu archivo mcp_config.json, que puedes ver haciendo clic en Manage MCP Servers en la parte superior del panel de MCP Store > View raw config, con el siguiente contenido:

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

Claude

Claude Code

  • Opción 1: Instala mediante el complemento (recomendado)

    La forma más fácil de configurar el servidor de MCP de Firebase en Claude Code es instalar el complemento oficial de Firebase:

    1. Agrega Marketplace de Firebase para los complementos de Claude:

      claude plugin marketplace add firebase/firebase-tools
    2. Instala el complemento de Claude para Firebase:

      claude plugin install firebase@firebase
    3. Verifica la instalación:

      claude plugin marketplace list
  • Opción 2: Configura el servidor de MCP de forma manual

    Como alternativa, puedes configurar manualmente el servidor de MCP de Firebase:

    1. Ejecuta el siguiente comando en la carpeta de tu app:

      claude mcp add firebase npx -- -y firebase-tools@latest mcp
    2. Verifica la instalación:

      claude mcp list

      Debería mostrar lo siguiente:

      firebase: npx -y firebase-tools@latest mcp - ✓ Connected
      

Claude para computadoras de escritorio

Para configurar Claude Desktop para que use el servidor de MCP de Firebase, edita el archivo claude_desktop_config.json. Puedes abrir o crear este archivo desde el menú Claude > Configuración. Selecciona la pestaña Desarrollador y, luego, haz clic en Editar configuración.

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

Cursor

Opción 1: Complemento de Marketplace (recomendado)

Instala el complemento de Firebase desde Cursor Marketplace. Esta acción configura automáticamente el servidor de MCP y proporciona acceso a las habilidades de agentes de Firebase.

Opción 2: Configuración del MCP con un solo clic

Si solo quieres agregar el servidor de MCP a tu configuración global, haz clic en el siguiente botón:

Instala el servidor de MCP

Opción 3: Configuración manual

Si prefieres configurar el servidor para un proyecto específico o editar la configuración de forma manual, actualiza el archivo mcp.json:

  • Para un proyecto específico, edita .cursor/mcp.json
  • Para todos los proyectos (global), edita ~/.cursor/mcp.json
"mcpServers": {
  "firebase": {
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

Cline

Para configurar Cline para que use el servidor de MCP de Firebase, edita el archivo cline_mcp_settings.json. Para abrir o crear este archivo, haz clic en el ícono de los servidores de MCP en la parte superior del panel de Cline y, luego, en el botón Configure MCP Servers.

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

Copilot en VS Code

Para configurar un solo proyecto, edita el archivo .vscode/mcp.json en tu espacio de trabajo:

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

Para que el servidor esté disponible en todos los proyectos que abras, edita la configuración del usuario, por ejemplo:

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

Windsurf

Para configurar Windsurf Editor, edita el archivo ~/.codeium/windsurf/mcp_config.json:

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

Paso 3: Inicializa los servicios de Firebase

Con las habilidades y herramientas del agente configuradas, ahora puedes usar lenguaje natural para que tu agente de programación de IA configure Cloud Firestore, Firebase Authentication y Firebase Hosting.

  1. Solicita que tu agente configure un servicio. Por ejemplo, puedes usar instrucciones como estas:

    • Configura Cloud Firestore como la base de datos para esta app.
    • Crea una página de acceso con Authentication y actualiza Security Rules para garantizar que solo los usuarios autorizados puedan leer y escribir sus propios datos.
    • Configura Firebase Hosting y, luego, implementa la app en producción.
  2. Revisa la información y sigue los pasos guiados que tu agente podría proporcionar, como los siguientes:

    1. Planes: Tu agente propone una estrategia basada en tu base de código existente.
    2. Conexión: El agente vincula tu código local a un proyecto de Firebase existente o te ayuda a crear uno nuevo.
    3. Inicializa recursos: El agente agrega las bibliotecas y la configuración de Firebase necesarias a tu base de código.
    4. Actualiza archivos: Tu agente crea y actualiza los archivos necesarios, como firestore.rules (para definir quién puede leer, escribir o consultar datos en tu base de datos) o firebase.json (para informar a la CLI de Firebase qué servicios implementar y cómo configurarlos).
    5. Ejecuta: El agente te guía por los pasos adicionales de configuración o implementación.

Sugerencias generales para escribir instrucciones para un agente de programación de IA

Para aprovechar al máximo tu agente de programación de IA, en especial cuando trabajas con integraciones multifacéticas como Firebase, trata la interacción como una colaboración en lugar de un comando de un solo intento.

Escribir instrucciones específicas y proporcionar contexto

Si bien el servidor de MCP de Firebase proporciona al agente un contexto significativo sobre tu proyecto, las instrucciones claras y específicas en lenguaje natural producen los mejores resultados. Evita las solicitudes imprecisas.

  • Vago: "Corrige el error de la base de datos".
  • Específico: "Recibo un error de 'permiso denegado' cuando intento escribir en la colección 'users' en Cloud Firestore. Revisa mis firestore.rules y sugiere una corrección que permita a los usuarios autenticados escribir en su propio documento".

Itera y define mejor

Los agentes de programación de IA rara vez generan código perfecto en el primer intento para tareas complejas. Si una respuesta no es del todo correcta, continúa la conversación:

  • Proporciona mensajes de error: Pega los errores de la terminal o los registros de la consola en el chat.
  • Solicita ajustes: "Ese código usa el SDK de la versión 8, que es más antiguo. Vuelve a escribirlo con el SDK modular de Firebase v9".
  • Solicita explicaciones: "Explica cómo esos Firebase Security Rules protegen los datos del usuario".

Verifica antes de ejecutar

Los agentes de programación de IA son potentes, pero pueden cometer errores o "alucinar" (inventar funciones con nombre o servicios con nombres incorrectos).

  • Revisa el código: Siempre lee el código generado, en especial Firebase Security Rules y los archivos de configuración (como firebase.json), antes de implementarlo en producción.
  • Prueba de forma local: Siempre que sea posible, pídele al agente que te ayude a probar los cambios de forma local antes de publicarlos.

Usa la conexión de MCP

Debido a que el servidor de MCP de Firebase le brinda a tu agente visibilidad directa de la estructura de tu proyecto, puedes hacer referencia a archivos específicos para obtener consejos de implementación personalizados.

  • Ejemplo: "Mira mi archivo src/web/index.html y muéstrame dónde agregar la secuencia de comandos de inicialización estándar de Firebase".

Próximos pasos