Claudable - Creador de Aplicaciones Web de Código Abierto Basado en Agentes de IA

Resumen del Proyecto

Claudable es un potente creador de aplicaciones web basado en Next.js que combina las capacidades avanzadas de los agentes de IA de Claude Code (también compatible con Cursor CLI) con la experiencia de construcción de aplicaciones sencilla e intuitiva de Lovable. Simplemente describa su idea de aplicación — "Quiero una aplicación de gestión de tareas con modo oscuro" — y vea cómo Claudable genera código instantáneamente y muestra una vista previa en tiempo real de la aplicación en funcionamiento.

Este proyecto de código abierto le permite construir y desplegar aplicaciones web profesionales de forma fácil y gratuita.

Características Principales

🤖 Soporte Potente de Agentes de IA

• Claude Code: El agente de codificación de IA avanzado de Anthropic, con alta capacidad de razonamiento, ejecución local y múltiples modos de operación (interactivo, edición automática, totalmente automático).
• Cursor CLI: Agente de codificación inteligente, adecuado para tareas de codificación complejas.
• Soporte Nativo de MCP: Aprovecha al máximo las capacidades de los agentes Claude Code y Cursor CLI.

💻 Experiencia de Desarrollo

• Lenguaje Natural a Código: Simplemente describa lo que desea construir, y Claudable generará código Next.js listo para producción.
• Vista Previa en Tiempo Real: Vea los cambios instantáneamente a través de la recarga en caliente (hot reloading), observando las modificaciones en tiempo real mientras la IA construye la aplicación.
• Inicio sin Configuración: No se requieren configuraciones complejas de sandbox, claves API o bases de datos; comience a construir de inmediato.
• Generación de UI Estética: Genera interfaces de usuario atractivas utilizando Tailwind CSS y shadcn/ui.

🚀 Despliegue e Integración

• Despliegue con un Clic: Envíe su aplicación a Vercel con un solo clic, sin necesidad de configuración.
• Integración con GitHub: Control de versiones automático y configuración de despliegue continuo.
• Base de Datos Supabase: Conecte directamente una base de datos PostgreSQL lista para producción a su proyecto.
• Detección Automática de Errores: Detecta errores en la aplicación y los corrige automáticamente.

💰 Ventajas de Costo

• Completamente Gratuito: No hay tarifas de suscripción adicionales más allá del constructor de aplicaciones.
• Código Abierto: Licencia MIT, utilizable para fines comerciales.
• Sin Bloqueo de Proveedor: Usted es dueño del código generado y puede modificarlo u alojarlo en cualquier lugar.

Arquitectura Técnica

Pila Tecnológica Frontend

• Next.js: Marco de React moderno
• Tailwind CSS: Marco CSS de primera utilidad
• shadcn/ui: Biblioteca de componentes de UI moderna
• TypeScript: JavaScript con tipado seguro

Pila Tecnológica Backend

• Python: Servidor API backend
• SQLite: Base de datos para desarrollo local
• PostgreSQL: Base de datos para entorno de producción (opcional)

Integración de Agentes de IA

• Claude Code: Agente de codificación de IA principal recomendado
• Cursor CLI: Herramienta de codificación inteligente alternativa
• Soporte MCP: Integración nativa del Protocolo de Contexto del Modelo (Model Context Protocol)

Instalación y Configuración

Requisitos del Sistema

# Componentes necesarios
- Node.js 18+
- Python 3.10+
- Claude Code o Cursor CLI (con sesión iniciada)
- Git

Instalación Rápida

# Clonar el repositorio
git clone https://github.com/opactorai/Claudable.git
cd Claudable

# Instalar todas las dependencias (Node.js y Python)
npm install

# Iniciar el servidor de desarrollo
npm run dev

Direcciones de Acceso a la Aplicación

• Frontend: http://localhost:3000
• Servidor API: http://localhost:8080
• Documentación API: http://localhost:8080/docs

Nota: Los puertos se detectarán automáticamente; si el puerto predeterminado está ocupado, se asignará el siguiente puerto disponible.

Configuración Manual (Opcional)

# Configuración del frontend
cd apps/web
npm install

# Configuración del backend
cd ../api
python3 -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
pip install -r requirements.txt

Flujo de Uso

1. Conectar el Agente de IA

Primero, asegúrese de haber iniciado sesión en Claude Code o Cursor CLI:

# Inicio de sesión en Claude Code
claude
> /login

# Inicio de sesión en Cursor CLI
cursor-agent login

2. Iniciar Claudable

npm run dev

3. Describir los Requisitos del Proyecto

Describa la aplicación que desea construir en lenguaje natural, por ejemplo:

