Desarrollo de JavaScript impulsado por IA

Hola a todos. Gracias por venir. Bienvenidos. Soy James. Este es Alex. Y somos ingenieros de relaciones con desarrolladores en Google. Somos grandes fanáticos de construir cosas geniales con código, como muchos de ustedes. Siempre estamos buscando herramientas que nos permitan pasar menos tiempo peleando con la configuración y más tiempo realmente construyendo. Y eso es exactamente por lo que estamos aquí hoy. Queremos facilitar que tú y tu equipo adopten el estado del arte de la IA, sin importar dónde te encuentres. Ofrecemos herramientas y extensiones de IA a través de una variedad de superficies, y las hacemos disponibles en la web, tanto en experiencias móviles, e incluso en el terminal.

Comenzaremos creando una nueva aplicación usando un boceto en una servilleta en AI Studio. También podríamos usar Firebase Studio o Gemini CLI para esto. Pero particularmente disfruto de la interfaz elegante de AI Studio para prototipar ideas rápidas. Luego veremos las reglas, que también se conocen como contexto de prompt. Junto con la extensión y los servidores MPC, nos permiten configurar verdaderamente la forma en que se comporta una IA para que la personalicemos para nuestras propias necesidades. Tenemos múltiples superficies que soportan esto, pero usaré Gemini CLI ya que es mi favorito, y lo ejecuto casi en todas partes, incluso en mi Raspberry Pi en casa.

Hoy, nuestro enfoque será simplemente averiguar cómo se ve un archivo de reglas. Pero no olvides consultar las populares extensiones contribuidas por la comunidad como Firebase que puedes instalar y usar. Y finalmente, examinaremos los pasos necesarios para integrar la IA de última generación en tu aplicación front-end, aprovechando nuestro exclusivo Firebase AI logic SDK y la integración de AppCheck, manteniendo todo funcionando rápido y seguro. Bien, veamos qué tan rápido podemos comenzar desde una idea hasta un prototipo funcional. Este es un boceto. Fue dibujado a mano y mejorado con Gemini. Tuve que mejorarlo con Gemini porque la servilleta era increíblemente brillante, y vi esta impresionante pantalla, así que no quería cegar a nadie en la audiencia. Así que veamos qué podemos hacer con este boceto. Así que hoy, usaremos la imagen que acabas de ver. Y como puedes ver, dicté usando reconocimiento de voz lo que quiero que sienta la aplicación. Quiero que sea divertida, para poder jugarla con mis hijos. Ahora, si estás en movimiento, si no estás en movimiento, sin embargo, también puedes usar Firebase Studio en su lugar y tener más control sobre la generación, o incluso ir por la ruta de Gemini CLI y realmente sentirte en el asiento del conductor. Ahora, vemos que el razonamiento tomó exactamente 46 segundos para Gemini Pro, y ahora está generando el código.

Decidí acelerar algunas partes del proceso para que puedas captar la esencia sin tener que profundizar demasiado en los detalles. Sin embargo, aún puedes ver la marca de tiempo en la pantalla, y espero que el texto también sea claro para que puedas seguir exactamente lo que está sucediendo.

Así que, realmente importante, antes de avanzar, queremos validar que la aplicación haga exactamente lo que esperamos que haga. Y se ve bien. Así que empujaremos el código fuente a GitHub, y luego veremos cómo configuramos una experiencia fluida para el desarrollador para nuestro equipo para que también puedan contribuir.

Y, ¿James? A continuación, tu compañero de equipo estará clonando un repositorio, instalando dependencias, y de repente están en el noveno círculo del infierno, ¿verdad? Es una experiencia universal para los desarrolladores. Todos hemos estado allí mirando un mensaje de error que no tiene sentido porque algún paquete en algún lugar tiene un conflicto de versión con otro paquete que ni siquiera sabías que estabas usando.

Todos lo hemos dicho. Todos lo hemos escuchado. Y aunque es gracioso, señala un problema fundamental. Nuestros entornos de desarrollo son frágiles, inconsistentes, y una fuente masiva de errores de funciona aquí, falla allá. Esto no es solo un meme. Es un síntoma de un problema profundamente arraigado en nuestros flujos de trabajo.

A menos que tengas Firebase Studio, un entorno de desarrollo basado en la nube que te ayuda a construir y enviar aplicaciones de IA de calidad de producción de pila completa, incluyendo APIs, backends, frontends, móviles y más. Es completamente basado en la web. Solo visita una URL en tu codificación. Está construido sobre VS Code, por lo que no solo es increíblemente familiar para la mayoría de los desarrolladores, sino que puedes traer la mayoría de tus preferencias, extensiones y memoria muscular existentes a la web. Ahora es importante señalar que esto es una VM en la nube completa, lo que significa que no estás limitado a cosas que se ejecutan completamente en el navegador.

