Claudable：使用AI智能体生成并部署网站

Claudable是一个开源的网站构建工具。它连接了像Claude Code或Cursor Agent这样的AI编码智能体，让用户可以通过发出简单的指令来创建、开发和部署网络应用。用户只需要用自然语言描述他们想要的应用，比如“我想要一个有暗黑模式的任务管理应用”，Claudable就能利用AI智能体生成相应的代码，并提供实时预览。该工具基于Next.js框架，集成了Vercel用于一键部署，Supabase用于数据库管理，以及GitHub用于版本控制。这个项目的设计目标是简化开发流程，用户无需处理复杂的环境配置或API密钥问题，就可以免费构建和发布专业的网络应用。

Funktionsliste

• AI智能体驱动开发：支持连接Claude Code和Cursor CLI作为AI编码智能体，根据用户的自然语言指令生成生产环境可用的Next.js代码。
• Sofortige Vorschau：在AI构建应用的过程中，用户可以通过热重载功能立即看到代码变更后的实时效果。
• Ein-Klick-Bereitstellung：集成了Vercel，用户可以将开发完成的应用一键发布到线上，无需进行复杂的部署配置。
• Datenbank-Integration：支持连接到Supabase，为应用快速配置好生产级别的PostgreSQL数据库和用户认证功能。
• Automatisierte Versionskontrolle：内置GitHub集成功能，可以自动为项目设置版本控制和持续部署。
• 零配置启动：简化了初始设置流程，无需手动配置沙箱环境、API密钥或数据库，让用户可以专注于应用开发。
• 自动错误修复：系统能够自动检测应用中的错误，并尝试利用AI智能体进行修复。
• 现代UI生成：使用Tailwind CSS和shadcn/ui等流行的前端库来生成美观的用户界面。

Hilfe verwenden

Claudable将AI编程智能体的强大能力与直观的应用构建体验相结合，让开发者和普通用户都能轻松上手。下面将详细介绍如何安装和使用Claudable。

vorläufige Vorbereitung

在开始安装Claudable之前，请确保你的电脑上已经安装了以下软件和工具：

• Node.js: 版本需要在18或更高。
• Python: 版本需要在3.10或更高。
• Git: 用于克隆项目代码仓库。
• AI编码智能体: 你需要安装并登录Claude Code或Cursor CLI。官方强烈推荐使用Claude Code以获得最佳体验。

安装AI编码智能体

你可以根据自己的偏好选择安装其中一个：

1. Claude Code
通过Node.js的包管理器npm进行全局安装：

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

安装完成后，在终端登录你的Claude账户：

claude

然后根据提示输入命令 /login 完成登录。

2. Cursor CLI
它比Claude Code稍慢，但在处理复杂编码任务时更强大。
使用curl命令进行安装：

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

