Cómo crear un sitio web completo con panel administrador usando Abacus AI DeepAgent
El vibe coding ha evolucionado. Ya no se trata solo de generar interfaces vacías: hoy es posible construir proyectos web funcionales, con base de datos real, pagos integrados y panel de administración, todo desde un chat con IA. En este artículo te muestro cómo lo hice usando Abacus AI DeepAgent para crear un sitio web de yoga completo.
¿Qué es Abacus AI DeepAgent?
Abacus AI es una plataforma que ofrece un modo especial llamado DeepAgent, que va mucho más allá del chat convencional. Mientras que en el modo chat puedes hacer preguntas y obtener respuestas en texto, en el modo DeepAgent puedes generar aplicaciones web completas: escribe código real, investiga en internet, integra servicios externos y despliega el proyecto en la nube, todo de forma autónoma.
El costo de acceso a la plataforma es de $10 al mes, lo que incluye todas las características descritas en este artículo.
El proyecto: Simple Yoga Studio
El objetivo era crear un sitio web para un estudio de yoga con las siguientes características:
- Landing page con secciones de clases, blog y contacto
- Sistema de reservas con calendario y pago en línea
- Panel de administración para gestionar clases, publicaciones y reservas
- Notificaciones por correo al recibir mensajes de contacto
- Integración con Stripe para cobros reales
- Subida de imágenes con Cloudinary
- Base de datos PostgreSQL incluida en la plataforma
Paso 1: Crear el proyecto con un prompt inicial
Al abrir un nuevo chat en DeepAgent, simplemente se le describe el proyecto con el mayor detalle posible. El prompt inicial fue algo como:
Crea un sitio web minimalista de múltiples páginas sobre Yoga con un tema tranquilo. Objetivo: promocionar clases de yoga y ofrecer contenido de blog sobre yoga y mindfulness. Limpio, elegante y fácil de navegar — enfocado en inscripciones a clases y compartir conocimiento. La página de contacto debe incluir dirección del estudio, correo, teléfono, un formulario de contacto minimalista y un mapa embebido pequeño. Estilo de diseño: layout minimalista y aireado, fondo blanco con acentos en verde salvia suave y beige claro, tipografía sans-serif limpia para el cuerpo y serif elegante o fluida para los títulos, bastante espacio en blanco e imágenes sutiles de naturaleza/yoga.
DeepAgent hace preguntas de seguimiento para completar la información que necesita:
- Nombre del estudio → Simple Yoga Studio
- Ubicación → dato de ejemplo
- Correo y teléfono de contacto
- Si deseas notificaciones al recibir reservas
- Si las clases serán dinámicas (administradas desde un panel)
- Si ya tienes artículos de blog o deseas que los genere
Al responder estas preguntas, el agente comienza a trabajar. Investiga imágenes en internet, redacta contenido de blog, escribe el código y genera la primera versión del sitio.
Importante: El agente no solo crea interfaces vacías. Busca imágenes reales, redacta artículos completos y los inserta en la base de datos, todo de forma autónoma.
Paso 2: Deploy y revisión del sitio
Una vez que DeepAgent termina la primera versión, aparece un botón de Deploy en la esquina superior derecha. Al hacer clic, se le asigna un nombre al proyecto y se genera una URL pública donde cualquiera puede ver el sitio, exactamente como lo vería un usuario real.
El sitio generado incluye:
- Hero con imagen de portada y call-to-action
- Sección de clases disponibles
- Sección de blog con artículos generados automáticamente
- Página de contacto con formulario funcional (los mensajes llegan al correo del administrador usando el servicio de email integrado en Abacus)
Paso 3: Acceder al panel de administración
Al finalizar cada tarea, DeepAgent muestra un resumen de lo que ha hecho. En ese resumen menciona que existe un panel de administración. Para acceder, basta con preguntar:
¿Cómo entro al panel de administración?
El agente responde indicando que la ruta es /admin/login y entrega las credenciales del usuario de prueba. El panel incluye:
- Analíticas: cantidad de clases, publicaciones y mensajes
- Gestión de clases: crear, editar y eliminar clases
- Gestión de blog: publicar y editar artículos
- Reservas y pagos: ver el estado de cada reserva y los pagos realizados
El panel se conecta a una base de datos PostgreSQL real, alojada dentro de la misma plataforma de Abacus, sin necesidad de configurar ningún servicio externo.
Paso 4: Ver el código y la base de datos
Dentro de la pestaña Settings se encuentran dos secciones clave:
- Database: muestra todos los registros del sistema (publicaciones, usuarios, contactos, reservas)
- Código: el proyecto está generado con Next.js + Prisma + PostgreSQL. Se puede descargar como ZIP para continuar el desarrollo en cualquier editor de código
También existe una pestaña Versions que funciona como historial de todos los prompts enviados. Si una modificación no resulta como esperabas, puedes hacer clic en cualquier versión anterior para revertir el proyecto a ese estado.
Paso 5: Integrar Stripe para pagos reales
Para activar el sistema de reservas con cobro real, se le pide a DeepAgent:
Añade la posibilidad de que en
/clasesun usuario pueda inscribirse a una clase con un calendario y hacer un pago usando Stripe.
El agente integra Stripe y solicita las credenciales. Para obtenerlas:
- Crear una cuenta en stripe.com (gratuita para desarrollo)
- Ir al Dashboard → modo prueba → Claves de API
- Copiar la clave pública y la clave secreta
- Pasárselas al agente en el mismo chat
Las claves se guardan automáticamente en la sección Secrets del proyecto.
Configurar el Webhook de Stripe
Para que Stripe notifique al sistema cuando un pago se completa, es necesario configurar un webhook:
- En Stripe, ir a Webhooks → Añadir destino
- Escuchar el evento
checkout.session.completed - Colocar la URL de producción del proyecto como endpoint
- Copiar el Signing Secret generado
- Pasárselo al agente como variable adicional
Con esto, el flujo de pago queda completamente funcional: el usuario selecciona una fecha en el calendario, completa el pago en la interfaz de Stripe (usando 4242 4242 4242 4242 en modo prueba) y es redirigido de vuelta al sitio con la confirmación de pago exitoso.
Nota sobre LATAM: Si Stripe no está disponible en tu país, puedes pedirle a DeepAgent que integre Mercado Pago u otro procesador regional. El proceso es exactamente el mismo: crear la cuenta y pasarle las credenciales.
Paso 6: Subida de imágenes con Cloudinary
Por defecto, el panel de administración solo acepta URLs de imágenes. Para poder subir imágenes directamente (con drag & drop), se utiliza Cloudinary, un servicio con plan gratuito ideal para proyectos pequeños.
Configuración:
- Crear una cuenta en cloudinary.com
- Ir al Home del dashboard y obtener: Cloud Name, API Key y API Secret
- Pedirle al agente que integre Cloudinary pasándole esas credenciales
Una vez integrado, al entrar al panel de administración y editar una clase o publicación, aparece un campo con soporte para drag & drop. Las imágenes se suben a Cloudinary y se almacenan de forma permanente.
Paso 7: Crear un usuario administrador personalizado
En lugar de usar las credenciales de prueba, se puede pedir al agente que cree un usuario administrador con tus propios datos:
Crea un usuario administrador con este correo y esta contraseña.
El agente ejecuta un script directamente en la base de datos y el usuario queda registrado de inmediato, sin necesidad de reiniciar el proyecto.
Características adicionales mencionadas
- Logs en tiempo real: en la pestaña Log se pueden ver todas las peticiones entrantes al sistema (se actualiza cada 30 segundos)
- Dominio personalizado: en la sección de deploy se puede conectar un dominio propio o un subdominio
- Integración con Twilio: para enviar SMS a los usuarios que realizaron una reserva
- Exportar el código: el proyecto completo se descarga como ZIP, listo para continuar el desarrollo en cualquier herramienta como Cursor, Zed o VS Code
Conclusión
Abacus AI DeepAgent demuestra que hoy es posible construir un proyecto web funcional para un negocio pequeño sin escribir una sola línea de código manualmente. El resultado no es solo una maqueta: es una aplicación real con base de datos, autenticación, pagos, subida de archivos y panel de administración.
Lo más valioso de este enfoque no es la velocidad, sino la extensibilidad: cualquier integración adicional (YouTube, Notion, Facebook, Jira, Slack) se puede pedir en el mismo chat, y el agente investiga la documentación e implementa la lógica por ti.
Si tienes alguna duda o quieres que muestre cómo integrarlo con Mercado Pago, PayPal u otro servicio, déjalo en los comentarios. Nos vemos en el siguiente ejemplo práctico.
Recursos mencionados en el video: