Firebase Studio es el editor de código online de Google que integra inteligencia artificial mediante Gemini para crear, importar y prototipar aplicaciones web y móviles. Si trabajas con Angular, Flutter o Next.js, esta herramienta te permite generar proyectos completos en minutos, iterar con un agente de IA y conectarlos directamente con servicios de Firebase como autenticación y base de datos.

¿Cómo se accede a Firebase Studio y qué puedes hacer?

Puedes ingresar desde firebase.google.com o desde la consola de cualquier proyecto existente haciendo clic en Firebase Studio. Una vez dentro, verás tres caminos posibles para empezar a trabajar.

• Chat con IA para generar un proyecto desde cero mediante prompting.
• Importar un repositorio existente desde GitHub.
• Elegir un template de tecnologías como Flutter, Angular, Next.js, entre otras.

¿Qué es Firebase Studio? Es un editor de código online de Google que integra a Gemini como agente de IA, permitiendo crear, importar y prototipar aplicaciones desde el navegador sin instalar nada.

Un detalle importante: la herramienta sigue en desarrollo, así que algunas tecnologías no están actualizadas. Por ejemplo, Angular 20 todavía no está disponible, pero sí puedes trabajar con Angular 17 y sus dependencias.

¿Cómo importar un repositorio desde GitHub?

El flujo es directo. Vas al repositorio de Platzi en GitHub, copias la URL del proyecto Firebase y la pegas en la opción Import Repo de Firebase Studio. Le pones un nombre, por ejemplo firebase-chat-gemini, y decides si quieres instalar el SDK de Flutter y Android.

Después, Firebase Studio te pedirá autorización para clonar desde GitHub. Te genera un código que pegas en la plataforma, autorizas Visual Studio Code y listo: el proyecto se abre dentro del editor con todos los archivos a la izquierda y el agente de Gemini a la derecha.

Ese panel lateral con Gemini es donde sucede la magia. Puedes pedirle correr tests unitarios, agregar dependencias, revisar procesos en ejecución o modificar código en modo agente con autorun. Además, eliges entre los modelos de Gemini disponibles según lo que necesites.

¿Cómo crear un proyecto Flutter desde un template?

Flutter es la tecnología de Google para desarrollo mobile que permite, en un solo proyecto, trabajar para iOS, Android e incluso web. Al elegir el template de Flutter en Firebase Studio, se crea un nuevo workspace con la plantilla base.

Le asignas un nombre, por ejemplo test, y haces clic en crear. Después de unos minutos tendrás:

• El árbol de archivos propios de Flutter, que es un framework de Dart.
• Dos simuladores integrados, uno web y uno Android, para ver la aplicación corriendo.
• Una terminal abajo que puedes cerrar para mantener el proceso running.
• El panel de Gemini a la derecha para iterar sobre el código.

El template incluye una app sencilla: un contador con estado que aumenta al presionar el botón. Funciona idéntico en web y en Android, lo que demuestra el poder de un solo código base para múltiples plataformas.

¿Cómo prototipar una app con IA usando solo un prompt?

Este es el flujo más impresionante. Desde el chat inicial de Firebase Studio escribes un prompt describiendo la aplicación que quieres. En el ejemplo de la clase se pidió un chat con autenticación de Firebase, integración con la API de Gemini y construido en Next.js, además de la estructura de API keys para Firebase y Gemini.

Al tocar prototipar con inteligencia artificial, Gemini propone un plan completo antes de generar nada. Para la app Chatify AI sugirió:

• Autenticación con Google y pantalla de perfil.
• Interfaz de chat con burbujas de mensajes.
• Integración con Gemini y Genkit.
• Stack con TypeScript, Next.js y Tailwind CSS.
• Definiciones de colores, layout, tipografía, iconografía y animaciones.

¿Qué es Genkit? Es uno de los kits que Firebase Studio integra junto a Gemini para construir funcionalidades de IA dentro de la aplicación generada.

Aceptas el prototipo, pegas tu API key de Gemini desde el archivo environment.ts del proyecto anterior y la IA empieza a construir. Si aparece un error, le pides que lo arregle y se itera hasta que funcione. Para la API key de Firebase, como el proyecto anterior ya hospedaba un Angular, conviene crear un proyecto nuevo desde Gemini para el Next.js. Las variables de entorno quedan en el .env y se ignoran automáticamente para no exponerlas.

¿Qué errores comunes aparecen al desplegar y cómo se resuelven?

Al probar el login, suelen aparecer dos errores típicos que tienes que resolver en la consola de Firebase del nuevo proyecto.

1. Configuration not found: ocurre porque no diste de alta la autenticación. Vas a Build, Authentication, eliges Google como proveedor, lo activas con enable, lo asocias a tu correo y guardas.
2. Dominio no autorizado: pasa porque estás corriendo desde un dominio de Firebase Studio. Vas a Authentication, Settings, Dominios autorizados, y agregas la URL de la window del studio.

Después de un F5, la app autentica con Google sin problema. Aparece tu nombre, tu correo y la opción de desloguearte. El chat queda funcional: escribes un mensaje y Gemini responde en tiempo real, demostrando que la integración entre Firebase Auth y la API de Gemini quedó completa.

Con esto cierras todo el ecosistema de Google: Firebase para autenticación y base de datos, Flutter y Angular para frontend, y Firebase Studio como capa de IA que une todo. ¿Qué app construirías tú con este flujo? Déjalo en los comentarios.