Claudable: generating and deploying websites using AI intelligences

Claudable is an open source website builder. It connects AI coding intelligences like Claude Code or Cursor Agent to allow users to create, develop and deploy web applications by issuing simple commands. Users simply describe what they want in natural language, such as "I want a task management app with a dark mode," and Claudable utilizes the AI intelligence to generate the appropriate code and provide a live preview. The tool is based on the Next.js framework and integrates Vercel for one-click deployment, Supabase for database management, and GitHub for version control. The project is designed with the goal of simplifying the development process by allowing users to build and publish professional web applications for free without having to deal with complex environment configuration or API key issues.

Function List

• AI Intelligent Body Driver Development: Support for connecting Claude Code and Cursor CLI as AI coding intelligences to generate Next.js code available for production environments based on users' natural language instructions.
• Instant Preview: As AI builds applications, users can immediately see the real-time effects of code changes with the Hot Reload feature.
• One-Click Deployment: With the integration of Vercel, users can publish their developed applications online with a single click, without the need for complex deployment configurations.
• Database Integration: Support for connecting to Supabase to quickly configure production-grade PostgreSQL databases and user authentication features for applications.
• Automated Version Control: Built-in GitHub integration to automatically set up version control and continuous deployment for projects.
• Zero-configuration startup: Simplifies the initial setup process by eliminating the need to manually configure sandbox environments, API keys, or databases, allowing users to focus on application development.
• Automatic bug fixes: The system automatically detects errors in the application and tries to fix them using AI intelligences.
• Modern UI generation: Use popular front-end libraries like Tailwind CSS and shadcn/ui to generate beautiful user interfaces.

Using Help

Claudable combines the power of AI programming intelligences with an intuitive application building experience that makes it easy for developers and casual users alike to get started. Below you will find details on how to install and use Claudable.

preliminary

Before you start Claudable installation, make sure that the following software and tools are installed on your computer:

• Node.js: Version needs to be 18 or higher.
• Python: Version needs to be 3.10 or higher.
• Git: Used to clone the project code repository.
• AI-coded intelligences: You will need to install and log in to Claude Code or Cursor CLI, which is highly recommended.Claude Codefor the best experience.

Installation of AI coded intelligences

You can choose to install one of them according to your preference:

1. Claude Code
Install globally via npm, the package manager for Node.js:

npm install -g @anthropic-ai/claude-code

Once the installation is complete, log into your Claude account in the terminal:

claude

Then follow the prompts and enter the command /login Complete the login.

2. Cursor CLI
It is slightly slower than Claude Code, but more powerful in handling complex coding tasks.
Use the curl command to install:

curl https://cursor.com/install -fsS | bash

After installation, the same login is required: "`shell
cursor-agent login

### **快速启动**
按照以下步骤，你可以在几分钟内在你本地电脑上运行Claudable。
**第一步：克隆代码仓库**
打开终端，使用`git`命令将Claudable的源代码克隆到本地：
```shell
git clone https://github.com/opactorai/Claudable.git

Step 2: Enter the project catalog

cd Claudable

Step 3: Install dependencies
Run it in the project root directorynpm installcommand. This command will automate all the necessary settings, including:

• Install front-end and back-end Node.js dependency packages.
• In the backend API directory apps/api/ Create a Python virtual environment under .venvThe
• utilizationuvmaybepipInstall all Python dependencies.
• Automatically detects available ports and creates.envEnvironment profiles.
• On the first run, on the data/ Automatic creation of SQLite database files in the directory cc.dbThe

npm install

Step 4: Start the development server
After the installation is complete, rundevcommand to start both the front-end and back-end servers:

npm run dev

After a successful launch, you will see the following message in the terminal, indicating that the application is running:

• front-end application: http://localhost:3000
• Backend API server: http://localhost:8080
• API documentation: http://localhost:8080/docs

Note: If the default ports (3000 and 8080) are occupied, the system automatically detects and assigns the next available port.

How to use

With Claudable up and running, you can start building your application.

1. Connecting AI Intelligentsia: Make sure you have followed the previous steps to install and log in to Claude Code or Cursor CLI.
2. Describe your project: In Claudable's user interface, use natural language to clearly describe the application you want to build. For example, "Create a blogging platform where users can post and comment on articles".
3. Watch AI generate code: After submitting the description, the AI intelligences will start analyzing your requirements and automatically generate the project structure and code.
4. Real-time preview and iteration: While the AI is working, you can open the browser through thehttp://localhost:3000View the progress of the application build in real time. If you are not satisfied with the results, you can always propose new instructions to modify and iterate.
5. Deployment goes live: When you're happy with the app, you can deploy it online with one click through the integrated Vercel feature.

service integration

For deployment and database functionality, you need to connect to GitHub, Vercel, and Supabase.

• GitHub Integration::
  1. Go to the GitHub Personal Settings page to generate a new Personal Access Token (classic).
  2. tick repo Scope of authority.
  3. In Claudable's设置 -> 服务集成 -> GitHubEnter the Token you generated in and create or connect a code repository.
• Vercel integration::
  1. Go to Vercel's account settings page to create a Token.
  2. In Claudable's设置 -> 服务集成 -> VercelEnter the Token in and create a new project for deployment.
• Supabase Integration::
  1. Go to the Supabase dashboard and find the API credentials in your project settings.
  2. You will need to provide项目URL,Anon Key(the public key for the client) andService Role Key(for server-side private keys).
  3. Populate this information into Claudable's Supabase integration settings.

application scenario

1. Rapid Prototyping
   For entrepreneurs or product managers who want to quickly validate a product idea, Claudable can be used to generate an interactive app prototype in minutes with a simple text description for demoing and gathering early user feedback.
2. Automated front-end development
   Front-end developers can utilize Claudable to automate repetitive development tasks such as building project frameworks, generating UI components or writing basic pages. This allows more energy to be put into complex business logic and user experience optimization.
3. Learn Web Development
   For programming beginners, Claudable is a great learning tool. By observing how AI translates natural language requirements into actual code, beginners can gain a more intuitive understanding of the architecture and development process of modern web applications.
4. No code/low code development
   Users who don't have a deep programming background, such as designers or marketers, can also use Claudable to independently complete the construction of some simple websites or applications, such as personal portfolio websites, event landing pages, etc.

QA

1. Is Claudable free?
   Yes, the Claudable project itself is open source and free. However, it relies on third-party services that may incur a fee, such as the AI intelligences you use (Claude Code or Cursor), Vercel's deployment services, or Supabase's database services, depending on your usage and the package you choose.
2. Do I need programming experience to use Claudable?
   No deep programming experience is required.The core design philosophy of Claudable is to allow users to build applications through natural language. However, some basic knowledge of web development (e.g. HTML, CSS, JavaScript) will help you to more accurately characterize the requirements and fine-tune the AI-generated code.
3. What is the quality of AI-generated code?
   Claudable utilizes advanced AI coding intelligence to generate code that is typically of high quality and ready to be used "out of the box" in production environments. The code it generates is based on industry standard frameworks such as Next.js and follows best practices. However, for complex applications, code review and optimization by professional developers is still recommended.
4. What should I do if I get a permission error while using it?
   In a WSL environment on macOS, Linux, or Windows, file permission issues may be encountered. The solution is to not use thesudoor root user privileges to run Claude Code. you need to make sure that the ownership of the project folder belongs to the current user. You can refer to the projectREADME.mdThe "Troubleshooting" section of the document contains detailed solutions for different operating systems.