Firebase Studio con editor online y agente Gemini integrado

Firebase Studio centraliza desarrollo con IA para que construyas más rápido y con menos fricción. Con un editor de código online, un agente de Gemini integrado y flujos listos para importar repositorios, usar templates o prototipar con chat, puedes pasar de la idea al producto en minutos, incluyendo autenticación con Google y configuración segura de credenciales.

¿Qué es Firebase Studio y cómo acelera el desarrollo con Gemini?

Firebase Studio es un entorno de Google que reúne edición de código, ejecución y asistencia con IA. Puedes entrar desde firebase.google.com o desde la consola de cualquier proyecto y abrir directamente Firebase Studio. A la derecha, el agente de Gemini sugiere acciones como correr tests, agregar dependencias o revisar procesos, con opciones de modo agente, autorun y selección de modelos Gemini.

¿Cómo se accede desde la consola de Firebase?

• Desde firebase.google.com: ir a la consola o entrar directo a Firebase Studio.
• Desde cualquier proyecto: abrir Firebase Studio desde el menú del proyecto.
• Flujo consistente: mismo acceso sin importar el punto de entrada.

¿Qué opciones iniciales ofrece el workspace?

• Chat con IA para crear un proyecto desde cero.
• Importar un repositorio de GitHub con autorización guiada.
• Empezar con templates en Flutter, Angular y otras tecnologías.

¿Cómo importar un repositorio y trabajar con el agente de Gemini?

El flujo de importación te permite clonar un repo y empezar a iterar con IA. Tras pegar la URL de GitHub, asignas un nombre y decides si instalar SDK móviles. Firebase Studio gestiona la autorización con GitHub, incluido el código de verificación y la confirmación para “Visual Studio Code”, y luego abre el proyecto con el agente de Gemini listo para ayudarte.

• Pegar la URL del repositorio y nombrar el proyecto.
• Opcional: instalar SDK de Flutter/Android si aplica.
• Autorizar GitHub: permitir, copiar el código y continuar.
• Confirmar acceso a “Visual Studio Code” para el repo.
• Clonar y abrir: el agente sugiere acciones como tests y dependencias.
• Elegir el modelo de Gemini disponible para iterar sobre el código.

¿Qué limitaciones de versiones debes considerar?

• Angular 20 aún no está disponible en Firebase Studio.
• Angular 17 es la versión soportada y con la que funcionan sus dependencias.

¿Cómo crear desde templates y prototipar con chat de IA?

Además de importar, puedes partir de templates o usar el chat con IA para generar un prototipo funcional. El flujo con Flutter crea un proyecto base listo para compilar en web y Android; el flujo con prompt arma una app completa en Next.js con autenticación Google, UI definida y Gemini API integrada.

¿Cómo crear un proyecto base con Flutter desde templates?

• Elegir Flutter y crear un nuevo workspace con plantilla.
• Ver archivos de Flutter y panel de debugging activo.
• Usar simuladores: web y Android para probar la app.
• Aplicación inicial: contador con estado y botón para incrementar.
• Habilidad práctica: iterar con el agente de Gemini para modificar el código.

¿Cómo prototipar una app con Next.js, TypeScript y Tailwind CSS?

• Usar el chat con IA: adjuntar archivos o escribir un prompt detallado.
• Ejemplo de plan generado: “Chatify AI” con autenticación Google, perfil, interfaz de chat, integración con Gemini y “Zenkit”, paleta de colores, layout, tipografías y animaciones.
• Tecnologías: TypeScript con Next.js y Tailwind CSS, con explicación de cada una en el plan.
• Aceptar el prototipo: se genera la app y se piden las API keys.
• Gestionar credenciales: usar claves de Gemini y Firebase en environment.ts y .env; se agregan al .gitignore para no exponerlas.
• Iterar con IA: si detecta errores, pedir que los arregle y continuar.
• Habilidad práctica: configuración segura de variables y conexión real con servicios.

¿Cómo resolver errores de autenticación y dominios autorizados?

• Error “configuration not found” y “action is invalid”: habilitar autenticación en la consola.
• En Authentication: pulsar build, activar Google (enable), vincular correo y guardar.
• Error de “dominio no autorizado”: agregar el dominio de Firebase Studio en Authentication > Settings > dominios autorizados.
• Probar de nuevo: recargar con F5, iniciar sesión y verificar login correcto.
• Validación final: “Chatify AI” muestra nombre y correo; el chat con Gemini responde en tiempo real.

Ideas y habilidades que te llevas: uso del agente de Gemini para modificar código, manejo de API keys y variables de entorno, activación del provider de Google en Authentication, gestión de dominios autorizados, comprensión de templates en Flutter y de un prototipo con Next.js y Tailwind CSS. Todo listo para construir más rápido y con confianza.

¿Ya probaste crear algo con Next, Angular o Flutter en Firebase Studio? Cuéntame en los comentarios qué construiste y qué te gustaría mejorar con Gemini.