Construye un Generador de Contenido con IA usando Cursor

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 o Cmd + 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

1. Abre la terminal en Cursor
2. Cierra la barra lateral para tener más espacio
3. Ejecuta el comando que te sugiera Cursor (normalmente npx create-next-app@latest)
4. Cuando te pida el nombre del proyecto, usa un punto (.) para usar la carpeta actual
5. Presiona Enter y acepta todas las configuraciones por defecto

1.3 Ejecutar la aplicación

1. Una vez completada la instalación, verás la estructura de carpetas creada
2. Ejecuta npm run dev para iniciar el servidor de desarrollo
3. Tu aplicación Next.js básica estará funcionando

Paso 2: Integrar Gemini AI

2.1 Preparar el archivo principal

1. Navega al archivo page.js (que será nuestro archivo principal)
2. Asegúrate de que este archivo esté enfocado/seleccionado

2.2 Obtener la documentación de Gemini AI

1. Ve a ai.google.dev
2. Busca la documentación de la API
3. En «Capabilities», haz clic en «Text Generation»
4. Copia la URL de la documentación

2.3 Usar Cursor para implementar Gemini AI

1. Abre el chat de Cursor (Ctrl/Cmd + L)
2. Asegúrate de que el archivo page.js esté seleccionado
3. Usa la función «Add Web» y pega la URL de la documentación de Gemini
4. 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.

5. Presiona Enter y espera a que Cursor lea la documentación
6. Haz clic en «Apply» y luego en «Accept» para aplicar los cambios

Paso 3: Configurar la API Key

3.1 Obtener tu API Key

1. Ve al sitio web oficial de Gemini AI
2. Haz clic en «Get API Key in Google AI Studio»
3. Selecciona tu proyecto de Google
4. Crea y copia tu API Key

3.2 Configurar la API Key en el proyecto

1. Regresa a tu proyecto en Cursor
2. Busca donde dice REPLACE_WITH_YOUR_API_KEY
3. Reemplázalo con tu API Key real

Paso 4: Instalar dependencias

4.1 Instalar el paquete de Gemini

1. Cursor te habrá sugerido qué paquete instalar
2. Abre la terminal
3. Detén el servidor si está corriendo (Ctrl + C)
4. Ejecuta el comando de instalación (generalmente algo como npm install @google/generative-ai)
5. Reinicia el servidor con npm run dev

Paso 5: Probar la aplicación

1. Ve a tu navegador donde está corriendo la aplicación
2. Prueba escribiendo algo como: «Genera 10 ideas de proyectos en JavaScript»
3. ¡Tu aplicación debería generar contenido con IA!

Paso 6: Mejorar el diseño con Tailwind CSS

6.1 Rediseñar la interfaz

1. Asegúrate de tener el archivo page.js enfocado
2. Abre el chat de Cursor
3. Escribe el siguiente prompt:

Usa Tailwind CSS para rediseñar esta página y hazla más atractiva y vibrante.

4. Cursor modificará automáticamente tu código
5. Haz clic en «Apply» y luego «Accept»
6. Guarda el archivo

6.2 Solucionar problemas de visibilidad

Si el texto no es visible en los campos de entrada:

1. Escribe en el chat: «El texto en el campo de entrada no es visible. Implementa también estados de carga y error.»
2. Acepta los cambios sugeridos
3. Recarga la página

Paso 7: Probar las mejoras

1. Prueba escribiendo: «Explica las variables en JavaScript»
2. Deberías ver un estado de carga mientras se genera el contenido
3. 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.