Claudable – An open-source web application builder based on Next.js

What is Claudable？

Claudable is an open-source web application builder based on Next.js. It combines the advanced AI agent capabilities of Claude Code and Cursor CLI with the simple, intuitive app-building experience of Lovable. Users only need to describe what they want to build in natural language, and Claudable generates production-ready Next.js code, supporting instant preview and hot reloading. With no complex setup required, users can start building right away. It also supports one-click deployment to Vercel, automatic version control and continuous deployment setup, and connections to production-ready PostgreSQL databases.

Key Features of Claudable

• Natural language to code: Generate corresponding Next.js code directly from natural language descriptions.

• Instant preview & hot reload: See changes immediately during AI-powered app generation with hot reload support.

• Zero-setup quick start: Start building without complex sandboxes, API keys, or database configuration.

• Beautiful user interface: Automatically generate elegant UIs using Tailwind CSS and shadcn/ui.

• One-click deployment to Vercel: Deploy apps to Vercel with no extra configuration and receive a live URL.

• GitHub integration: Automatically set up version control and continuous deployment.

• Connect to Supabase database: Integrate with production-ready PostgreSQL databases and authentication.

• Automatic error detection & fixing: Identify and fix errors automatically to ensure stable operation.

Project Repository

• GitHub: https://github.com/opactorai/Claudable

How to Use Claudable

Prerequisites:

• Install Node.js 18+, Python 3.10+ (optional), and Git.

• Install and log in to Claude Code or Cursor CLI.

Quick Start:

1. Clone the repository:

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


2. Enter the project directory:

   cd Claudable


3. Install dependencies:

   npm install


4. Start the development server:

   npm run dev


Build & Deploy:

• In Claude Code, describe your app, e.g.:
  “a Pomodoro timer with Slack notifications”.

• Watch the terminal generate code and see the app auto-refresh in the browser.

• Deploy with:

  npm run deploy


  This pushes the app to Vercel and provides a live URL.

Application Scenarios for Claudable

• Individual developers building projects quickly: Easily create personal websites or utility apps without heavy configuration or extensive coding.

• Small teams developing product prototypes: Rapidly iterate on features, test functionality, and collect feedback to accelerate product cycles.

• Educational use in teaching: Help beginners get hands-on with web development by generating code from natural language, aiding their understanding of workflows and logic.

• Enterprises building internal tools: Quickly develop small management or data visualization tools to improve efficiency and meet specific business needs.

• Creative professionals prototyping ideas: Designers and other non-developers can quickly transform ideas into functional web apps for showcasing and validation.