Introducción
En este tutorial aprenderás a crear una aplicación generadora de contenido con IA utilizando Next.js y Gemini AI, sin escribir ni una sola línea de código manualmente. Todo lo haremos con la ayuda del editor Cursor AI.
Paso 1: Crear la aplicación Next.js
1.1 Abrir el chat de Cursor
- Presiona
Ctrl + L
en Windows/Linux oCmd + L
en Mac para abrir el chat de Cursor - Pregunta: «¿Cómo crear una aplicación Next.js?»
1.2 Ejecutar el comando de creación
- Abre la terminal en Cursor
- Cierra la barra lateral para tener más espacio
- Ejecuta el comando que te sugiera Cursor (normalmente
npx create-next-app@latest
) - Cuando te pida el nombre del proyecto, usa un punto (
.
) para usar la carpeta actual - Presiona Enter y acepta todas las configuraciones por defecto
1.3 Ejecutar la aplicación
- Una vez completada la instalación, verás la estructura de carpetas creada
- Ejecuta
npm run dev
para iniciar el servidor de desarrollo - Tu aplicación Next.js básica estará funcionando
Paso 2: Integrar Gemini AI
2.1 Preparar el archivo principal
- Navega al archivo
page.js
(que será nuestro archivo principal) - Asegúrate de que este archivo esté enfocado/seleccionado
2.2 Obtener la documentación de Gemini AI
- Ve a ai.google.dev
- Busca la documentación de la API
- En «Capabilities», haz clic en «Text Generation»
- Copia la URL de la documentación
2.3 Usar Cursor para implementar Gemini AI
- Abre el chat de Cursor (
Ctrl/Cmd + L
) - Asegúrate de que el archivo
page.js
esté seleccionado - Usa la función «Add Web» y pega la URL de la documentación de Gemini
- Escribe el siguiente prompt:
Crea un generador de contenido con IA usando Gemini AI basado en esta documentación.
Implementa la lógica en el archivo page.js y no uses TypeScript.
- Presiona Enter y espera a que Cursor lea la documentación
- Haz clic en «Apply» y luego en «Accept» para aplicar los cambios
Paso 3: Configurar la API Key
3.1 Obtener tu API Key
- Ve al sitio web oficial de Gemini AI
- Haz clic en «Get API Key in Google AI Studio»
- Selecciona tu proyecto de Google
- Crea y copia tu API Key
3.2 Configurar la API Key en el proyecto
- Regresa a tu proyecto en Cursor
- Busca donde dice
REPLACE_WITH_YOUR_API_KEY
- Reemplázalo con tu API Key real
Paso 4: Instalar dependencias
4.1 Instalar el paquete de Gemini
- Cursor te habrá sugerido qué paquete instalar
- Abre la terminal
- Detén el servidor si está corriendo (
Ctrl + C
) - Ejecuta el comando de instalación (generalmente algo como
npm install @google/generative-ai
) - Reinicia el servidor con
npm run dev
Paso 5: Probar la aplicación
- Ve a tu navegador donde está corriendo la aplicación
- Prueba escribiendo algo como: «Genera 10 ideas de proyectos en JavaScript»
- ¡Tu aplicación debería generar contenido con IA!
Paso 6: Mejorar el diseño con Tailwind CSS
6.1 Rediseñar la interfaz
- Asegúrate de tener el archivo
page.js
enfocado - Abre el chat de Cursor
- Escribe el siguiente prompt:
Usa Tailwind CSS para rediseñar esta página y hazla más atractiva y vibrante.
- Cursor modificará automáticamente tu código
- Haz clic en «Apply» y luego «Accept»
- Guarda el archivo
6.2 Solucionar problemas de visibilidad
Si el texto no es visible en los campos de entrada:
- Escribe en el chat: «El texto en el campo de entrada no es visible. Implementa también estados de carga y error.»
- Acepta los cambios sugeridos
- Recarga la página
Paso 7: Probar las mejoras
- Prueba escribiendo: «Explica las variables en JavaScript»
- Deberías ver un estado de carga mientras se genera el contenido
- El resultado aparecerá con el nuevo diseño mejorado
Conclusión
¡Felicidades! Has creado una aplicación completa de generación de contenido con IA usando solo prompts en Cursor. Esto demuestra el poder de las herramientas de IA para el desarrollo:
- Sin código manual: Todo se generó mediante instrucciones
- Integración automática: Cursor leyó la documentación e implementó la API
- Mejoras instantáneas: El diseño y funcionalidades se mejoraron con simples prompts
Características logradas:
- ✅ Generación de contenido con Gemini AI
- ✅ Interfaz moderna con Tailwind CSS
- ✅ Estados de carga y error
- ✅ Diseño responsive y atractivo
Próximos pasos sugeridos:
- Añadir más tipos de generación de contenido
- Implementar historial de consultas
- Añadir opciones de personalización
- Mejorar el manejo de errores
Este tutorial demuestra cómo las herramientas de IA como Cursor pueden acelerar enormemente el desarrollo de aplicaciones, permitiendo a los desarrolladores enfocarse en la creatividad y funcionalidad en lugar de la sintaxis.