Crea y Publica tu App con IA GRATIS (Google AI Studio + Vercel)

Hoy te voy a llevar paso a paso por el proceso de crear, probar y publicar una aplicación web usando Google AI Studio y Vercel. La idea es simple y práctica: construir una herramienta que automatice tareas posteriores a la grabación de tus videos de YouTube. En mi caso la llamé Solo Graba. Esta aplicación toma la transcripción completa del video como input y genera títulos optimizados, descripciones y prompts para miniaturas. En este artículo te explico cómo lo diseñé, cómo lo implementé, cómo lo probé y cómo lo publiqué en Vercel. También comparto las reglas que utilicé para títulos, descripciones y miniaturas, cómo manejé la generación de imágenes y cómo integré la API de Gemini.

Si quieres saltar directo a las plataformas que uso aquí tienes los enlaces:

Google AI Studio: https://aistudio.google.com

Vercel: https://vercel.com

Vídeo sobre Google AI Studio: https://youtu.be/ZrlgujmhQv8

Mi playlist sobre crear apps: https://www.youtube.com/playlist?list=PLBTuX25MUpdo9YuMzu-o9c80p1q40EBfI

Inscríbete para prompts y metodología: https://rodrigoolivares.com

Taula de continguts

🧠 Por qué usar Google AI Studio para prototipar aplicaciones
💬 Preparar la idea y escribir prompts efectivos
🛠 Crear la app en Google AI Studio paso a paso
🎯 Diseño de flujos: entrada de transcripciones y generación de contenido
🖼️ Miniaturas: prompts, previews y control de costos
🔁 Iterar ideas: refrescar títulos y thumbnails
📐 Modelos de imagen y control de aspect ratio
🧾 Reglas y buenas prácticas para títulos y descripciones
🔐 Integración con Gemini API y generación de claves
💾 Guardar el proyecto en GitHub desde Google AI Studio
🚀 Deploy en Vercel desde GitHub
✅ Verificar que la app funciona en producción
🧩 Solución de errores comunes
📈 Ideas para escalar: base de datos, SaaS y múltiples usuarios
📌 Recursos, enlaces y recomendaciones finales
❓ Preguntas frecuentes rápidas
🎬 Cierre y próximos pasos

🧠 Por qué usar Google AI Studio para prototipar aplicaciones

Google AI Studio es una plataforma que facilita construir prototipos y aplicaciones con funcionalidades de IA sin necesidad de partir desde cero. Es gratuita en su nivel inicial y ofrece integración directa con modelos de Gemini y herramientas de desarrollo convenientes. En mi experiencia la ventaja clave es poder convertir instrucciones en lenguaje natural en componentes de interfaz y lógica básica de la app de forma rápida.

Frente a otros enfoques tradicionales, Google AI Studio te permite prototipar la experiencia y la navegación primero, validar que la usabilidad tiene sentido y después integrar almacenamiento o bases de datos cuando lo necesites. En este proyecto en particular pensé en separar el trabajo en dos fases:

Fase 1: Contexto, diseño y funcionalidades básicas. Probar la navegación, entrada de transcripciones y generación de contenido.
Fase 2: Integración con base de datos y multiusuario, cuando ya la lógica y la UI estén definidas.

Esta separación me permitió lanzar una versión alfa funcional rápidamente y planear la expansión con mayor claridad. Además, al ser inicialmente el único usuario, no necesitaba la complejidad de la base de datos para validar el flujo.

💬 Preparar la idea y escribir prompts efectivos

Antes de empezar a generar componentes en Google AI Studio te recomiendo ordenar la idea con un asistente conversacional. Yo, por ejemplo, tuve una conversación con ChatGPT para convertir mi idea hablada en prompts estructurados. Esa etapa es clave porque te permite traducir lo que quieres en instrucciones concretas que la plataforma va a entender.

Un ejemplo del prompt inicial que usé fue:

crea una aplicación web llamada Solo Graba, diseñada para creadores de contenido que quieren enfocarse solo en grabar sus videos para YouTube y automatizar todo el trabajo posterior. El usuario pega directamente la transcripción completa al video como input principal, opcionalmente puede probar pegando el link de YouTube para que el sistema intente obtener la transcripción automáticamente.

