Claudable

什么 Claudable?

Claudable 是一个功能强大的基于Next.js的 Web 应用程序构建器，它结合了Claude Code（也支持 游标 CLI！）高级 AI **功能，具有 可爱’s simple and intuitive app building experience. Just describe your app idea - “I want a task management app with dark mode” - and watch as Claudable instantly generates the code and shows you a live preview of your working app. You can deploy your app to 韦塞尔 and integrate database with 苏帕贝斯 for 自由.

这个开源项目使您能够轻松构建和部署专业的 Web 应用程序，以便 free.

How to start? Simply login to 克劳德代码 (or Cursor CLI), start Claudable，并描述要构建的内容。就是这样。应用程序构建器没有额外的订阅费用。

特性

• 强大的性能**：利用 Claude Code 和 Cursor CLI **功能的全部功能以及原生 MCP 支持
• 自然语言到代码：简单地描述您想要构建的内容，以及 Claudable generates production-ready Next.js code
• 即时预览：在 AI 构建您的应用程序时，通过热重载立即查看您的更改
• Zero 设置, Instant Launch：没有复杂的沙箱，没有 API 密钥，没有令人头疼的数据库 - 只需立即开始构建
• 漂亮的用户界面：使用 Tailwind CSS 和 shadcn/ui 生成漂亮的 UI
• 部署 to Vercel：只需单击一下即可推送您的应用程序，无需配置
• GitHub 集成：自动版本控制和持续部署设置
• Supabase 数据库：连接生产 PostgreSQL 并准备好使用身份验证
• 自动错误检测：检测应用中的错误并自动修复

演示示例

Codex CLI 示例

Qwen 代码示例

支持的 AI 编码**

Claudable 支持多种 AI 编码**，让您可以灵活地选择最适合您需求的工具：

• Claude Code - Anthropic 的高级 AI 编码**
• Codex CLI - OpenAI 的轻量级编码**
• Cursor CLI - 强大的多模型 AI **
• 双子座 CLI - 谷歌的开源人工智能**
• Qwen Code - 阿里巴巴的开源编码 CLI

Claude 代码（推荐）

Claude Code - Anthropic 的高级 AI 编码**，带有 Claude Opus 4.1

• Features: Deep codebase awareness, MCP 支持, Unix philosophy, direct terminal 集成
• 上下文：原生 256K 代币
• 定价：包含在 ChatGPT Plus/Pro/Team/Edu/Enterprise 计划中
• 安装:

  1
  2
  npm install -g @anthropic-ai/claude-code
  claude  # then > /login

Codex CLI

Codex CLI - OpenAI 的轻量级编码**，支持 GPT-5

• Features：推理能力强，本地执行，多种作模式（交互式、自动编辑、全自动）
• Context：因型号而异
• Pricing：包含在 ChatGPT Plus/Pro/Business/Edu/Enterprise 计划中
• Installation:

  1
  2
  npm install -g @openai/codex
  codex  # login with ChatGPT account

Cursor CLI

Cursor CLI - 强大的人工智能**，可以访问尖端模型

• Features：多模型支持（Anthropic、OpenAI、Gemini）、MCP 集成、 AGENTS.md support
• Context：取决于型号
• Pricing：提供免费套餐，高级功能的专业计划
• Installation:

  1
  2
  curl https://cursor.com/install -fsS | bash
  cursor-agent login

Gemini CLI

Gemini CLI - 谷歌的开源 AI **与 Gemini 2.5 Pro

• Features：1M 令牌上下文窗口、Google 搜索接地、MCP 支持、可扩展架构
• Context：1M 代币（免费套餐：60 个/分钟，1000 个/天）
• Pricing：使用 Google 帐户免费，付费套餐可获得更高的限额
• Installation:

  1
  2
  npm install -g @google/gemini-cli
  gemini  # follow authentication flow

Qwen Code

Qwen Code - 阿里巴巴用于 Qwen3-Coder 模型的开源 CLI

• Features：256K-1M 令牌上下文、多种模型大小（0.5B 至 480B）、Apache 2.0 许可证
• Context：256K 原生，1M 外推
• Pricing：完全免费和开源
• Installation:

  1
  2
  npm install -g @qwen-code/qwen-code@latest
  qwen --version

技术栈

数据库和部署：

• Supabase：将生产就绪的 PostgreSQL 数据库直接连接到您的项目。
• Vercel：一键部署立即发布作品

没有额外的订阅费用，专为您打造。

前提条件

在开始之前，请确保已安装以下内容：

• Node.js 18+
• 蟒蛇 3.10+
• Claude Code 或 Cursor CLI（已登录）
• Git

