Claudable：将自然语言转化为 Web 应用的开源构建平台
Claudable 是一款基于 AI 驱动的免费开源 Web 构建器。它通过集成 Claude Code、Codex、Cursor Agent 及 Qwen Code 等本地 CLI 编程代理，让开发者能够直接使用自然语言描述需求，由平台自动生成可运行的 Next.js 应用。该工具不仅提供实时预览，还打通了 Vercel 部署与 Supabase 数据库集成，极大降低了现代 Web 产品的开发门槛。
核心能力分析
Claudable 的核心逻辑在于将 AI 代理的编程能力与现代前端框架深度绑定，实现从「想法」到「产品」的快速闭环：
- 语义化代码生成： 用户只需输入如“构建一个支持夜间模式的任务管理工具”等指令，系统即可快速产出完整代码，并配合热重载（Hot Reload）实现即时预览。
- 灵活的模型生态： 兼容多种主流 AI 代理，包括推荐的 Claude Code、OpenAI 的 Codex CLI、多模型支持的 Cursor CLI，以及阿里开源的 Qwen Code 和智谱 AI 的 Z.AI GLM-4.6。
- 工业级 UI 方案： 预集成 Tailwind CSS 与 shadcn/ui，确保生成的界面天然具备响应式布局且符合现代审美，无需手动调整样式。
- 零门槛部署环境： 采用 npm 安装即可启动，无需预先配置复杂的 API Key 或本地数据库环境。
基础设施集成
- Vercel： 实现一键式云端部署，跳过繁琐的配置步骤。
- Supabase： 提供生产级 PostgreSQL 数据库支持及内置的用户身份认证模块。
- GitHub： 自动接管版本控制与持续部署（CD）流程。
此外，为了提升跨平台体验，Claudable 还提供了基于 Electron 的桌面应用版本，全面适配 macOS、Windows 和 Linux。
快速上手指南
环境准备
- Node.js 18+ 版本
- 已登录的 Claude Code 或 Cursor CLI
- 安装 Git
部署步骤
git clone https://github.com/opactorai/Claudable.git
cd Claudable
npm install
npm run dev
启动后访问 http://localhost:3000 即可进入界面。系统会自动创建 .env 配置文件并分配可用端口。
运维与常见问题
在日常使用或维护过程中，可通过以下命令快速处理环境问题：
- 数据库重置：
npm run db:reset - 数据库备份：
npm run db:backup - 依赖清理： 执行
npm run clean后重新安装依赖。
提示： 若遇到权限错误或端口冲突，请优先检查系统用户权限并清理冗余依赖环境。
适用场景
- 独立开发者 / 黑客松选手： 快速构建 MVP（最小可行性产品）或演示 Demo。
- AI 编程初学者： 通过语义描述学习应用结构，无需深厚的编码基础。
- 技术团队： 用于快速验证产品原型或测试新 UI 界面。
- 教育领域： 作为编程启蒙或教学演示的交互工具。
路线图与开源协议
项目采用 MIT 开源协议。未来的更新方向将聚焦于：
- 原生支持模型上下文协议（MCP）。
- 实现聊天记录与代码状态的保存 / 恢复机制。
- 支持 AGENTS.md 定义的多代理协作系统。
- 开发基于网址的克隆项目功能。
正文完