Ese prompt sirvió para que la plataforma generara la estructura básica, los componentes y las acciones necesarias. En general te recomiendo estructurar tus prompts con estas secciones:

Objetivo general de la app.
Usuario objetivo y sus acciones principales.
Inputs esperados (por ejemplo transcripción completa o link de YouTube).
Outputs deseados (títulos, descripciones, prompts de miniatura, puntuaciones, etc.).
Reglas y buenas prácticas que quieres forzar en la generación del contenido.

Si te cuesta escribir prompts claros empieza por una conversación abierta. Graba tus ideas en voz o texto y luego pídeles que las transformen en un prompt claro y conciso. Un prompt más estructurado te dará resultados más coherentes al generar componentes.

🛠 Crear la app en Google AI Studio paso a paso

Voy a detallar el flujo que seguí dentro de Google AI Studio para generar la aplicación. La plataforma te permite hacer Build con lenguaje natural. Copié el prompt y lo pegué en la sección Build. Inmediatamente la herramienta comenzó a interpretar y a codificar la aplicación.

Estos son los pasos concretos que realicé:

Entrar a Google AI Studio y elegir Build.
Pegar el prompt con la descripción completa de la app.
Esperar a que la herramienta genere la estructura de código y los componentes visuales.
Revisar la vista de Code para ver el avance y la vista de Preview para comprobar la UI básica.

En esta etapa la app ya generó un formulario donde pegar la transcripción y botones para generar títulos, descripciones y prompts de thumbnails. Aún no estaba perfecta ni integrada con una API de imágenes o con una base de datos, pero sí cumplía la función básica que necesitaba.

La primera prueba funcional fue pegar una transcripción larga para ver si la app era capaz de generar títulos y descripciones relevantes. La respuesta fue positiva y el sistema incluso entregó puntajes para cada título sugerido, por ejemplo 9 de 10, 8 de 10, 7 de 10.

Consejos prácticos en esta fase

No te obsesiones con el diseño visual en la primera iteración. Prioriza la funcionalidad y la usabilidad.
Divide el trabajo en prompts: genera el prompt para estructura y navegación, y otro para integrar servicios externos como bases de datos.
Si la app tarda mucho en procesar un request desde la interfaz de prueba, usualmente significa que está trabajando con un input grande. Paciencia.

🎯 Diseño de flujos: entrada de transcripciones y generación de contenido

La idea central de Solo Graba es que el usuario pegue la transcripción completa del video y la app genere a partir de eso todo el trabajo posterior. La interfaz principal contiene:

Campo para pegar la transcripción completa.
Botón para intentar obtener la transcripción automáticamente a partir de un link de YouTube.
Botones para generar títulos, descripciones optimizadas y prompts de miniatura.
Botones para refrescar ideas de títulos y thumbnails.
Sección de previsualización y descarga de la miniatura generada.

Este flujo cubre el ciclo de creación de contenido que yo más uso. A menudo yo comienzo a grabar sin guión. Quiero un segundo cerebro que, en base a cómo creo mis videos, personalice el proceso y automatice la generación de metadatos del video.

🖼️ Miniaturas: prompts, previews y control de costos

Las miniaturas son clave para YouTube y tienden a consumir créditos cuando se generan imágenes con APIs externas. Por ese motivo diseñé una estrategia mixta en la app:

Primero generar prompts descriptivos y resúmenes del concepto de la miniatura para poder revisarlos sin gastar en generar la imagen.
Mostrar un botón para refrescar ideas de miniatura y otro para copiar el prompt listo para usar con la API que elijas.
Solo cuando confirmes el prompt presionarás el botón para generar la imagen, lo que consumirá la API.

En la versión inicial preferí mostrar prompts en inglés, ya que la mayoría de modelos de imagen funcionan mejor en ese idioma. Sin embargo, también me aseguré de que la explicación del concepto de la miniatura apareciera en español para facilitar la comprensión rápida.

Reglas para miniaturas integradas

Estas son las reglas que definí para que la generación de miniaturas sea consistente con mi estilo:

Siempre incluir texto visible en español cuando aparezca texto en la miniatura.
Texto máximo de cuatro palabras para el título corto dentro de la miniatura.
Tipografía grande y en bold para maximizar legibilidad en pantallas pequeñas.
Aspect ratio obligatorio 16 a 9 para que las imágenes se vean bien en previsualizaciones y en el reproductor de YouTube.
Botones para descargar la miniatura y para copiar el prompt listo para generar la imagen.