Hay una máquina Linux impulsando cada espacio de trabajo de Firebase Studio. También tenemos varias integraciones de Google que facilitan agregar APIs como Gemini y Google Maps a tu aplicación, y facilitan el despliegue en la nube con Firebase Hosting o Cloud Run. Tenemos una vista previa en vivo incorporada, y como casi todas las superficies de Google en 2025, Gemini está integrado para que puedas obtener ayuda para entender, generar y mejorar el código. También hay integraciones que te ayudan a solucionar errores con IA y más.

En el corazón de Firebase Studio hay un solo archivo llamado dev.nix. Si estás trabajando en un equipo con otros colaboradores, puedes personalizar tu entorno precisamente para tu proyecto y luego comprometer tu archivo nix en el repositorio git de tu proyecto. De esa manera, cuando un compañero importe el repositorio en Firebase Studio, su espacio de trabajo tendrá exactamente la misma configuración que el tuyo, completo con los mismos paquetes del sistema, extensiones de IDE, scripts de inicio y más.

Realmente me encanta cómo lo expresa David East en Google, Nix es como un package JSON para todo tu entorno de desarrollo. Nix define casi todo lo que necesitas para trabajar con tu aplicación y ejecutarla en la nube, desde paquetes del sistema y servicios como cadenas de herramientas de compilación, servidores de bases de datos locales, hasta extensiones de IDE que añaden soporte de lenguaje y depuración, hasta el cableado específico necesario para iniciar automáticamente tus servidores de front end y back end para que puedas previsualizar tu aplicación mientras escribes código. Todo está definido en un solo archivo. Bastante genial.

Vamos a echar un vistazo a un archivo Nix de ejemplo. Comienza especificando un canal Nix, estable 24.11, en este caso particular, lo cual es genial porque significa que este entorno va a funcionar exactamente igual en dos años como lo hace hoy. Usar una versión específica aquí básicamente asegura tu... Acabo de decir eso. A continuación, estamos configurando algunas variables de entorno. Puedes ajustar la integración de vista previa en vivo de tu aplicación, entre otras cosas. Recuerda, el archivo dev.nix se compromete a git, así que ten cuidado con lo que añades aquí. A continuación, están todos los paquetes del sistema que deseas instalar y tener disponibles.

Ahora, debido a que Firebase Studio se basa en CodeOSS, soportamos la mayoría de las extensiones que la gente querría. Una advertencia es que estas provienen del mercado abierto llamado OpenVSX, no del mercado oficial de VS Code. La mayoría de las extensiones tienden a publicarse en ambos mercados. A continuación, tenemos los hooks de ciclo de vida. OnCreate se ejecuta cuando un usuario crea por primera vez su espacio de trabajo desde una plantilla o cuando importa por primera vez el repositorio Git en Firebase Studio. Te permite hacer una configuración única, como ejecutar npm install o sembrar datos en tu base de datos. En mi caso, también estoy abriendo un archivo en el editor de código.

El segundo hook de ciclo de vida es on start, particularmente útil cuando ejecutar tu aplicación requiere soportar tu vista previa en vivo o ejecutar otros servicios al mismo tiempo dentro de la VM. Hablando de eso, esta sección de vista previa define las vistas previas que deseas disponibles para tu aplicación. Hoy en día, hay dos tipos, una vista previa de Android, que inicia un emulador de Android, y la que usamos aquí, una vista previa web, que arranca el servidor HTTP de tu aplicación y lo muestra dentro de un navegador incrustado en el IDE. Si estás construyendo un framework o biblioteca para que otros usen, puedes incluir un archivo Nix en tus repositorios de código de muestra para que cuando un usuario importe tus muestras en Firebase Studio, puedan omitir la configuración del entorno y pasar directamente a probar tu framework. Incluso puedes construir tu propia plantilla personalizada como un punto de partida opinado y personalizable para tus usuarios.

Ahora hay mucho más sobre Nix y Firebase Studio, así que si quieres estar al tanto, te recomendaría encarecidamente ver el video de David Eason y revisar nuestro blog. Ahora hablemos de cómo los agentes de codificación Gemini pueden acelerar el desarrollo de tu aplicación. ¿Y quién está listo para una demostración? Una pregrabada para hacerlo rápido. Bien, primero, importaremos el repositorio de GitHub que acabamos de crear, y al abrir un repositorio existente por primera vez, Studio configurará automáticamente un espacio de trabajo para nosotros. Si es necesario, tenemos la opción de personalizar nuestro archivo Nix, luego el espacio de trabajo se recargará y el entorno actualizado aparecerá. Ahora, una vez que estemos contentos con cómo se ve y se comporta el IDE, vamos más allá del Asistente de Código con una iteración rápida usando el agente Gemini integrado aquí mismo en Firebase Studio. Quiero añadir un poco de brillo a esta aplicación antes de mostrársela a mi hijo, así que pensé que tener un efecto de confeti sería justo lo correcto cada vez que acierte la respuesta. Así que eso es lo que le pedí a Gemini que hiciera, y ahí lo tienes. Ya propuso el cambio. Voy a revisarlo rápidamente para asegurarme de que es sobre lo que tenía en mente y parece que lo es. Así que voy a aplicarlo y hacer otra prueba rápida. Muy bien, tenemos un efecto de confeti. Sin embargo, notaste que se detuvo muy rápidamente después de que comenzó. Bueno, quiero que se quede allí un poco más. También quiero que comience el siguiente problema poco después. Así que ahí vamos. Hagamos una solicitud de seguimiento para añadir un temporizador de cuenta regresiva y para asegurarnos de que el efecto se quede un poco más. Ahora Gemini nuevamente propuso la solución.

Seguí adelante, la aprobé. Es hora de hacer una prueba rápida. Ahora, como ves, estoy probando estas cosas manualmente porque para mí probablemente sea la forma más rápida. Sin embargo, para otros casos de uso, te invitaría a probar algunas de las extensiones que tenemos disponibles. Y quiero mostrarte una cosa más genial que puedes hacer de inmediato. Tener un archivo de reglas en tu proyecto te permite controlar cómo se comporta un sistema de IA. Piénsalo como un conjunto de instrucciones o un libro de reglas. Generalmente es un archivo markdown, y lo creas junto a tu código fuente.

Dentro del archivo, proporcionas cómo quieres que Gemini o, por ejemplo, cualquier otro agente de generación de código se comporte. Esta es una herramienta increíblemente útil porque asegura consistencia, calidad en el código generado, y te ahorra de repetirte una y otra vez sobre tus preferencias y tu voz. Esto te ahorra tiempo. Ayuda a que la IA se convierta en una parte más integrada de tu flujo de trabajo de desarrollo, y también es una forma genial de pasar tu trabajo a tus colegas si no estás presente.

Ahora trabajemos en un ejemplo. Aquí la primera sección es una persona donde configuro la personalidad de la IA. Creo que es realmente genial actuar como un Vulcano. Lógico, conciso y directo al grano. Ahora, como puedes ver aquí, acabamos de hablar sobre la persona. Así que influirá principalmente en la forma en que la IA responderá en nuestro chat, e influirá menos en la generación. Sin embargo, también podemos tener instrucciones que guiarán cosas como reglas semánticas o estilo en el código.

Por ejemplo, aquí, querría asegurarme de que el código generado por la IA se mantenga dentro de los límites del código que ya estoy escribiendo o elaborando a mano en otros lugares. Quiero que sea consistente. Por eso estoy instruyendo explícitamente a la IA para que siempre declare el tipo y evite cualquier cosa que realmente no me gusta ver en mi código. Finalmente, dado que estamos haciendo React, hay ciertas cosas que encontré realmente útiles en mi proyecto, así que las voy a mencionar aquí.

Como puedes ver, el archivo ARules MD es una herramienta poderosa para dar forma a Gemini como el colaborador perfecto para todas tus necesidades. Te permite definir todo, desde la forma en que la IA se comunicará hasta cómo debería razonar sobre el código y cuáles son las guías para generar. Ahora echemos un vistazo a Gemini CLI y veamos otro agente en acción. Lanzarlo es muy sencillo. Solo tienes que instalar el paquete en tu terminal, en este caso Firebase Studio ya viene preinstalado con él, y lo lanzas.

La primera vez que lo lanzas, tienes que autorizarlo y luego ves una pantalla como esta. Puedes hacerle preguntas sobre tu código haciendo referencia al contexto que quieres que vea, en este caso hice referencia a un archivo, operator pad, o puedes pedirle que haga un cambio. Al igual que antes, por defecto te dirá lo que pretende hacer y depende de ti aprobarlo. También puedes usar el modo YOLO si estás de humor, pero aquí revisaré cada cambio manualmente. Para no tener que hacer esta diligencia más tarde cuando envíe mi código.