• "Crear una aplicación de gestión de tareas con autenticación de usuario"
• "Hacer un blog personal con soporte para modo oscuro"
• "Construir un sitio web de comercio electrónico simple"

4. Observar la Generación de Código por la IA

La IA generará automáticamente la estructura del proyecto y el código, y podrá ver una vista previa en tiempo real.

5. Desplegar en Entorno de Producción

Publique su aplicación con un solo clic utilizando la función de despliegue integrada de Vercel.

Gestión de Bases de Datos

Desarrollo Local

• Utiliza una base de datos SQLite, ubicada en data/cc.db
• Se inicializa automáticamente la primera vez que se ejecuta

Comandos de Utilidad

# Copia de seguridad de la base de datos
npm run db:backup

# Restablecer la base de datos
npm run db:reset

# Limpiar todas las dependencias
npm run clean

Integraciones de Servicios

Integración con GitHub

1. Obtener Token: GitHub Personal Access Tokens → Generate new token (classic) → Select repo scope
2. Conectar: Settings → Service Integrations → GitHub → Enter token → Create or connect repository

Despliegue en Vercel

1. Obtener Token: Vercel Account Settings → Create Token
2. Conectar: Settings → Service Integrations → Vercel → Enter token → Create new project for deployment

Base de Datos Supabase

1. Obtener Credenciales: Supabase Dashboard → Your Project → Settings → API
   • Project URL: https://xxxxx.supabase.co
   • Anon Key: Clave pública del cliente
   • Service Role Key: Clave del rol de servicio (secreto del servidor)

Solución de Problemas Comunes

Errores de Permisos

# Verificar el usuario actual
whoami

# Cambiar la propiedad del directorio del proyecto
sudo chown -R $(whoami):$(whoami) ~/Claudable

Problemas de Dependencias

# Limpiar todas las dependencias y reintentar
npm run clean
npm install

Notas para Usuarios de WSL

Asegúrese de ejecutar Claude Code bajo una cuenta de usuario y no bajo la cuenta de root.

Escenarios de Aplicación

1. Desarrollo Rápido de Prototipos

• Emprendedores que validan ideas de productos
• Gerentes de producto que crean prototipos de demostración
• Diseñadores que elaboran maquetas interactivas

2. Aprendizaje del Desarrollo Web

• Principiantes en programación que observan cómo la IA transforma los requisitos en código
• Comprensión de la arquitectura y los procesos de desarrollo de aplicaciones web modernas

3. Automatización del Desarrollo Frontend

• Desarrolladores frontend que automatizan tareas de desarrollo repetitivas
• Construcción rápida de marcos de proyectos y componentes de UI

4. Desarrollo Sin Código / Con Poco Código (No-code/Low-code)

• Diseñadores o especialistas en marketing que completan aplicaciones web sencillas de forma independiente
• Reducción de la dependencia de desarrolladores profesionales

Ventajas del Proyecto

Rentabilidad

• Completamente Gratuito: Sin tarifas de suscripción ni límites de uso.
• Sin Costos Adicionales de API: Utiliza directamente las suscripciones existentes de Claude o Cursor.

Velocidad de Desarrollo

• Desarrollo en Minutos: Transforma ideas en aplicaciones funcionales en solo minutos.
• Listo para Producción: Genera código limpio y mantenible que cumple con las mejores prácticas de la industria.
• Retroalimentación Instantánea: La función de vista previa en tiempo real acorta el ciclo de retroalimentación del desarrollo.

Flexibilidad

• Soporte para Múltiples Agentes de IA: Compatible con Claude Code y Cursor CLI.
• Sin Bloqueo de Proveedor: Propiedad total del código.
• Personalizable: El código generado se puede modificar y extender.

Planes de Desarrollo Futuro

Según la hoja de ruta del proyecto, las próximas características incluyen:

• Nuevos Agentes CLI: Soporte para más herramientas de codificación de IA.
• Puntos de Control de Conversación: Guardar y restaurar el estado de la conversación/base de código.
• Integración MCP Mejorada: Integración nativa profunda de MCP.
• Sistema de Subagentes: Arquitectura de sistema de agentes mejorada.

Información de Código Abierto

• GitHub: https://github.com/opactorai/Claudable
• Desarrollador: OPACTOR (https://opactor.ai)
• Soporte de la Comunidad: Una comunidad de código abierto activa, con actualizaciones y mejoras continuas.

Resumen

Claudable representa un nuevo paradigma en el desarrollo web, transformando descripciones en lenguaje natural directamente en aplicaciones web desplegables mediante agentes de IA. No solo reduce la barrera de entrada al desarrollo web, sino que también mejora significativamente la eficiencia del desarrollo, convirtiéndose en una herramienta indispensable en el kit de herramientas del desarrollador moderno.