Implementar estas reglas en los prompts es tan simple como añadir instrucciones adicionales a los prompts internos que la app usa para generar títulos, descripciones y prompts de imagen. Por ejemplo agregué instrucciones como Spanish text y especificaciones de aspect ratio 16:9 para forzar el formato correcto.

🔁 Iterar ideas: refrescar títulos y thumbnails

Una característica que incluí fue la posibilidad de refrescar ideas para títulos y miniaturas. En la práctica esto significa que el usuario puede pedir nuevas alternativas sin repetir todo el proceso. Para que esto funcione bien implementé botones que:

Solicitan nuevas alternativas de título basadas en la misma transcripción.
Solicitan nuevas ideas de miniatura con una explicación corta de cada idea y un botón para copiar el prompt correspondiente.
Permiten la generación condicional de imágenes solo cuando el usuario lo aprueba.

Esto ayuda a reducir costos y a aumentar el control creativo. En mi flujo personal, prefiero revisar los conceptos de la miniatura antes de generar la imagen porque generar imágenes con la API de imagen puede consumir crédito. Así tengo la libertad de elegir la mejor idea y generar solo la que quiero.

📐 Modelos de imagen y control de aspect ratio

Al probar la generación de imágenes noté que algunos modelos no respetan siempre la relación de aspecto 16 a 9 y generan imágenes cuadradas por defecto. Para resolver esto probé cambiar el modelo de imagen dentro de la aplicación a uno más obediente con las instrucciones de aspecto. En mi caso escogí imagen 4 dentro de las opciones disponibles porque permitió forzar 16 a 9 de manera confiable.

Consejos concretos al generar miniaturas:

Siempre especifica el aspect ratio en el prompt.
Indica el idioma del texto visible con frases como Spanish text o text in Spanish para evitar que el modelo use inglés.
Si el modelo no respeta la relación de aspecto, prueba otro modelo o otra versión de la API de imagen.

Después de cambiar el modelo y añadir instrucciones explícitas la app generó miniaturas en 16 a 9 y mejoró la legibilidad al aumentar la tipografía y el espacio. Un detalle importante: algunos servicios como NanoBanana son excelentes en edición pero no siempre son consistentes respecto al aspect ratio al generar imágenes por primera vez. Por eso cambiar de modelo y ser explícito en el prompt es clave.

🧾 Reglas y buenas prácticas para títulos y descripciones

Más allá de las miniaturas, definí un conjunto de reglas para títulos y descripciones basado en buenas prácticas de YouTube. Estas reglas son las que le pedí a ChatGPT que consolidara para luego aplicarlas dentro de los prompts de generación en la app. Aquí están las principales:

Títulos: máximo 70 caracteres. Incluir palabra clave principal al inicio cuando sea posible.
Descripciones: incluir un primer párrafo corto y directo que describa el valor del video. Añadir links mencionados en el video.
Hashtags: evitar uso innecesario de hashtags en la descripción si no aportan valor. Cuando se usan, no abusar.
CTA: incluir una llamada a la acción clara en la descripción, por ejemplo invitar a suscribirse o a descargar un recurso.
Miniaturas: texto corto y grande en bold, máximo cuatro palabras en el título dentro de la thumbnail.

Aplica estas reglas en tus prompts internos para que la aplicación genere contenido consistente. Por ejemplo, al generar descripciones puedes pedir una plantilla que incluya:

Resumen de 1 a 2 líneas.
Lista de puntos clave con bullets si corresponde.
Links mencionados en el video.
CTA y hashtags mínimamente usados.

Estas reglas simplifican mucho el trabajo de postproducción y ayudan a mantener una coherencia de marca en tus videos.

🔐 Integración con Gemini API y generación de claves

Para que la app pudiera generar contenido desde un servidor desplegado en Vercel necesitaba una API key. Google AI Studio permite obtener claves de Gemini desde su panel. Los pasos fueron:

En Google AI Studio ir a Get API Key.
Crear una nueva API key asociada al proyecto de la app. Yo la llamé App Solo Grava.
Copia la clave y guardarla de forma segura en el portapapeles.
En Vercel crear una variable de entorno con el nombre esperado por la app. En mi caso la variable se llamó vite-api-key.