Una sugerencia sobre cómo aprobar cambios es que siempre que veas un cambio que creas que es seguro, por ejemplo, un comando de lista, puedes permitir que toda la familia de tales comandos se ejecute en el futuro para que no tengas que presionar sí cada vez. Siempre que veas un cambio de código que no tienes la intención de revisar más tarde, es mejor simplemente revisarlo ahora. Encuentro realmente útil hacerlo de esta manera.

Como puedes ver, acabamos de actualizar la aplicación y si quieres puedes revisar la grabación y ver con más detalle qué sucedió exactamente. O mejor aún, te animo a que revises las extensiones de Gemini CLI. Aquí encontrarás muchas cosas populares contribuidas por la comunidad y tal vez te preguntabas qué hace una extensión. Bueno, tomemos un ejemplo.

Así que, voy a seguir adelante y voy a buscar una extensión de seguridad. ¿Por qué? Bueno, tengo mucho código generado por IA y solo tuve tiempo de leerlo a un nivel alto. Quiero obtener algunos consejos sobre si debería investigar ciertos aspectos de mi código más profundamente. Así que, veo que la extensión se instaló con éxito y la ejecutaré y le pediré a Gemini que analice el código en mi aplicación. Aquí podemos ver que Gemini creó un plan.

¿Por qué creó el plan? Así fue como se le instruyó en el archivo de instrucciones que se incluyó con la extensión. Ahora, una vez que terminó el plan, comenzará a ejecutarlo. Me pidió que lo aprobara obteniendo el historial de git para ver qué se había cambiado últimamente y luego procedió a analizar todo paso a paso. Finalmente, pedirá una aprobación más y me dará los resultados.

Como puedes ver, una buena práctica es verificar las fuentes externas de datos para seguridad, que es exactamente lo que detectó. Esta es solo una extensión de Gemini y todas ellas pueden ayudarte a mantener un alto nivel tanto en calidad como en eficiencia a lo largo de tu proceso de ingeniería. Así, podrás configurar no solo tu entorno, sino también tu proceso.

Ahora, dejaré que James hable un poco sobre algo más realmente genial. Echemos un vistazo a Firebase AI logic. Firebase AI logic permite a los desarrolladores llamar directamente a la API de Gemini desde sus aplicaciones móviles utilizando SDKs de cliente. Esto habilita funciones como experiencias de chat de IA, generación de imágenes, llamadas a funciones y entrada y salida de streaming sin requerir un backend dedicado.

Para flujos de trabajo de IA más complejos que requieren lógica del lado del servidor, el marco de código abierto GenKit Firebase proporciona un amplio acceso a varios modelos, incluyendo Gemini, y características avanzadas de IA. Veamos un ejemplo. Primero, importaremos la aplicación de Firebase y los paquetes de Firebase AI. Luego, inicializa la aplicación de Firebase con tu configuración personalizada. Inicializa el servicio de backend de la API de desarrollador de Gemini con un modelo de IA, en nuestro caso, Gemini 2.5 flash. Define un texto de solicitud. Genera una salida de texto usando la solicitud. En este ejemplo, vemos la versión abreviada solo de texto de generar contenido, pero también tenemos una versión con soporte para múltiples entradas con PDFs, imágenes, audio e incluso contenido de video. Puedes usar Firebase Cloud Storage para gestionar convenientemente estos archivos. También soportamos el procesamiento de salidas para llamadas a herramientas, búsqueda de fundamentos y ejecución de código.

Aquí hay otro ejemplo, pero esta vez tenemos la API de desarrollador de Google devolviendo una respuesta multimodal. Estamos usando el popular modelo NanoBanana para generar imágenes, por lo tanto, estamos configurando las modalidades de respuesta de las configuraciones de generación para devolver tanto texto como imagen. Como antes, define el texto de solicitud, luego genera una imagen usando la solicitud. El nivel gratuito de la API de Gemini disponible en el plan de precios sin costo Spark se ofrece a través del servicio API con límites de tasa más bajos para fines de prueba, pero ofrece un número generoso de solicitudes, que debería ser suficiente para la mayoría de las necesidades de desarrollo. Esto fue solo rascar la superficie. Para características más avanzadas, consulta nuestra documentación sobre Firebase Studio, Gemini CLI y los modelos de Gemini. Para esta charla, y también un reconocimiento a ScrunchyClub. Genial. Genial.

