一款强大的基于 Next.js 的网页应用构建工具，集成了Claude Code（同时支持Cursor CLI！）先进的AI代理功能可爱这款应用构建体验简单直观。只需描述你的应用创意——"我想要一个带暗黑模式的任务管理应用"——就能看着Claudable实时生成代码并展示运行中的应用预览。你可以免费将应用部署到Vercel，并通过Supabase集成数据库。

强力特工表现充分利用Claude Code和Cursor CLI Agent的全部能力 ;

• 自然语言转代码:只需简单描述你想构建的内容，Claudable就能生成生产就绪的Next.js代码
• 即时预览 : 通过AI构建应用时，借助热重载即时查看您的更改
• 零配置，即时启动无需复杂的沙盒环境，无需API密钥，无需数据库烦恼——即刻开始构建
• 美观的用户界面使用Tailwind CSS和shadcn/ui打造精美UI界面
• 部署到 Vercel：一键部署您的应用，无需任何配置
• GitHub 集成：自动版本控制与持续部署配置
• Supabase Database连接已配置认证的生产环境PostgreSQL，开箱即用
  

  支持的AI编程代理

• 支持多种 AI 编程助手，让您能灵活选择最适合需求的工具
• Anthropic 的高级 AI 编程代理
• Codex CLIOpenAI的轻量级编码代理
• Cursor CLI- 强大的Multi-model AI代理
• Qwen 代码- 阿里巴巴的开源编码CLI
• Z.AI GLM-4.6 - Zhipu AI的编程代理
• 功能特性：深度代码库感知能力、Unix哲学理念、直接终端集成
• 定价：需要Anthropic API密钥或Claude订阅
• Installation:
• npm install -g @anthropic-ai/claude-code
  claude # then > /login
• 安装:

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

  功能特性高推理能力，本地执行，多种操作模式（交互式、自动编辑、全自动）
  Context: Varies by model
  上下文因机型而异
  定价包含在ChatGPT Plus/Pro/Business/Edu/Enterprise方案中
  Installation:
  npm install -g @openai/codex
  codex # login with ChatGPT account
  安装
  npm install -g @openai/codex
  codex # login with ChatGPT account
  Z.AI GLM-4.6智谱 AI 基于 GLM-4 驱动的编程助手
  功能特性: 强大的推理能力和成本效益，代码生成和理解
  Context: 200K tokens上下文200K代币
  Pricing: Starting from $3/month (GLM Coding Lite) to $30/month (GLM Coding Max), with 50% off first month
  定价起步价为每月3美元（GLM Coding Lite套餐）至每月30美元（GLM Coding Max套餐），首月可享5折优惠
  安装见快速入门指南
  Technology Stack技术栈
  Database & Deployment:数据库与部署：
  Supabase将生产就绪的PostgreSQL数据库直接连接到您的项目。
  Vercel一键部署，即刻发布你的作品
  无需额外订阅费用，专为你量身打造。

  Prerequisites先决条件
  在开始之前，请确保已安装以下内容：

  Node.js 18+
  Claude Code 或 Cursor CLI（已登录）
  Quick Start快速入门
  几分钟内让 Claudable 在您的本地机器上运行起来：

  # Clone the repository
  git clone https://github.com/opactorai/Claudable.git
  cd Claudable

  # Install all dependencies
  npm install

  # Start development server
  npm run dev
  您的应用程序将在http://localhost:3000
  注意端口会被自动检测。如果默认端口已被占用，将分配下一个可用端口。

  Setup安装
  该npm install命令自动处理完整的设置：
  端口配置检测可用端口并创建.env文件
  依赖项安装所有必需的Node.js包
  数据库设置SQLite数据库会自动创建于data/cc.db初次运行时
  Desktop App (Electron)
  将Claudable构建并运行为桌面应用程序：

  # 开发模式 npm run dev:desktop

  # 构建桌面应用 npm run build:desktop

  # 为特定平台打包 npm run package:mac # macOS npm run package:win # Windows npm run package:linux

  # Linux # 附加命令 npm run db:backup

  # 创建SQLite数据库备份 # 使用场景：重大更改或部署前

  # 生成文件：data/backups/cc_backup_[时间戳].db npm run db:reset # 重置数据库至初始状态

  # 使用场景：需要全新开始或数据损坏时

  # 警告：此操作将删除所有数据！ npm run clean # 清除所有依赖项

  # 使用场景：依赖冲突或需要重新安装时

  # 删除内容：node_modules/, package-lock.json

  # 运行后需执行：npm install 以重新安装所有依赖

  # 使用指南 # 开发入门 # 数据库操作

  Claudable在本地开发中使用SQLite数据库。该数据库在首次运行时将自动初始化。

  Troubleshooting故障排除
  Port Already in Use
  应用程序会自动寻找可用端口。检查.env查看文件以确认分配的端口号。

  安装失败
  # 清理所有依赖并重试
  npm run clean
  npm install

  Claude代码权限问题（Windows/WSL）
  如果遇到错误：出于安全原因，因具有root sudo权限，无法使用危险跳过权限的错误输出

  Solution:解决方案：

  不要运行Claude代码sudo或以root用户身份

  确保在WSL中正确设置文件所有权：
  # 查看当前用户
  whoami

  # 将项目目录的所有权更改为当前用户
  sudo chown -R $(whoami):$(whoami) ~/Claudable

  确保WSL中的文件所有权正确：

  # Check current user

  将项目目录的所有权更改为当前用户
  sudo chown -R $(whoami):$(whoami) ~/Claudable
  如果使用WSL，请确保您是从用户账户而非root账户运行Claude Code
  如果使用 WSL，请确保以用户账户而非 root 身份运行 Claude Code
  验证Claude Code安装权限：
  # 无需sudo重新安装Claude Code
  npm install -g @anthropic-ai/claude-code --unsafe-perm=false
  验证Claude Code安装权限：

  # Reinstall Claude Code without sudo
  npm install -g @anthropic-ai/claude-code --unsafe-perm=false
  集成指南
  获取代币： GitHub 个人访问代币→ 生成新代币（经典版）→ 选择repo作用域
  连接设置 → 服务集成 → GitHub → 输入代币 → 创建或连接仓库
  Vercel
  获取代币： Vercel 账户设置→ 创建代币
  连接：设置 → 服务集成 → Vercel → 输入代币 → 创建新项目用于部署
  Supabase
  获取凭证： Supabase 控制面板您的项目 → 设置 → API
  项目URL：https://xxxxx.supabase.co

  连接Claude代码：将您的Claude Code CLI链接起来以启用AI辅助功能
  描述您的项目：用自然语言描述您想要构建的内容
  AI 生成观看AI生成您的项目结构和代码
  实时预览借助热重载功能即时查看变更
  部署通过Vercel集成推送至生产环境

  Anon Key：用于客户端的公钥
  服务角色密钥：用于服务器端的机密密钥