Importante: en entornos de hosting como Vercel debes pasar la API key como variable de entorno para que el serverless o el frontend la use de forma segura. No incluyas claves directamente en el código ni en archivos públicos.

En la app generada por Google AI Studio hay un archivo donde se configura la referencia a la variable de entorno. Si el nombre no coincide con lo que Vercel espera, debes editarlo. En mi caso cambié la referencia para que use vite-api-key que es la variable que configuré en Vercel. Luego hice commit de ese cambio y Vercel automáticamente detectó el nuevo commit y disparó un deployment.

💾 Guardar el proyecto en GitHub desde Google AI Studio

Una vez que la aplicación estaba funcionando localmente dentro de Google AI Studio el siguiente paso fue guardar el repositorio en GitHub para llevar un control de versiones y conectar con Vercel. Google AI Studio permite crear directamente el repositorio y hacer el primer commit. El flujo que seguí:

En Google AI Studio hacer clic en Guardar en GitHub.
Poner un nombre al repositorio, por ejemplo solo-graba-app, y marcar visibilidad privada si quieres trabajar en privado.
Crear el repo y permitir que Studio haga stage and commit all changes.
Verificar en GitHub que los archivos fueron subidos correctamente.

Con el repositorio en GitHub listo era solo cuestión de conectar GitHub con Vercel para desplegar la app en un dominio público o subdominio.

🚀 Deploy en Vercel desde GitHub

Vercel es una plataforma de hosting y deployment ideal para aplicaciones frontend y serverless. Tiene un plan gratuito llamado Hobby que es perfecto para proyectos personales y prototipos. Para desplegar la app en Vercel seguí estos pasos:

Crear una cuenta en Vercel y conectar GitHub.
Instalar el acceso a solo algunos repositorios y seleccionar el repo que creamos desde Google AI Studio.
Importar el proyecto desde Vercel y verificar el framework detectado.
Configurar variables de entorno en Vercel, por ejemplo vite-api-key con el valor de la API key de Gemini.
Hacer Deploy desde Vercel. La primera vez puede tardar mientras instala dependencias y compila la app.

Una ventaja muy práctica es que Vercel queda enlazado con el repositorio en GitHub. Esto significa que cada push a main o al branch que configures disparará un nuevo deployment automático. En mi caso hice ajustes menores en GitHub y Vercel desplegó automáticamente una nueva versión.

El plan Hobby de Vercel tiene límites que debes conocer para no tener sorpresas. Según la documentación el plan gratuito ofrece un límite de archivos estáticos, horas de CPU y builds por mes. Si superas esos límites tendrás que considerar un plan de pago. Para mi proyecto de prototipo el plan gratuito fue suficiente.

✅ Verificar que la app funciona en producción

Una vez desplegada la app en Vercel comprobé que las funcionalidades de generación seguían funcionando correctamente. Pegué la transcripción de un video corto y pedí que generara títulos, descripciones y prompts de miniatura. La aplicación consultó la API de Gemini a través de la variable environment y me devolvió los resultados esperados.

Pasos de verificación que recomiendo:

Probar con una transcripción corta y una larga para validar que el límite de tokens no te haga fallar.
Verificar que los prompts de imagen respeten el aspect ratio cuando solicitas la generación en producción.
Probar botones de refresco de títulos y miniaturas para confirmar que generan alternativas sin errores.
Comprobar que el botón de descarga de miniatura realmente descarga la imagen en 16 a 9.

🧩 Solución de errores comunes

Durante el proceso experimenté algunos problemas típicos que te ahorraré tiempo teniendo en cuenta estas soluciones:

La API no responde en producción: revisa que la variable de entorno esté correctamente configurada en Vercel y que el nombre coincida con el que el código espera. Evita hardcodear claves en archivos públicos.
Relacion de aspecto no respetada: prueba cambiar el modelo de imagen o añade instrucciones explícitas de aspect ratio en el prompt. En mi caso cambiar al modelo imagen 4 resolvió el problema.
Generación de texto en inglés: añade Spanish text o text in Spanish en los prompts de imagen y en la instrucción de generación de conceptos para forzar español.
Errores al guardar en GitHub: asegúrate de que Google AI Studio tenga permiso para crear repositorios en tu cuenta y que seleccionaste la visibilidad deseada.

