Claudable: Free, Open-Source AI Web Builder powered by Claude Code

Claudable is a free open-source AI web builder that uses local command-line AI agents like Claude Code and Cursor to build and deploy products through natural language.

Describe your app idea in plain English, and Claudable will generate production-ready Next.js code with a live preview. You can then deploy it to Vercel and integrate a database with Supabase for free.

GitHub

Features

Powerful Agent Performance: Native MCP support for Claude Code and Cursor CLI delivers robust AI coding capabilities directly from your terminal.
Natural Language to Code: Describe your application needs and receive production-ready Next.js code without writing a single line yourself.
Instant Preview: Watch your application take shape with real-time hot-reload functionality that shows changes immediately as the AI builds.
Zero Setup Deployment: Launch projects without configuring sandboxes, API keys, or database connections.
Beautiful UI: Automatic styling with Tailwind CSS and shadcn/ui components creates professional-looking interfaces without design effort.
One-Click Vercel Deployment: Push your application live with a single click, bypassing the usual configuration hurdles associated with deployment.
GitHub Integration: Automatic version control and continuous deployment setup maintains proper development workflows from the start.
Supabase Database Connectivity: Production-ready PostgreSQL with authentication gets integrated into your generated applications.
Automated Error Detection: The system identifies issues in your app and attempts to fix them automatically during the build process.

See It In Action

How to Use It

1. To get started, make sure you have Node.js 18+ & Python 3.10+ installed, and either Claude Code or Cursor CLI already logged in to your account.

2. Clone the Repository from GitHub:

git clone https://github.com/opactorai/Claudable.git
cd Claudable

3. Install Dependencies:

npm install

4. Copy the .env example to a new .env file, and add your Anthropic API key.

# =============================================================================
# CC-LOVABLE ENVIRONMENT CONFIGURATION
# =============================================================================
# Copy this file to .env and configure the values below
# Required fields are marked with [REQUIRED]
# Optional fields have sensible defaults

# =============================================================================
# REQUIRED CONFIGURATION - USER MUST PROVIDE
# =============================================================================

# [REQUIRED] Anthropic API Key for Claude Code SDK
# Get your API key from: https://console.anthropic.com/
ANTHROPIC_API_KEY=your_anthropic_api_key_here

# =============================================================================
# OPTIONAL CONFIGURATION - ADVANCED USERS
# =============================================================================

# Encryption key for sensitive data (generate a random 32-character string)
# Leave empty to use default internal encryption
ENCRYPTION_KEY=

# =============================================================================
# DEFAULT CONFIGURATION - USUALLY NO CHANGES NEEDED
# =============================================================================

# API Server Configuration
API_PORT=8080

# Database Configuration (PostgreSQL via Docker)
POSTGRES_USER=cc
POSTGRES_PASSWORD=cc
POSTGRES_HOST=localhost
POSTGRES_PORT=5432
POSTGRES_DB=cc

# Alternative: Full database URL (overrides individual POSTGRES_* variables above)
# DATABASE_URL=postgresql+psycopg://cc:cc@localhost:5432/cc

# Project Storage Paths
PROJECTS_ROOT=./data/projects
PROJECTS_ROOT_HOST=./data/projects

# Preview Server Port Range
PREVIEW_PORT_START=3100
PREVIEW_PORT_END=3999

# Claude Model Configuration
CLAUDE_CODE_MODEL=claude-sonnet-4-20250514

# Frontend API Endpoints (automatically configured by Makefile)
# Note: These are set dynamically by 'make start' - no need to change manually
NEXT_PUBLIC_API_BASE=http://localhost:8080
NEXT_PUBLIC_WS_BASE=ws://localhost:8080

5. Start the Development Servers. Your application will then be available at http://localhost:3000.

npm run dev

6. Connect your Claude Code or Cursor CLI agent through the interface. Once connected, describe your application idea using natural language. Be specific about functionality, design preferences, and any special requirements.

7. Watch as the AI generates your application structure and code. The live preview updates automatically as components are built. You can modify your requirements at any time, and the AI will adjust the code accordingly.

8. When satisfied with your application, connect your GitHub account through the service integrations panel. Generate a personal access token with repo scope permissions and link it to Claudable for automatic version control.

9. Set up Vercel deployment by creating an API token in your Vercel account settings. Connect this to Claudable for one-click deployment capabilities. Your application will be live within minutes of pushing to production.

10. For database functionality, configure Supabase integration by providing your project URL and API keys from the Supabase dashboard. This enables PostgreSQL database connections with built-in authentication systems.

Pros

Cost Efficiency: Completely free to use with no subscription fees or usage limits beyond your AI agent costs.
Speed of Development: Transform ideas into working applications in minutes rather than weeks of traditional development.
Production Ready Code: Generates clean, maintainable Next.js code following industry best practices and modern development patterns.
No Vendor Lock-in: Open source architecture means you own your code and can modify or host it anywhere.
Flexibility: Works with multiple AI agents and supports both guided development and manual code editing.

Cons

System Requirements: Requires local installation of multiple dependencies including Node.js, Python, and AI agent CLI tools.
AI Agent Dependency: Functionality is limited by the capabilities and availability of your connected AI coding agent.
Limited Customization: While code is editable, complex customizations may require traditional development knowledge.
Local Development Only: Currently requires local setup and cannot be used as a purely web-based service.
Database Limitations: Built-in support is primarily for PostgreSQL through Supabase, limiting database technology choices.
Learning Curve: Understanding the generated code structure requires some familiarity with Next.js and modern web development concepts.

Related Resources

Claude Code Documentation: Complete setup guide and usage instructions for Anthropic’s AI coding agent.
Cursor CLI Overview: Alternative AI agent setup and configuration documentation for enhanced coding capabilities.
Next.js Documentation: Official framework documentation for understanding the generated application structure and customization options.
Tailwind CSS Guide: Styling framework documentation for customizing the visual appearance of generated applications.
Supabase Documentation: Database and authentication service documentation for backend integration and data management.
Vercel Deployment Guide: Hosting platform documentation for application deployment and domain management.
OPACTOR Platform: Information about the company behind Claudable and their other AI-powered development tools.

FAQs

Q: What types of applications work best with Claudable?
A: Claudable excels at building standard web applications like dashboards, content management systems, e-commerce sites, and productivity tools. Complex applications requiring extensive custom logic or specialized integrations may need additional manual development work.

Q: Can I use Claudable for commercial projects?
A: Yes, Claudable uses an MIT license, which allows commercial use without restrictions. You own the generated code and can use it for client work, products, or any commercial purpose. The only costs are your AI agent subscription fees.

Q: How does Claudable compare to other no-code platforms?
A: Claudable differs from traditional no-code platforms by generating actual source code you can modify and host anywhere. While visual builders like Webflow or Bubble keep you locked into their platforms, Claudable gives you complete ownership and flexibility over your applications.

Q: What happens if I want to modify the generated code manually?
A: Generated applications are standard Next.js projects that you can edit with any code editor. The AI agent can continue to help with modifications, or you can take over development manually. The code follows industry best practices and is well-structured for maintenance.