Claudable - AI Agent-Powered Open-Source Web Application Builder

Project Overview

Claudable is a powerful Next.js-based web application builder that combines the advanced AI agent capabilities of Claude Code (also supporting Cursor CLI) with a lovable, simple, and intuitive app building experience. Simply describe your app idea - "I want a task management app with dark mode" - and watch Claudable instantly generate code and display a live preview of the working application.

This open-source project enables you to easily build and deploy professional web applications for free.

Core Features

🤖 Powerful AI Agent Support

• Claude Code: Anthropic's advanced AI coding agent, featuring high reasoning capabilities, local execution, and multiple operating modes (interactive, auto-edit, fully autonomous).
• Cursor CLI: Intelligent coding agent for complex coding tasks.
• Native MCP Support: Leverage the full capabilities of Claude Code and Cursor CLI agents.

💻 Development Experience

• Natural Language to Code: Simply describe what you want to build, and Claudable will generate production-ready Next.js code.
• Live Preview: Instantly see changes via hot reloading and watch the application evolve in real-time as the AI builds it.
• Zero-Config Startup: No complex sandbox, API key, or database configuration needed - start building immediately.
• Beautiful UI Generation: Generate aesthetically pleasing user interfaces using Tailwind CSS and shadcn/ui.

🚀 Deployment & Integration

• One-Click Deployment: Push your application to Vercel with a single click, no configuration required.
• GitHub Integration: Automatic version control and continuous deployment setup.
• Supabase Database: Directly connect a production-ready PostgreSQL database to your project.
• Automatic Error Detection: Detects and automatically fixes errors in your application.

💰 Cost Advantages

• Completely Free: No additional subscription fees beyond the app builder itself.
• Open Source: MIT License, suitable for commercial use.
• No Vendor Lock-in: You own the generated code and can modify or host it anywhere.

Technical Architecture

Frontend Tech Stack

• Next.js: Modern React framework
• Tailwind CSS: Utility-first CSS framework
• shadcn/ui: Modern UI component library
• TypeScript: Type-safe JavaScript

Backend Tech Stack

• Python: Backend API server
• SQLite: Local development database
• PostgreSQL: Production database (optional)

AI Agent Integration

• Claude Code: Primary recommended AI coding agent
• Cursor CLI: Alternative intelligent coding tool
• MCP Support: Native Model Context Protocol integration

Installation & Setup

System Requirements

# Required Components
- Node.js 18+
- Python 3.10+
- Claude Code or Cursor CLI (logged in)
- Git

Quick Installation

# Clone the repository
git clone https://github.com/opactorai/Claudable.git
cd Claudable

# Install all dependencies (Node.js and Python)
npm install

# Start the development server
npm run dev

Application Access Addresses

• Frontend: http://localhost:3000
• API Server: http://localhost:8080
• API Docs: http://localhost:8080/docs

Note: Ports are automatically detected; if default ports are in use, the next available port will be assigned.

Manual Setup (Optional)

# Frontend setup
cd apps/web
npm install

# Backend setup
cd ../api
python3 -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
pip install -r requirements.txt

Usage Workflow

1. Connect AI Agent

First, ensure you are logged into Claude Code or Cursor CLI:

# Claude Code login
claude
> /login

# Cursor CLI login
cursor-agent login

2. Start Claudable

npm run dev

3. Describe Project Requirements

Describe the application you want to build using natural language, for example:

• "Create a task management app with user authentication"
• "Build a personal blog that supports dark mode"
• "Develop a simple e-commerce website"

4. Watch AI Generate Code

The AI will automatically generate the project structure and code, and you can see a live preview in real-time.

5. Deploy to Production

Publish your application with a single click using the integrated Vercel deployment feature.

Database Management

Local Development

• Uses an SQLite database, located at data/cc.db
• Automatically initialized on first run

Utility Commands

# Backup database
npm run db:backup

# Reset database
npm run db:reset

# Clean all dependencies
npm run clean

Service Integrations

GitHub Integration

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

Vercel Deployment

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

Supabase Database

1. Get Credentials: Supabase Dashboard → Your Project → Settings → API
   • Project URL: https://xxxxx.supabase.co
   • Anon Key: Client Public Key
   • Service Role Key: Service Key

Troubleshooting

Permission Errors

# Check current user
whoami

# Change project directory ownership
sudo chown -R $(whoami):$(whoami) ~/Claudable

Dependency Issues

# Clean all dependencies and retry
npm run clean
npm install

Notes for WSL Users

Ensure Claude Code is run under a user account, not the root account.

Use Cases

1. Rapid Prototyping

• Entrepreneurs validating product ideas
• Product managers creating demo prototypes
• Designers building interactive mockups

2. Learning Web Development

• Beginners observing how AI translates requirements into code
• Understanding modern web application architecture and development workflows

3. Automated Frontend Development

• Frontend developers automating repetitive development tasks
• Quickly setting up project frameworks and UI components

4. No-Code/Low-Code Development

• Designers or marketers independently completing simple web applications
• Reducing reliance on professional developers

Project Advantages

Cost-Effectiveness

• Completely Free: No subscription fees or usage limits
• No Additional API Fees: Directly use existing Claude or Cursor subscriptions

Development Speed

• Minutes-to-Development: Transform ideas into working applications in just minutes
• Production-Ready: Generates clean, maintainable code adhering to industry best practices
• Instant Feedback: Live preview feature shortens the development feedback loop

Flexibility

• Multi-AI Agent Support: Supports Claude Code and Cursor CLI
• No Vendor Lock-in: Full ownership of the code
• Customizable: Generated code can be modified and extended

Future Development Plans

According to the project roadmap, upcoming features include:

• New CLI Agents: Support for more AI coding tools
• Conversation Checkpoints: Save and restore conversation/codebase states
• Enhanced MCP Integration: Deeper native MCP integration
• Sub-Agent System: Enhanced agent system architecture

Open Source Information

• GitHub: https://github.com/opactorai/Claudable
• Developer: OPACTOR (https://opactor.ai)
• Community Support: Active open-source community with continuous updates and improvements

Summary

Claudable represents a new paradigm in web development, directly transforming natural language descriptions into deployable web applications through AI agents. It not only lowers the barrier to web development but also significantly boosts development efficiency, making it an indispensable tool in the modern developer's toolkit.