📈 Ideas para escalar: base de datos, SaaS y múltiples usuarios

La versión alfa que describí es ideal para validación personal. Si quieres convertir esto en una herramienta multiusuario o un SaaS hay varios pasos lógicos para escalar:

Agregar autenticación y cuentas de usuario para que cada creador tenga su espacio privado.
Integrar una base de datos para almacenar transcripciones, versiones de títulos, prompts aprobados y miniaturas generadas.
Implementar un sistema de créditos o planes para controlar el uso de APIs de imagen y gestión de costos.
Optimizar prompts y cachear resultados para reducir llamadas repetidas a la API.
Monetizar con planes por uso o suscripción si la plataforma gana tracción.

Si quieres, puedo mostrar en videos posteriores cómo integrar una base de datos y cómo diseñar la arquitectura para registrar usuarios y su historial. Con un plan bien pensado puedes convertir esta app en una SaaS rentable.

📌 Recursos, enlaces y recomendaciones finales

Para terminar te dejo un resumen con los recursos que utilicé y enlaces útiles:

Google AI Studio: https://aistudio.google.com
Vercel: https://vercel.com
Video sobre Google AI Studio: https://youtu.be/ZrlgujmhQv8
Mis videos sobre crear apps: https://www.youtube.com/playlist?list=PLBTuX25MUpdo9YuMzu-o9c80p1q40EBfI
Mi página para acceder a prompts y metodología: https://rodrigoolivares.com

Resumen final de pasos para crear y publicar la app:

Define la idea y estructura del flujo con un asistente conversacional o escribiendo prompts claros.
Usa Google AI Studio para generar rápidamente la UI y la lógica básica con lenguaje natural.
Diseña reglas para títulos, descripciones y miniaturas y agrégalas a los prompts internos.
Prueba la generación de miniaturas en inglés y usa instrucciones como Spanish text para el texto visible.
Obtén la API key de Gemini desde Google AI Studio y guárdala en Vercel como variable de entorno vite-api-key.
Guarda el proyecto en GitHub desde Google AI Studio y conecta el repo con Vercel.
Importa el proyecto en Vercel, configura variables de entorno y despliega.
Verifica en producción y ajusta prompts, diseño y modelos de imagen según sea necesario.

❓ Preguntas frecuentes rápidas

¿Necesito pagar para usar Google AI Studio?

Google AI Studio tiene un nivel gratuito útil para prototipos. Algunas funciones o el uso intensivo de modelos pueden requerir créditos o planes de pago. Puedes comenzar gratis y evaluar el consumo.

¿Se puede publicar la app en otros hostings además de Vercel?

Sí. Vercel es cómodo y tiene integración con GitHub y deployments automáticos, pero en otros hostings se puede publicar. Dependiendo de tu proveedor puede requerir ajustes adicionales. Si quieres puedo mostrar cómo hacerlo con Hostinger en otro video.

¿Cómo controlar el gasto en la generación de imágenes?

Mi estrategia fue primero generar prompts y revisarlos antes de generar la imagen. Solo genero la imagen cuando estoy seguro del prompt. También puedes implementar un sistema de créditos para usuarios o limitar la generación por usuario.

¿Es posible automatizar la obtención de transcripción desde YouTube?

Sí. En la app incluí la opción opcional de pegar el link de YouTube para que el sistema intente obtener la transcripción automáticamente. La implementación depende de permisos y de APIs que permitan acceder a la transcripción.

🎬 Cierre y próximos pasos

Crear y publicar una aplicación web con IA ya no es un proceso prohibitivo. Usando herramientas como Google AI Studio puedes pasar de una idea hablada a una aplicación funcional en cuestión de horas. Vercel facilita llevar esa app a producción con despliegues automáticos desde GitHub. En mi caso logré construir Solo Graba, una herramienta para ahorrar tiempo en la creación de metadatos de YouTube, y la dejé publicada en Vercel en una versión alfa lista para ser usada y mejorada.

Si te interesa que haga un seguimiento con la integración de base de datos, autenticación de usuarios y convertir esto en un SaaS, comenta y dime qué parte te gustaría que profundice. También te dejo otra vez los enlaces para que puedas comenzar hoy mismo: