Crea apps en Google AI Studio

En esta página, se describe cómo usar Google AI Studio para compilar (o "vibe codificar") y, luego, implementar rápidamente apps que prueben las capacidades más recientes de Gemini, como Nano Banana y la API de Live. Ahora, Google AI Studio admite tiempos de ejecución de pila completa, lo que te permite compilar aplicaciones sólidas con lógica del servidor, administración segura de secretos y compatibilidad con paquetes de npm, todo a través de instrucciones en lenguaje natural.

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 inspiración, 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 aplicación completa. De forma predeterminada, crea un entorno de pila completa que puede incluir lo siguiente:

  • Cliente: Es un frontend web (React es el valor predeterminado).
  • Servidor: Es un entorno de ejecución de Node.js que permite realizar llamadas a la API seguras, conexiones a bases de datos y el uso de paquetes npm.

Para ver el código que se genera, selecciona la pestaña Código en el panel de vista previa de la derecha. El agente antigravedad administra de forma inteligente varios archivos en toda tu pila, lo que garantiza que los cambios se propaguen correctamente.

El agente de Antigravity

El agente de Antigravity es la principal función basada en IA de Google Antigravity y, ahora, los componentes principales del arnés del agente potencian la experiencia del modo de compilación en Google AI Studio. Va más allá de la simple generación de código, ya que mantiene el contexto de todo tu proyecto, administra varios archivos y comprende instrucciones complejas para compilar aplicaciones robustas de pila completa.

Las siguientes son algunas de las funciones clave:

  • Comprensión del contexto: Mantiene el contexto de las instrucciones anteriores y los estados de los archivos.
  • Administración de varios archivos: Controla las dependencias en varios archivos.
  • Ejecución verificada: Verifica las actualizaciones de código para reducir las alucinaciones.

Capacidades de pila completa

Google AI Studio libera el poder del ecosistema web moderno, lo que te permite crear mucho más que prototipos del cliente.

  • Entorno de ejecución del servidor y npm: Usa la vasta biblioteca de paquetes de npm. El agente identificará e instalará automáticamente los paquetes según sea necesario para tu app (p.ej., bibliotecas específicas para la visualización de datos o clientes de API). También puedes solicitar paquetes específicos si lo deseas.
  • Administración de secretos: Almacena de forma segura claves de API y secretos en el menú Configuración. Se puede acceder a ellas en el código del servidor, lo que las mantiene a salvo de la exposición del cliente.
  • Multijugador: Crea experiencias colaborativas en tiempo real directamente en AI Studio. El tiempo de ejecución del servidor administra el estado y las conexiones que se requieren para que los usuarios interactúen entre sí.

Más información para desarrollar apps de pila completa

Continúa con la compilación

Una vez que Google AI Studio genere el código inicial de tu aplicación, puedes seguir perfeccionándolo:

Crea en 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.
  • Edita el código directamente: Abre la pestaña Código en el panel de vista previa para realizar ediciones en vivo.

Desarrollar externamente

Para flujos de trabajo más avanzados, puedes exportar el código y trabajar en tu entorno preferido:

  • Descarga y desarrolla de forma local: Exporta el código generado como un archivo ZIP y, luego, impórtalo en tu editor de código.
  • Push to GitHub: Integra el código con tus procesos existentes de desarrollo y de implementación enviándolo a un repositorio de GitHub.

Características clave

Google AI Studio incluye varias funciones para que el proceso de creación sea intuitivo y visual:

  • Crea apps de pila completa y realiza iteraciones en ellas: Crea apps de pila completa con solo una instrucción y realiza iteraciones a través del chat o el modo de anotación. El modo de anotación te permite destacar cualquier parte de la IU de tu app y describir el cambio que deseas.
  • Comparte y, luego, implementa tu app: Puedes compartir tus creaciones con otras personas para colaborar o mostrar tu trabajo. Luego, cuando tu app esté lista, impleméntala en Cloud Run.
  • Galería de apps: La galería de apps proporciona una biblioteca visual de ideas de proyectos. Puedes explorar las posibilidades de Gemini, obtener vistas previas de las aplicaciones al instante y remezclarlas para hacerlas tuyas.

Crea e itera apps de pila completa: breve texto sobre la compatibilidad con el tiempo de ejecución, itera con el modo de anotación Comparte e implementa: comparte tu app en AI Studio o impleméntala en Cloud Run Explora la galería de apps

Implementa o archiva tu app

Cuando tu aplicación esté lista, puedes implementarla de la siguiente manera:

  • Google Cloud Run: Implementa tu aplicación como un servicio escalable. Es posible que se apliquen precios de Google Cloud Run según el uso.
  • GitHub: Exporta tu proyecto a un repositorio de GitHub.

Limitaciones

En esta sección, se enumeran las limitaciones actuales del modo de compilación en Google AI Studio.

Seguridad de la clave de API

  • Del cliente: Nunca uses claves de API reales directamente en el código del cliente.
  • Del servidor: Usa la función de administración de secretos para controlar las claves sensibles de forma segura en el tiempo de ejecución del servidor.

Implementación fuera de Google 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 el acceso mínimo para evitar filtraciones o usos inadecuados de datos. Por ejemplo, es posible que los usuarios puedan acceder a otros almacenes de File Search 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 los usuarios finales vean la clave. Esto no es necesario si realizas la implementación con Cloud Run.
  • Advertencia sobre la exposición de claves: 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.

Error al compartir apps

Si compartes tu app y el usuario final recibe un error de 403 Access Restricted cuando usa la URL compartida, es posible que se deba a uno de los siguientes motivos:

  • Extensiones del navegador: Es posible que las extensiones de privacidad, como Privacy Badger, estén bloqueando la app. Inhabilita la extensión para evitar el error.
  • Problemas de compilación: Es posible que haya problemas con el código actual. Indícale al agente que "corrija cualquier problema de compilación con el código actual" y, luego, vuelve a compartir la URL.

¿Qué sigue?