Claudable - 基于AI代理的开源Web应用构建器

项目概述

Claudable是一个强大的基于Next.js的Web应用构建器，它将Claude Code（也支持Cursor CLI）的先进AI代理能力与Lovable简单直观的应用构建体验相结合。只需描述您的应用想法 - "我想要一个带深色模式的任务管理应用" - 就能观看Claudable立即生成代码并显示工作应用的实时预览。

这个开源项目使您能够轻松免费地构建和部署专业的Web应用程序。

核心特性

🤖 强大的AI代理支持

• Claude Code: Anthropic的先进AI编码代理，具有高推理能力、本地执行、多种操作模式（交互式、自动编辑、全自动）
• Cursor CLI: 智能编码代理，适用于复杂编码任务
• 原生MCP支持: 充分利用Claude Code和Cursor CLI代理的能力

💻 开发体验

• 自然语言转代码: 只需描述您想要构建的内容，Claudable就会生成生产就绪的Next.js代码
• 实时预览: 通过热重载立即查看更改，在AI构建应用时实时看到变化
• 零配置启动: 无需复杂的沙箱、API密钥或数据库配置 - 立即开始构建
• 美观UI生成: 使用Tailwind CSS和shadcn/ui生成精美的用户界面

🚀 部署与集成

• 一键部署: 将应用推送到Vercel只需一键，无需配置
• GitHub集成: 自动版本控制和持续部署设置
• Supabase数据库: 直接连接生产就绪的PostgreSQL数据库到您的项目
• 自动错误检测: 检测应用中的错误并自动修复

💰 成本优势

• 完全免费: 除了应用构建器外，没有额外的订阅费用
• 开源: MIT许可证，可用于商业用途
• 无供应商锁定: 您拥有生成的代码，可以在任何地方修改或托管

技术架构

前端技术栈

• Next.js: 现代React框架
• Tailwind CSS: 实用优先的CSS框架
• shadcn/ui: 现代UI组件库
• TypeScript: 类型安全的JavaScript

后端技术栈

• Python: 后端API服务器
• SQLite: 本地开发数据库
• PostgreSQL: 生产环境数据库（可选）

AI代理集成

• Claude Code: 主要推荐的AI编码代理
• Cursor CLI: 备选的智能编码工具
• MCP支持: Model Context Protocol原生集成

安装与设置

系统要求

# 必要组件
- Node.js 18+
- Python 3.10+
- Claude Code 或 Cursor CLI（已登录）
- Git

快速安装

# 克隆仓库
git clone https://github.com/opactorai/Claudable.git
cd Claudable

# 安装所有依赖（Node.js和Python）
npm install

# 启动开发服务器
npm run dev

应用访问地址

• 前端: http://localhost:3000
• API服务器: http://localhost:8080
• API文档: http://localhost:8080/docs

注意：端口会自动检测，如果默认端口被占用，会分配下一个可用端口。

手动设置（可选）

# 前端设置
cd apps/web
npm install

# 后端设置
cd ../api
python3 -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
pip install -r requirements.txt

使用流程

1. 连接AI代理

首先确保已登录Claude Code或Cursor CLI：

# Claude Code登录
claude
> /login

# Cursor CLI登录
cursor-agent login

2. 启动Claudable

npm run dev

3. 描述项目需求

用自然语言描述您想要构建的应用，例如：

• "创建一个带用户认证的任务管理应用"
• "制作一个支持深色模式的个人博客"
• "构建一个简单的电子商务网站"

4. 观看AI生成代码

AI将自动生成项目结构和代码，您可以实时看到预览。

5. 部署到生产环境

使用集成的Vercel部署功能一键发布您的应用。

数据库管理

本地开发

• 使用SQLite数据库，位于data/cc.db
• 首次运行时自动初始化

实用命令

# 备份数据库
npm run db:backup

# 重置数据库
npm run db:reset

# 清理所有依赖
npm run clean

服务集成

GitHub集成

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

Vercel部署

1. 获取Token: Vercel Account Settings → Create Token
2. 连接: Settings → Service Integrations → Vercel → Enter token → Create new project for deployment

Supabase数据库

1. 获取凭证: Supabase Dashboard → Your Project → Settings → API
   • Project URL: https://xxxxx.supabase.co
   • Anon Key: 客户端公钥
   • Service Role Key: 服务端密钥

常见问题解决

权限错误

# 检查当前用户
whoami

# 更改项目目录所有权
sudo chown -R $(whoami):$(whoami) ~/Claudable

依赖问题

# 清理所有依赖并重试
npm run clean
npm install

WSL用户注意事项

确保在用户账户而非root账户下运行Claude Code。

适用场景

1. 快速原型开发

• 创业者验证产品想法
• 产品经理制作演示原型
• 设计师创建交互式设计稿

2. 学习Web开发

• 编程初学者观察AI如何将需求转化为代码
• 理解现代Web应用架构和开发流程

3. 自动化前端开发

• 前端开发者自动化重复性开发任务
• 快速搭建项目框架和UI组件

4. 无代码/低代码开发

• 设计师或营销人员独立完成简单Web应用
• 减少对专业开发人员的依赖

项目优势

成本效益

• 完全免费: 无订阅费或使用限制
• 无额外API费用: 直接使用现有的Claude或Cursor订阅

开发速度

• 分钟级开发: 将想法转化为工作应用只需几分钟
• 生产就绪: 生成符合行业最佳实践的干净、可维护代码
• 即时反馈: 实时预览功能缩短开发反馈循环

灵活性

• 多AI代理支持: 支持Claude Code和Cursor CLI
• 无供应商锁定: 拥有完整代码所有权
• 可定制: 可修改和扩展生成的代码

未来发展计划

根据项目路线图，即将推出的功能包括：

• 新CLI代理: 支持更多AI编码工具
• 对话检查点: 保存和恢复对话/代码库状态
• 增强MCP集成: 原生MCP深度集成
• 子代理系统: 增强的代理系统架构

开源信息

• GitHub: https://github.com/opactorai/Claudable
• 开发者: OPACTOR (https://opactor.ai)
• 社区支持: 活跃的开源社区，持续更新和改进

总结

Claudable代表了Web开发的新范式，通过AI代理将自然语言描述直接转化为可部署的Web应用程序。它不仅降低了Web开发的门槛，还显著提高了开发效率，是现代开发者工具箱中不可或缺的工具。