快速入门

Get Claudable 在几分钟内在您的本地计算机上运行：

1
2
3
4
5
6
7
8
9
# Clone the repository
git clone https://github.com/opactorai/Claudable.git
cd Claudable
 
# Install all dependencies (Node.js and Python)
npm install
 
# Start development servers
npm run dev

您的申请将在以下网址提供：

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

注意：自动检测端口。如果默认端口正在使用中，则将分配下一个可用端口。

Setup

手动设置

您也可以手动设置项目。

1
2
3
4
5
6
7
8
9
# Frontend setup
cd apps/web
npm install
 
# Backend setup
cd ../api
python3 -m venv .venv
source .venv/bin/activate  # On Windows: .venv\Scripts\activate
pip install -r requirements.txt

的 npm install 命令会自动处理完整的设置：

1. 端口配置：检测可用端口并创建 .env 文件
2. Node.js依赖项：安装包含工作区依赖项的包
3. Python 环境：在 apps/api/.venv
4. Python 依赖项：使用 uv （如果有）或pip
5. 数据库设置：SQLite 数据库自动创建 data/cc.db 首次运行时

其他命令

1
2
3
4
5
6
7
8
9
10
11
12
npm run db:backup   # Create a backup of your SQLite database
                    # Use when: Before major changes or deployments
                    # Creates: data/backups/cc_backup_[timestamp].db
 
npm run db:reset    # Reset database to initial state
                    # Use when: Need fresh start or corrupted data
                    # Warning: This will delete all your data!
 
npm run clean       # Remove all dependencies and virtual environments
                    # Use when: Dependencies conflict or need fresh install
                    # Removes: node_modules/, apps/api/.venv/, package-lock.json
                    # After running: npm install to reinstall everything

使用说明

开发入门

1. 连接 Claude 代码：链接您的 Claude Code CLI 以启用 AI 辅助
2. 描述您的项目：使用自然语言描述要构建的内容
3. 人工智能生成：观看人工智能生成您的项目结构和代码
4. 实时预览：通过热重载功能立即查看更改
5. Deploy：通过 Vercel 集成推送到生产环境

API开发

访问交互式 API 文档，网址为 http://localhost:8080/docs 以探索可用的端点并测试 API 功能。

数据库作

Claudable 使用 SQLite 进行本地开发，并且可以在生产中为 PostgreSQL 配置。数据库在首次运行时自动初始化。

故障 排除

端口已在使用

应用程序会自动查找可用端口。检查 .env 文件以查看分配了哪些端口。

安装失败

1
2
3
# Clean all dependencies and retry
npm run clean
npm install

权限错误 （macOS/Linux）

如果遇到权限错误：

1
2
3
4
cd apps/api
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

Claude 代码权限问题 （Windows/WSL）

如果遇到错误： Error output dangerously skip permissions cannot be used which is root sudo privileges for security reasons

溶液：

1. 不要使用 sudo 或以 root 用户身份
2. Ensure proper file ownership in WSL:

   1
   2
   3
   4
   5
   # Check current user
   whoami
    
   # Change ownership of project directory to current user
   sudo chown -R $(whoami):$(whoami) ~/Claudable

3. 如果使用 WSL，请确保您从您的用户帐户而不是 root 运行 Claude Code
4. Verify Claude Code installation permissions:

   1
   2
   # Reinstall Claude Code without sudo
   npm install -g @anthropic-ai/claude-code --unsafe-perm=false

集成指南

GitHub

获取代币： GitHub Personal Access Tokens → 生成新令牌（经典）→选择repo 范围

连接： 设置→服务集成→ GitHub → 输入令牌→创建或连接存储库

Vercel

Get Token: Vercel Account Settings → 创建令牌

Connect: Vercel → →服务集成设置 → 输入令牌→ 创建用于部署的新项目

Supabase

获取凭据： Supabase Dashboard →项目→设置→API

• 项目网址： https://xxxxx.supabase.co
• 匿名密钥：客户端的公钥
• 服务角色密钥：服务器端的密钥

授权许可

麻省理工学院许可证。

即将推出的功能

这些功能正在开发中，即将开放。

• **新的 CLI **** - 相信我们，您一定会喜欢这个！
• 聊天检查点 - 保存和恢复对话/代码库状态
• 高级 MCP 集成 - 与 MCP 的原生集成
• 增强型系统** - 子**，AGENTS.md integration
• 网站克隆 - 您可以从引用 URL 启动项目。
• 各种错误修复和社区 PR 合并

我们正在努力提供您一直要求的功能。敬请关注！

星历史