Cómo Crear un Detector de Contenido AI con Cursor AI

Introducción

En este tutorial vamos a construir un detector de contenido AI utilizando Next.js y Cursor AI, sin escribir ni una sola línea de código manualmente. Te mostraré el resultado final antes de comenzar con el desarrollo.

Demo del Proyecto Final

Tengo aquí un ejemplo de contenido generado por AI. Voy a copiarlo, pegarlo en nuestro proyecto y hacer clic en «Detectar contenido AI».

Resultados obtenidos:

• Tipo de contenido: Generado por AI
• Confianza AI: 70%
• Escritura humana: 29%
• Palabras tipo AI: 79%
• Conclusión: Este contenido tiene una alta probabilidad de ser generado por AI

¿Qué es Cursor AI?

Cursor AI es un editor de código con inteligencia artificial integrada que incluye características como:

• Composer (Compositor)
• Chat (Conversación)
• Symbols (Símbolos)
• Y muchas otras funciones

Está construido sobre Visual Studio Code, así que si no lo tienes instalado, asegúrate de descargarlo.

Configuración Inicial

Paso 1: Crear la Aplicación Next.js

1. Abrir Cursor AI
2. Presionar Cmd + L (Mac) o Ctrl + L (Windows) para abrir la ventana de chat
3. También puedes hacer clic en el ícono de chat
4. En la consulta escribir: «¿Cómo crear una aplicación Next.js?»
5. Seleccionar Claude como modelo (es mejor para programación que GPT-4)
6. Presionar Enter

Paso 2: Ejecutar los Comandos

1. Abrir la terminal: Terminal → New Terminal
2. Hacer clic en «Run» para ejecutar el comando sugerido
3. Cuando pregunte por el nombre del proyecto, usar punto (.) para usar el nombre de la carpeta actual: «AI content detector»
4. Aceptar las configuraciones por defecto
5. Ejecutar la aplicación haciendo clic en «Run» nuevamente

La aplicación se ejecutará en un puerto local. Al abrirlo verás la aplicación Next.js básica funcionando.

Implementación de la Lógica Principal

Paso 3: Configurar la API

1. Ir a RapidAPI.com y crear una cuenta si no tienes una
2. Hacer clic en «Artificial Intelligence» en las categorías
3. Buscar y seleccionar una API de detección de contenido AI
4. Suscribirse al plan gratuito
5. Copiar el código de ejemplo completo

Paso 4: Usar Cursor AI para Implementar

1. Abrir un nuevo chat en Cursor AI
2. Seleccionar Claude como modelo
3. Escribir el siguiente prompt:

Crear un proyecto llamado "AI content detector" usando Next.js basado en este código:
[Pegar el código de la API]

Implementar toda la lógica en el archivo page.js

4. Asegurarse de que el archivo page.js esté seleccionado
5. Agregar: «Implementa toda la lógica en este archivo con separación de responsabilidades»
6. Presionar Enter

Paso 5: Aplicar los Cambios

1. Cursor AI mostrará las opciones: Ask, Copy, Apply
2. Hacer clic en «Apply» para actualizar el archivo actual
3. Revisar los cambios propuestos
4. Hacer clic en «Accept» o presionar Y para aceptar
5. Para aceptar todos los cambios de una vez, hacer clic en «Accept» en la parte superior

Creación de la API Route

Paso 6: Usar el Composer

El AI sugerirá crear una carpeta api/detect con un archivo route.js.

1. Presionar Shift + Cmd + I (Mac) o Shift + Ctrl + I (Windows) para abrir el Composer
2. Escribir: «Crear este archivo y carpeta» y pegar la ruta sugerida
3. El Composer escaneará el proyecto y creará el archivo automáticamente
4. Presionar Enter y aceptar todos los cambios

Paso 7: Implementar la Lógica de la API

1. Copiar el código de la API route sugerido por el chat
2. Reemplazar el contenido del archivo route.js con este código
3. Guardar los cambios

Prueba y Mejoras

Paso 8: Probar la Aplicación

1. Ejecutar la aplicación
2. Recargar la página
3. Pegar contenido generado por AI
4. Hacer clic en «Detectar»
5. Verificar que aparezcan los resultados

Paso 9: Mejorar la Presentación

Si los resultados aparecen como JSON crudo:

1. Abrir el chat de Cursor AI
2. Asegurarse de que page.js esté seleccionado
3. Escribir: «Formatear esto para hacerlo más legible sin usar JSON»
4. Presionar Enter y aplicar los cambios

Paso 10: Depuración (si es necesario)

Si aparecen valores como «NaN» (Not a Number):

1. Agregar console.log(data) en el código para ver la estructura de la respuesta
2. Abrir las herramientas de desarrollador del navegador
3. Copiar la estructura de datos completa
4. Volver al chat de Cursor AI y escribir: «Esta es la estructura de datos:» [pegar la estructura]
5. Aplicar las correcciones sugeridas

Estilización con Tailwind CSS

Paso 11: Hacer el Diseño Más Atractivo

1. En el chat de Cursor AI escribir: «Estilizar esto usando Tailwind CSS y hacerlo elegante»
2. Esperar a que genere el código
3. Hacer clic en «Apply» para aplicar todos los cambios
4. Aceptar las modificaciones

Resultado Final

Una vez completados todos los pasos, tendrás una aplicación completamente funcional que:

• Acepta texto como entrada
• Analiza si fue generado por AI
• Muestra resultados formatados incluyendo:
  • Porcentaje de confianza de AI
  • Porcentaje de escritura humana
  • Palabras características de AI
  • Conclusión sobre la probabilidad

Consejos Importantes

1. Cursor AI es muy potente – puede entender el contexto y hacer cambios precisos
2. Los prompts específicos dan mejores resultados – mientras más detallado seas, mejor será el resultado
3. Claude es mejor para programación que otros modelos
4. El Composer puede crear archivos y carpetas automáticamente
5. Siempre revisa los cambios antes de aceptarlos

¡Con esto has creado un detector de contenido AI completamente funcional sin escribir código manualmente!