Plataforma de generación de contenido con IA

Resumen del proyecto En este tutorial práctico creamos una plataforma full stack para generación de contenido con IA que permite a los usuarios autenticarte, consumir créditos y producir textos de alta calidad mediante modelos GPT de OpenAI El resultado incluye autenticación con Google, gestión de créditos, panel de control, historial de generaciones y una interfaz limpia para trabajar con prompts Es un excelente caso real de aplicaciones a medida y software a medida orientado a ia para empresas

Sobre Q2BSTUDIO Somos una empresa de desarrollo de software y aplicaciones a medida especializada en inteligencia artificial, agentes IA, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi Si buscas un socio técnico para crear productos con IA y escalar en la nube visita nuestra página de inteligencia artificial o conoce cómo abordamos el desarrollo de software a medida

Pila tecnológica Frontend Next.js 14 con TypeScript y Tailwind CSS Backend API Routes de Next.js sobre Node.js Base de datos PostgreSQL con Prisma ORM Autenticación Next Auth con Google OAuth IA OpenAI GPT 4 Pagos y créditos Stripe opcional Despliegue Vercel para app y Railway para base de datos

Estructura del proyecto El esqueleto se organiza en app con rutas de api auth generate y webhooks además de páginas como dashboard y generate En lib centralizamos auth db y el cliente de OpenAI El esquema Prisma vive en prisma schema prisma Esta separación favorece mantenibilidad y escalabilidad

Requisitos previos Node 18 o superior PostgreSQL operativo Cuenta de OpenAI para claves Credenciales de Google OAuth Stripe si se desea monetizar créditos

Paso 1 inicialización Creamos el proyecto con Next.js TypeScript y Tailwind Instalamos Prisma Next Auth adaptador Prisma OpenAI y Stripe Configuramos scripts y dependencias

Paso 2 base de datos con Prisma Inicializamos Prisma y definimos los modelos User Account Session Generation y VerificationToken El usuario incluye un campo credits con valor inicial 10 Ejecutamos generación de cliente y sincronización de esquema Definimos variables de entorno como DATABASE_URL NEXTAUTH_URL NEXTAUTH_SECRET OPENAI_API_KEY credenciales de Google y Stripe

Paso 3 autenticación Configuramos Next Auth con PrismaAdapter y GoogleProvider En los callbacks añadimos al objeto de sesión el id y los credits del usuario para mostrarlos en la interfaz Publicamos la ruta app api auth nextauth para GET y POST

Paso 4 integración con OpenAI Centralizamos el cliente de OpenAI y una función generateContent que recibe prompt y modelo Gestionamos errores y devolvemos el contenido generado listo para guardarse Podemos limitar tokens y alternar entre modelos según casos de uso

Paso 5 api de generación Implementamos app api generate con un endpoint POST que valida sesión y prompt Consulta los créditos del usuario Si hay saldo llama a generateContent Usa una transacción para descontar 1 crédito y registrar el objeto Generation con prompt contenido modelo y userId Devuelve el contenido o errores claros de negocio y servidor

Paso 6 layout principal e interfaz Definimos RootLayout con AuthProvider y una barra de navegación que muestra enlaces a Dashboard y Generate además de los créditos disponibles La capa visual emplea Tailwind para lograr una UI limpia y accesible

Paso 7 página de inicio Home explica el valor de la plataforma e incluye llamadas a la acción Si hay sesión se muestra el saldo de créditos y acceso directo a la generación Presentamos casos de uso como contenido para blog redes sociales y copy de marketing

Paso 8 página de generación Formulario con selector de modelo y textarea para el prompt Estados de carga error y resultado Botón para copiar al portapapeles y para iniciar otra generación Se desactiva el botón si no hay créditos

Paso 9 dashboard Panel con métricas rápidas créditos disponibles total de generaciones y listado reciente con fechas modelo y un adelanto del contenido Incluye acceso a la página de generación y un CTA para comprar créditos integrable con Stripe

Paso 10 estilos globales Tailwind define base components y utilities Se ajustan tipografías espaciamientos y la clase prose para mejorar lectura de textos generados

Paso 11 despliegue Subimos la app a Vercel y la base de datos a Railway u otra opción gestionada Definimos variables de entorno seguras Buenas prácticas de ciberseguridad incluyen protección de secretos validación de entrada rate limiting logs y monitorización Si necesitas pruebas de seguridad y pentesting nuestro equipo de ciberseguridad puede ayudarte

Paso 12 ejecución local Inicia el servidor de desarrollo y abre la app en el navegador Comprueba autenticación créditos y flujo de generación de contenido

Extensiones recomendadas Ampliar modelos de IA y plantillas de contenido Colaboración por equipos y roles Edición avanzada con control de tonos y guía de estilo Analítica de contenidos con paneles de servicios inteligencia de negocio e integración con power bi Automatización de procesos y agentes IA para orquestar flujos Integración con servicios cloud aws y azure para escalar colas almacenamiento y trazabilidad

Conclusión Has construido una plataforma moderna de generación de contenido con IA utilizando Next.js 14 TypeScript Prisma y Next Auth Este ejemplo demuestra arquitectura y prácticas robustas listas para producción y sirve como base para productos de ia para empresas En Q2BSTUDIO te acompañamos desde la ideación hasta la puesta en producción combinando inteligencia artificial ciberseguridad y cloud para crear aplicaciones a medida y software a medida confiables y escalables Contacta con nosotros para llevar tu producto al siguiente nivel