安装后，同样需要登录：“`shell
cursor-agent login

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

Schritt 2: Eingabe des Projektkatalogs

cd Claudable

第三步：安装依赖
Führen Sie es im Stammverzeichnis des Projekts ausnpm install命令。这个命令会自动完成所有必要的设置，包括：

• 安装前端和后端的Node.js依赖包。
• 在后端API目录 apps/api/ 下创建一个Python虚拟环境 .venv.
• ausnutzenuvvielleichtpip安装所有Python依赖包。
• 自动检测可用的端口，并创建.env环境配置文件。
• 在首次运行时，于 data/ 目录下自动创建SQLite数据库文件 cc.db.

npm install

第四步：启动开发服务器
Nachdem die Installation abgeschlossen ist, führen Siedev命令来同时启动前端和后端服务器：

npm run dev

启动成功后，你会在终端看到以下信息，表明应用正在运行：

• 前端应用: http://localhost:3000
• 后端API服务器: http://localhost:8080
• API-Dokumentation: http://localhost:8080/docs

注意：如果默认端口（3000和8080）已被占用，系统会自动检测并分配下一个可用的端口。

Wie zu verwenden

启动并运行Claudable后，你就可以开始构建你的应用了。

1. 连接AI智能体：确保你已经按照前面的步骤安装并登录了Claude Code或Cursor CLI。
2. 描述你的项目：在Claudable的用户界面中，使用自然语言清晰地描述你想要构建的应用。例如：“创建一个博客平台，用户可以发布和评论文章”。
3. 观看AI生成代码：提交描述后，AI智能体将开始分析你的需求，并自动生成项目结构和代码。
4. 实时预览和迭代：在AI工作的同时，你可以通过浏览器打开http://localhost:3000实时查看应用的构建进度。如果对结果不满意，可以随时提出新的指令进行修改和迭代。
5. Einsatz geht live：当你对应用感到满意时，可以通过集成的Vercel功能一键将其部署到线上。

服务集成

为了实现部署和数据库功能，你需要连接GitHub、Vercel和Supabase。

• GitHub-Integration::
  1. 前往GitHub个人设置页面生成一个新的Personal Access Token (classic)。
  2. Zecke repo 权限范围。
  3. 在Claudable的设置 -> 服务集成 -> GitHub中输入你生成的Token，然后创建或连接一个代码仓库。
• Vercel集成::
  1. 前往Vercel的账户设置页面创建一个Token。
  2. 在Claudable的设置 -> 服务集成 -> Vercel中输入Token，然后创建一个新项目用于部署。
• Supabase-Integration::
  1. 前往Supabase仪表盘，在你的项目设置中找到API凭证。
  2. 你需要提供项目URLundAnon Key（用于客户端的公共密钥）和Service Role Key（用于服务器端的私密密钥）。
  3. 将这些信息填入Claudable的Supabase集成设置中。

Anwendungsszenario

1. Schnelles Prototyping
   对于想要快速验证一个产品想法的创业者或产品经理，可以使用Claudable，通过简单的文字描述在几分钟内生成一个可交互的应用原型，用于演示和收集早期用户反馈。
2. 自动化前端开发
   前端开发者可以利用Claudable来自动完成重复性的开发任务，例如搭建项目框架、生成UI组件或编写基础页面。这样可以把更多精力投入到复杂的业务逻辑和用户体验优化上。
3. 学习Web开发
   对于编程初学者，Claudable是一个很好的学习工具。通过观察AI如何将自然语言需求转化为实际的代码，初学者可以更直观地理解现代Web应用的架构和开发流程。
4. 无代码/低代码开发
   不具备深厚编程背景的用户，如设计师或市场营销人员，也可以使用Claudable来独立完成一些简单网站或应用的搭建，例如个人作品集网站、活动登陆页等。

QA

1. Claudable是免费的吗？
   是的，Claudable项目本身是开源且免费的。但是，它依赖的第三方服务可能会产生费用，例如你使用的AI智能体（Claude Code或Cursor）、Vercel的部署服务或Supabase的数据库服务，具体取决于你的使用量和所选套餐。
2. 我需要有编程经验才能使用Claudable吗？
   不需要深厚的编程经验。Claudable的核心设计理念就是让用户通过自然语言来构建应用。但是，如果你了解一些基本的Web开发知识（如HTML, CSS, JavaScript），将有助于你更精确地描述需求并对AI生成的代码进行微调。
3. AI生成的代码质量如何？
   Claudable利用先进的AI编码智能体来生成代码，其代码质量通常较高，可以达到“生产环境开箱即用”的水平。它生成的代码基于Next.js等业界标准框架，并遵循最佳实践。不过，对于复杂的应用，仍建议由专业开发者进行代码审查和优化。
4. 如果我在使用过程中遇到权限错误该怎么办？
   在macOS、Linux或Windows的WSL环境中，可能会遇到文件权限问题。解决方法是不要使用sudo或root用户权限来运行Claude Code。你需要确保项目文件夹的所有权属于当前用户。可以参考项目README.md文档中的“故障排除”部分，里面有针对不同操作系统的详细解决方案。