Sí, así que a medida que las preguntas comiencen a llegar vamos a ver qué tiene en mente el resto de la audiencia. Aquí hay una que tenemos. ¿Tenemos una versión on-prem o auto-desplegable de Firebase Studio que las empresas puedan usar? No, aún no. ¿Aún no? Supongo que puedes codificar una con Gemini. Sugeriré una cosa. Tenemos Gemini CLI, que funciona en casi todas las superficies. Eso es uno. Dos, tenemos extensiones de VS Code. Así que si usas un fork que está on-prem o usas cualquier otro IDE que puedas ejecutar on-prem, puedes incorporar las extensiones. Y tercero, muchos de los flujos de desarrollo de IA están sucediendo a través de extensiones y archivos de prompt, como viste aquí. Así que experimenta. Ve si tu empresa tiene necesidad de algún flujo de trabajo específico. Y muchos de esos se pueden reunir usando el código abierto que también apoyamos, como, por ejemplo, los archivos Nix. Así que sí, en resumen, no tenemos una solución lista para que la despliegues. Pero por favor ven a nosotros después. Nos encantaría ver cómo podría ser para ti tener una solución on-prem, lista para empresas para tu caso. Genial.

Muy bien. Así que quizás de esta conversación, y por eso hacemos conferencias como esta, quizás surjan algunas herramientas nuevas y emocionantes. Y no olvides, después de esta sesión de preguntas y respuestas, habrá una charla más larga que puedes tener con nuestros ponentes en los espacios de preguntas y respuestas justo afuera de aquí. Muy bien. Así que avanzando, tenemos una pregunta picante que supongo que veremos qué podemos obtener como respuesta aquí. Pero Anónimo pregunta, ¿Google va a crear un competidor de VS Code? ¿Qué significa un competidor de VS Code? Esa es una gran pregunta. Supongo que se refieren a un IDE que tenga todo esto ya listo para usar. Pero... Ya tenemos, ¿verdad? Muchas cosas listas para usar. Bueno, es una extensión de OSS Code, que es también sobre lo que está construido VS Code. Sí. Sí, absolutamente. El flujo de trabajo de desarrollo está cambiando todo el tiempo, ¿verdad? Vemos que las cosas cambian, y nos adaptamos y crecemos juntos.

Así que solo te animaría, observa las noticias, mira a la comunidad, participa en esto, y sabes, sé parte de crear el entorno de desarrollo perfecto que sería mejor que cualquier competidor por ahí. Sí, sí. Me encanta esa vibra. Y también la... Hablando de vibras, la, ya sabes, la idea de que todos podemos construir prácticamente lo que se nos ocurra ahora. No tenemos que esperar a que las empresas lancen algo y, ya sabes, nos envíen CD-ROMs por correo con nuestras revistas o algo así. Ahora tenemos este poder instantáneo. Así que, ya sabes, usémoslo con gran responsabilidad.

Muy bien, tenemos otra pregunta. Esta sobre archivos Nix. ¿Qué hay en esa hoja de ruta? ¿Hay, hay más formas en que esta configuración pueda ser elaborada por los usuarios? No estoy seguro de lo que hay en la hoja de ruta para Nix. Vicky, ¿deseas que esté en la hoja de ruta? Sí, creo que lo que podemos hacer es, ¿verdad?, tenemos algunas formas de obtener solicitudes de características. Y la forma en que funcionan nuestras hojas de ruta es que recopilamos solicitudes de características a través de varios canales. Uno de ellos es a través de su soporte. Si es una solicitud de característica que es más empresarial, y no quieres ponerla en público, pero quieres entregárnosla, también puedes hacerlo a través de tus ingenieros de soluciones en la nube, si tienes uno, o puedes discutirlo públicamente. Correcto, tenemos algunos tableros allí.

Sí, en el foro de la comunidad. Sí, y puedes votar. Y la forma en que hacemos estas hojas de ruta es que miramos lo que está realmente alto allí, lo que la comunidad quiere, y lo priorizamos. Ahora, no podemos decir lo que está en la hoja de ruta antes de que se anuncie públicamente. Sin embargo, tenemos programas de acceso temprano. Así que muy a menudo, te invitamos a inscribirte para obtener acceso temprano. Y eso es, ya sabes, la mejor manera de tener una vista interna de lo que viene en la hoja de ruta. Así que te sugeriría que hagas justo eso. Y entonces verás. Genial, genial. Sí. Y esto es realmente, ya sabes, de nuevo, creo que, habla de este punto de que todos estamos construyendo todo esto juntos, ¿verdad? No es un proceso de arriba hacia abajo. Así que tus comentarios importan, tus preguntas y comentarios y varias otras discusiones con nuestros ponentes hoy definitivamente serán llevadas de vuelta, estoy seguro, a los equipos. Así que sí, creo que con eso, estamos casi sin tiempo para nuestra sesión de preguntas y respuestas aquí. Pero como mencionamos, habrá otra oportunidad para charlar con los ponentes en el espacio de preguntas y respuestas justo afuera del salón de conferencias.