Crea apps en Google AI Studio

En esta página, se describe cómo usar Google AI Studio para compilar (o "vibe code") y, luego, implementar rápidamente apps que prueben las capacidades más recientes de Gemini, como Nano Banana y la API de Live. Google AI Studio ahora admite entornos de ejecución full stack, lo que te permite crear 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 el 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 creación, usa el cuadro de entrada para ingresar una descripción de lo que quieres crear. 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).
  • Del 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 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:

  • Reconocimiento 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.

  • Tiempo 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í.
  • Integración de Firebase: Aprovisiona y configura Firebase automáticamente, incluida la base de datos de Firestore (almacenamiento de datos persistente) y Firebase Authentication (flujos de acceso, específicamente "Acceder con Google"). El agente controla todo el proceso de configuración y hasta escribe el código en tu app para estos servicios.

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.

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 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 los usuarios finales vean la clave. 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.

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.

Preguntas frecuentes

¿Qué es Build in AI Studio?

AI Studio Build es una plataforma diseñada para llevarte de una instrucción simple a una aplicación potenciada por IA lista para producción con Gemini. Describe lo que quieres crear con una instrucción, y Gemini generará una app para ti. También puedes explorar nuestra galería para ver lo que puedes hacer con la API de Gemini y crear remixes de apps para hacerlas tuyas.

¿Por qué Build llama a la API de Gemini desde el código del cliente?

Por lo general, la práctica recomendada es llamar a la API de Gemini desde el servidor para no exponer tu clave de API. Sin embargo, AI Studio tiene un proxy de la API de Gemini para las llamadas del cliente, que adjunta la clave de API sin exponerla en el código. Por el momento, generamos llamadas del cliente para usar este proxy, ya que simplifica el código y te permite compartir tu app con otras personas sin tener que proporcionar una clave de API.

¿Se expone mi clave de API cuando comparto apps?

No uses una clave de API real en tu app. En su lugar, usa un valor de marcador de posición. process.env.GEMINI_API_KEY se establece en un valor de marcador de posición que puedes usar. Cuando otro usuario usa tu app, AI Studio reenvía las llamadas a la API de Gemini y reemplaza el valor del marcador de posición por la clave de API del usuario (no la tuya). No uses una clave de API real en tu app, ya que el código es visible para cualquier persona que pueda verla.

¿Quién puede ver mis apps?

De forma predeterminada, tu app es privada. Puedes compartir tu app con otros usuarios para que la usen. Los usuarios con los que compartas tu app podrán ver su código y crear una bifurcación para sus propios fines. Si compartes tu app con permiso de edición, los otros usuarios podrán editar el código de tu app.

¿Puedo ejecutar apps fuera de AI Studio?

Puedes implementar tu app en Cloud Run desde AI Studio, lo que le dará a tu app una URL pública. Se implementa junto con un servidor proxy que mantendrá privada tu clave de API. Sin embargo, la app implementada usará tu clave de API para todas las llamadas a la API de Gemini de los usuarios. También puedes descargar tu app como un archivo ZIP. Si reemplazas el valor del marcador de posición por una clave de API real, debería seguir funcionando. Sin embargo, no debes implementar tu app de esta manera, ya que cualquier usuario podrá ver la clave de API. Para que una app se ejecute de forma segura fuera de AI Studio, es necesario mover parte de la lógica al servidor, de modo que la clave de API ya no esté expuesta.

¿Puedo desarrollar apps de forma local con mis propias herramientas y, luego, compartirlas aquí?

Esta función aún no está disponible. Nos entusiasma poder admitir más casos de uso para las apps en el futuro. Considera enviarnos tus comentarios si tienes algo específico en mente.

¿Cómo puedo usar una base de datos o algún otro tipo de almacenamiento con mis apps?

Las apps de AI Studio son apps estándar que se ejecutan en un contenedor de Cloud Run. Puedes usar cualquier solución de almacenamiento a la que te puedas conectar a través de una red, siempre y cuando no haya un firewall que impida el acceso desde un rango de IP dinámico.

Estamos trabajando para agregar compatibilidad directa con el almacenamiento en el futuro, que podrás configurar directamente en AI Studio.

Para garantizar que los usuarios estén al tanto del uso que hace una app de su cámara web o de otros dispositivos, solicitamos una confirmación adicional antes de que la app pueda acceder a estas APIs de Navigator. Los creadores de apps pueden agregar estas solicitudes de permiso al archivo metadata.json de su app. Por ejemplo:

{
  "name": "My app",
  "requestFramePermissions": [
    "microphone",
    "camera",
    "display-capture",
    "geolocation",
    "bluetooth",
    "clipboard-read",
    "serial",
    "usb"
  ]
}

Los valores admitidos para requestFramePermissions son un subconjunto de las funciones controladas por políticas estándar.

¿Cómo puedo usar GitHub con mis apps?

La integración de AI Studio con GitHub te permite crear un repositorio para tu trabajo y confirmar los cambios más recientes. Actualmente, no admitimos la extracción de cambios remotos.

¿Puedo darles a otros usuarios acceso de edición a mi app?

Esta opción aún no está disponible, pero lo estará pronto.

¿Por qué se marcó mi app por incumplimiento de política?

Tenemos sistemas que revisan automáticamente las apps para garantizar que cumplan con nuestras políticas. Si descubrimos que una app incumple nuestras políticas, la quitaremos de AI Studio. Los incumplimientos de política pueden incluir, sin limitaciones, lo siguiente:

  • Apps que contienen software malicioso, phishing o suplantación de identidad
  • Apps que muestran o distribuyen contenido que infringe la política sobre imágenes de abuso sexual infantil
  • Apps que muestran o distribuyen contenido que incumple la política sobre hostigamiento
  • Apps que muestran o distribuyen contenido que incumple la política de incitación al odio
  • Apps que muestran o distribuyen contenido que incumple la política sobre Tráfico de Personas
  • Apps que muestran o distribuyen contenido que infringe la política de contenido sexual explícito
  • Apps que muestran o distribuyen contenido que infringe la política sobre violencia e imágenes sangrientas
  • Apps que muestran o distribuyen contenido que infringe la política sobre contenido perjudicial o peligroso

Si tu app se marcó por un incumplimiento de política y crees que se trata de un error, puedes enviar una apelación. Los incumplimientos reiterados de nuestras políticas pueden ocasionar el cierre de tu acceso a AI Studio.

¿Cuáles son mis responsabilidades como desarrollador de apps?

Te recordamos que, como propietario de tu aplicación, eres responsable de su comportamiento y de todos los datos que maneja. Esto incluye lo siguiente:

  • Cumplimiento de la ley y derechos de terceros: Asegúrate de que tu app cumpla con todas las leyes y reglamentaciones aplicables, y que no infrinja los derechos de terceros, incluidos los derechos de propiedad intelectual y privacidad.
  • Supervisión del contenido: Es posible que se aplique el cumplimiento de condiciones adicionales a otros servicios que use tu app. Por ejemplo, las Condiciones del Servicio de Google Cloud, aplicables a Firestore, requieren que los clientes que alojan contenido de terceros publiquen políticas que definan qué contenido está prohibido (p.ej., contenido ilegal) y supervisen la presencia de ese contenido ilegal.
  • Implementación segura: Implementa las protecciones y herramientas de moderación necesarias para evitar el uso inadecuado de tu aplicación.

Ten en cuenta las restricciones de uso en las Condiciones del Servicio.

Las Condiciones del Servicio Adicionales de la API de Gemini se aplican al uso de las apps que se muestran en la galería de apps de AI Studio, a menos que se indique lo contrario.

¿Qué sigue?