Crea apps en Google AI Studio

En esta página, se describe cómo usar Google AI Studio para compilar rápidamente (o "vibe code") y, luego, implementar apps que prueben las capacidades más recientes de Gemini, como Nano Banana y la API de Live. Ahora, Google AI Studio 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 vibe coding en el modo Build de Google AI Studio. Puedes comenzar a compilar de varias maneras:

  • Comienza con una instrucción: En el modo Build, usa la casilla 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 quieres con el botón de voz a texto.
  • Botón "Voy a tener suerte": Si necesitas inspiración 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 Copy 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 la instrucción, AI Studio crea una aplicación completa. De forma predeterminada, crea un entorno full stack que puede incluir lo siguiente:

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

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

El agente Antigravity

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

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 full stack

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

  • Entorno de ejecución del servidor y npm: Usa la amplia 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 la API). También puedes solicitar paquetes específicos si lo deseas.
  • Administración de secretos: Almacena de forma segura las claves de API y los secretos en el menú Settings. Se puede acceder a ellos en el código del servidor, lo que los mantiene a salvo de la exposición del cliente.
  • Multijugador: Crea experiencias colaborativas en tiempo real directamente en AI Studio. El entorno de ejecución del servidor administra el estado y las conexiones necesarias para que los usuarios interactúen entre sí.
  • Integración de Firebase: Aprovisiona y configura automáticamente Firebase, 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 e incluso escribe el código en tu app para estos servicios.

Más información sobre el desarrollo de apps full stack

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:

Compila en Google AI Studio

  • Itera con Gemini: Usa el panel de chat en el modo Build para pedirle a Gemini que realice modificaciones, agregue funciones nuevas o cambie el estilo.
  • Edita el código directamente: Abre la pestaña Code en el panel de vista previa para realizar ediciones en vivo.

Desarrolla externamente

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

  • 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.
  • Envía a GitHub: Integra el código con tus procesos de desarrollo e implementación existentes. Para ello, envíalo 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:

  • Crea apps full stack y realiza iteraciones en ellas: Crea apps full stack 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 lo que es posible con Gemini, obtener una vista previa de las aplicaciones al instante y remezclarlas para personalizarlas.

Implementa o archiva tu app

Una vez que tu aplicación esté lista, puedes implementarla:

  • 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 Build en Google AI Studio.

Seguridad de la clave de API

  • Cliente: Nunca uses claves de API reales directamente en el código del cliente.
  • Servidor: Usa la función Administración de secretos para controlar las claves sensibles de forma segura en el entorno 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 en el 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, los usuarios pueden acceder a otras tiendas 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 mover la lógica que usa la clave de API a un componente del servidor para evitar la exposición de la clave a los usuarios finales. Esto no es necesario si realizas la implementación con Cloud Run.
  • Advertencia de 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 se hará visible para cualquier usuario.

Error al compartir apps

Si compartes tu app y el usuario final se encuentra con un error 403 Access Restricted cuando usa la URL compartida, puede deberse a uno de los siguientes motivos:

  • Extensiones del navegador: Es posible que las extensiones de privacidad, como Privacy Badger, bloqueen la app. Inhabilita la extensión para evitar el error.
  • Problemas de compilación: Es posible que haya problemas con el código actual. Pídele 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 en AI Studio?

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

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

Por lo general, se recomienda llamar a la API de Gemini desde el servidor para no exponer la clave de API. Sin embargo, AI Studio tiene un proxy de API de Gemini para llamadas del cliente, que adjunta la clave de API sin exponerla en el código. Por ahora, 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 envía las llamadas a la API de Gemini a través de un proxy 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 compartirla con otros usuarios para que la usen. Los usuarios con los que compartes tu app pueden ver su código y bifurcarlo 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á 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 del 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 complace admitir más casos de uso para apps en el futuro. Considera enviarnos comentarios si tienes algo específico en mente.

¿Cómo puedo usar una base de datos o algún otro 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 puedas conectarte a través de una red, siempre que 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, requerimos un reconocimiento 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 estándar controladas por políticas.

¿Cómo puedo usar GitHub con mis apps?

La integración de GitHub de AI Studio 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 otorgar acceso de edición a otros usuarios a mi app?

Esta funció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 determinamos que una app incumple nuestras políticas, se quitará de AI Studio. Los incumplimientos de política pueden incluir, entre otros, lo siguiente:

  • Apps que contienen software malicioso, phishing o suplantación de identidad
  • Apps que muestran o distribuyen contenido que incumple la política de imágenes de abuso sexual infantil
  • Apps que muestran o distribuyen contenido que incumple la política de acoso
  • Apps que muestran o distribuyen contenido que incumple la política sobre la incitación al odio o a la violencia
  • Apps que muestran o distribuyen contenido que incumple la política de trata de personas
  • Apps que muestran o distribuyen contenido que incumple la política de contenido sexual explícito
  • Apps que muestran o distribuyen contenido que incumple la política de Contenido violento o sangriento
  • Apps que muestran o distribuyen contenido que incumple la política de contenido peligroso o dañino

Si se marcó tu app por 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 la rescisión de tu acceso a AI Studio.

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

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

  • Cumplimiento legal y derechos de terceros: Asegurarte de que tu app cumpla con todas las leyes y reglamentaciones aplicables y no infrinja los derechos de otras personas, incluidos los derechos de propiedad intelectual y derechos de privacidad.
  • Supervisión de contenido: Es posible que se aplique el cumplimiento de condiciones adicionales a otros servicios que usa 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: Implementar las medidas de seguridad y las 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 aparecen en la galería de apps en AI Studio, a menos que se indique lo contrario.

¿Qué sigue?