Cómo crear una app con Google AI Studio
Aprende a convertir una idea en una aplicación funcional utilizando Build mode, prompts, vista previa, edición con IA, GitHub y despliegue.
¿Se puede crear una aplicación completa con Google AI Studio?
Sí. En Build mode puedes describir una aplicación mediante lenguaje natural y Google AI Studio genera el proyecto, sus archivos y una vista previa funcional.
Después puedes pedir cambios, editar directamente el código, añadir servicios, conectar GitHub y desplegar la aplicación.
No se limita a generar una pantalla
En aplicaciones web, AI Studio puede crear una estructura full-stack con frontend y backend.
Frontend
Genera la interfaz de la aplicación. React es actualmente la opción predeterminada.
Backend
Puede utilizar un runtime Node.js para lógica del servidor, APIs y operaciones privadas.
Dependencias
El agente puede identificar e instalar paquetes npm necesarios para implementar funciones.
Secrets
Las API Keys y credenciales pueden mantenerse fuera del código que llega al navegador.
Datos
Puedes conectar servicios externos, APIs y soluciones de almacenamiento.
Preview
Puedes probar la aplicación mientras AI Studio genera y modifica el proyecto.
Cómo crear una app paso a paso
Abre Build mode
Entra a Google AI Studio y selecciona la sección de construcción de aplicaciones.
Elige el tipo de proyecto
Puedes empezar con una aplicación web o, cuando corresponda, elegir Android.
Describe la aplicación
Explica qué debe hacer, qué pantallas necesita, cómo debería verse y qué funciones debe incluir.
Genera el proyecto
AI Studio crea los archivos necesarios y muestra una vista previa de la aplicación.
Prueba las funciones
Navega por la aplicación, comprueba formularios, botones, datos y diferentes estados.
Pide cambios
Describe qué quieres modificar y el agente actualizará los archivos correspondientes.
Revisa el código
Abre la vista de código para inspeccionar los archivos antes de publicar.
Exporta o despliega
Puedes sincronizar con GitHub, descargar el código o desplegar la aplicación.
Prompt para crear una aplicación desde cero
Cuanto mejor definas estructura, funciones y estilo, menos correcciones necesitarás después.
Gestor de tareas
Qué debería incluir tu prompt
Objetivo
Explica en una frase para qué servirá la aplicación.
Usuarios
Indica quién utilizará la aplicación y qué acciones puede realizar.
Pantallas
Define dashboard, login, perfil, formularios u otras secciones.
Funciones
Lista las operaciones principales que debe realizar el sistema.
Diseño
Describe colores, estilo, responsive, tipografía y jerarquía.
Restricciones
Define seguridad, comportamiento y elementos que no quieres.
Mejora la aplicación conversando
Una vez creado el proyecto, puedes seguir pidiendo modificaciones sobre la misma aplicación.
Esto permite construir por iteraciones en lugar de intentar describir absolutamente todo en el primer prompt.
Añade inicio de sesión
Cambia el diseño del dashboard
Añade filtros
Conecta una API
Corrige errores
Optimiza para móviles
Instrucciones para mejorar una app existente
Mejorar la interfaz
Buscar errores
Mejorar responsive
Funciones que puedes añadir
Inicio de sesión
Las aplicaciones web pueden integrar autenticación y servicios Firebase.
Firestore
Puedes trabajar con almacenamiento persistente para datos.
Inteligencia artificial
Incorpora modelos Gemini, generación de imágenes y otras capacidades.
Gmail, Sheets y Drive
Las aplicaciones web pueden conectarse con servicios de Google Workspace.
Experiencias colaborativas
El runtime de servidor permite crear determinadas funciones en tiempo real.
APIs externas
Conecta servicios externos desde la lógica segura del servidor.
No pongas las API Keys dentro del frontend
Para aplicaciones web, AI Studio puede guardar secretos en el entorno del servidor y utilizarlos sin exponer las credenciales en el navegador.
La clave de Gemini utilizada por una aplicación nueva puede configurarse automáticamente como GEMINI_API_KEY del lado del servidor.
Conecta la aplicación con GitHub
Cuando el proyecto crece, no tienes que mantenerlo únicamente dentro de AI Studio.
Puedes conectarlo a un repositorio y continuar trabajando desde tu IDE habitual.
Google AI Studio
↓
GitHub
↕
Visual Studio Code
↓
Desarrollo local
↓
GitHub
↕
Google AI Studio¿Cómo sacar la aplicación de AI Studio?
Cloud Run
Puedes desplegar una aplicación web desde AI Studio como un servicio accesible mediante URL.
DespliegueGitHub
Sincroniza el repositorio y administra el código como cualquier otro proyecto.
DesarrolloExportar ZIP
Descarga el proyecto y continúa desarrollándolo en tu propio entorno o servidor.
PortabilidadAI Studio también puede generar apps Android
Puedes seleccionar Android y describir una aplicación. AI Studio genera un proyecto nativo con Kotlin y Jetpack Compose y permite probarlo desde un emulador en el navegador.
Guías relacionadas
Crear aplicaciones con Google AI Studio
Sí. Build mode puede generar aplicaciones web full-stack a partir de instrucciones en lenguaje natural.
No necesariamente para crear un prototipo inicial. Sin embargo, saber programación es recomendable para revisar seguridad, arquitectura, código y despliegues antes de utilizar una aplicación en producción.
AI Studio utiliza React como frontend predeterminado y puede incluir un runtime Node.js para operaciones del lado del servidor.
Sí. AI Studio permite importar repositorios y mantener sincronización entre el proyecto y GitHub.
Sí. Puedes desplegar aplicaciones web en Cloud Run, sincronizar el código con GitHub o exportarlo para utilizar tu propio entorno.
Sí. Puede generar proyectos Android nativos utilizando Kotlin y Jetpack Compose a partir de un prompt.
Integra Gemini directamente en tus aplicaciones
Aprende cómo funciona Gemini API, cómo elegir modelos y qué debes considerar antes de llevar una aplicación con inteligencia artificial a producción.
Aprender Gemini API →