En esta página, se describe cómo puedes usar el modo Build en Google AI Studio para compilar (o programar de forma intuitiva) y, luego, implementar rápidamente apps que prueben las capacidades más recientes de Gemini, como nano banana y la API de Live.
Comenzar
Comienza a usar vibe coding en el modo de compilación de Google AI Studio. Puedes comenzar a crear de las siguientes maneras:
- Comienza con una instrucción: En el modo de compilación, usa el cuadro de entrada para ingresar una descripción de lo que quieres compilar. Selecciona AI Chips para agregar funciones específicas, como la generación de imágenes o los datos de Google Maps, a tu instrucción. Incluso puedes decir lo que quieras con el botón de voz a texto.
- Botón "Voy a tener suerte": Si necesitas una chispa creativa, usa el botón "Voy a tener suerte" y Gemini generará una instrucción con una idea de proyecto para que comiences.
- Remezcla un proyecto de la galería: Abre un proyecto de la Galería de apps y selecciona Copiar app.
Una vez que ejecutes la instrucción, verás que se generan el código y los archivos necesarios, con una vista previa en vivo de tu app que aparece en el lado derecho.
¿Qué se crea?
Cuando ejecutas tu instrucción, AI Studio crea una app web. De forma predeterminada, creará una app web de React, pero puedes elegir crear una app de Angular en el menú Configuración. Para ver el código que se genera, selecciona la pestaña Código en el panel de vista previa de la derecha.
Estos son los archivos que debes tener en cuenta:
- geminiService.ts: Este archivo contiene la lógica principal de tu app, desde la construcción de instrucciones hasta la llamada a la API de Gemini y el análisis de sus respuestas. Puedes editar la instrucción base en este archivo o modificar cualquier funcionalidad del componente directamente o chateando de forma interactiva con Gemini en el modo de compilación. Ten en cuenta que el código de este archivo usa el SDK de GenAI TS para interactuar con la API de Gemini.
Continúa con la compilación
Una vez que Google AI Studio genere el código inicial de tu aplicación web, tendrás dos opciones principales para continuar con tu proyecto: Build in AI Studio o Develop Externally.
Crea en Google AI Studio
Puedes seguir definiendo y expandiendo tu aplicación directamente en el entorno de Google AI Studio:
- Itera con Gemini: Usa el panel de chat en el modo de compilación para pedirle a Gemini que realice modificaciones, agregue funciones nuevas o cambie el diseño. Por ejemplo, podrías pedirle que "agregue un botón que alerte al usuario" o que "cambie el esquema de color a azul y blanco".
- Edita el código directamente: Abre la pestaña Código en el panel de vista previa para realizar ediciones en vivo. Puedes guardar tu proyecto en GitHub para usar el control de versiones durante el desarrollo.
Desarrollar externamente
Para flujos de trabajo más avanzados, puedes exportar el código y trabajar en tu entorno preferido:
- Descargar y desarrollar de forma local: Exporta el código generado como un archivo ZIP y, luego, impórtalo en tu editor de código. Esto te permite usar tus herramientas, sistemas de compilación y prácticas de control de versiones locales conocidos para seguir desarrollando más allá del prototipo inicial.
- Push to GitHub: Integra el código con tus procesos de desarrollo y de implementación existentes enviándolo a un repositorio de GitHub.
Características clave
Google AI Studio incluye varias funciones para que el proceso de compilación sea intuitivo y visual:
- Modo de anotación: En lugar de escribir código para cambiar la apariencia de tu app, el modo de anotación te permite destacar cualquier parte de la IU de tu app y describir el cambio que deseas. Por ejemplo, puedes seleccionar un componente y escribir "Haz que este botón sea azul" o "Anima esta imagen para que se deslice desde la izquierda". Cuando selecciones Agregar al chat, se generará una instrucción con una captura de pantalla de la app anotada.
- Comparte tu app: Puedes compartir tus creaciones con otras personas para colaborar o mostrar tu trabajo.
- App Gallery: La Galería de aplicaciones proporciona una biblioteca visual de ideas para proyectos. Puedes explorar las posibilidades de Gemini, obtener vistas previas de las aplicaciones al instante y remezclarlas para hacerlas tuyas.
Implementa o archiva tu app
Cuando tu aplicación esté lista, podrás implementarla directamente desde AI Studio. Estas son algunas opciones de implementación:
- Google Cloud Run: Implementa tu aplicación como un servicio escalable. Ten en cuenta que se pueden aplicar precios para Google Cloud Run según el uso.
- GitHub: Exporta tu proyecto a un repositorio de GitHub para integrarlo en tus flujos de trabajo de desarrollo y de implementación existentes.
Limitaciones
En esta sección, se describen las limitaciones importantes que debes tener en cuenta cuando usas el modo Build en Google AI Studio.
Seguridad y exposición de la clave de API
- El código de las apps compartidas es visible para cualquier persona que las vea. Nunca uses una clave de API real directamente en el código de tu app.
- De forma predeterminada, las apps usan un marcador de posición (p.ej., process.env.GEMINI_API_KEY) para la clave de API. Cuando un usuario ejecuta tu app compartida en AI Studio, este actúa como proxy y reemplaza el marcador de posición por la clave de API del usuario final, lo que garantiza que tu clave siga siendo privada.
Visibilidad y uso compartido de la app
- Las apps se almacenan en Google Drive y heredan su modelo de permisos, lo que significa que son privadas de forma predeterminada.
- Permisos de uso compartido: Cuando compartes una app con otros usuarios, sucede lo siguiente:
- Los usuarios compartidos pueden ver el código y bifurcar la app para su propio uso.
- Si se les otorga permiso de edición, los usuarios con los que se comparte la app pueden modificar su código.
Implementación fuera de AI Studio
- Si bien puedes implementar tu app en Cloud Run para obtener una URL pública, esta configuración usará tu clave de API para todas las llamadas a la API de Gemini de los usuarios.
- Las apps de JavaScript se ejecutan del lado del cliente, por lo que debes asegurarte de que las claves de API solo tengan acceso mínimo para evitar filtraciones o usos inadecuados de datos. Por ejemplo, es posible que los usuarios puedan acceder a otros almacenes de búsqueda de archivos del mismo proyecto a través de este mecanismo.
- Implementación externa segura: Para ejecutar una app de forma segura fuera de AI Studio (p.ej., después de descargar el archivo ZIP), debes trasladar la lógica que usa la clave de API a un componente del servidor para evitar que la clave se exponga a los usuarios finales. Esto no es necesario si realizas la implementación con Cloud Run.
- Advertencia sobre la exposición de la clave: No se recomienda reemplazar el marcador de posición por una clave de API real en un entorno del cliente, ya que la clave será visible para cualquier usuario.
Compatibilidad con herramientas y funciones
- Importación de desarrollo local: Actualmente, no puedes desarrollar apps de forma local con herramientas externas ni importarlas a AI Studio.
¿Qué sigue?
- Mira lo que crearon otros usuarios y obtén inspiración para remezclar un proyecto existente en la Galería de apps.
- Consulta la playlist de YouTube para ver una colección de instructivos sobre la programación de la atmósfera de AI Studio que te ayudarán a comenzar.