Claudable - 基於 AI 代理的開源網頁應用程式建構器

專案概述

Claudable 是一個強大的基於 Next.js 的網頁應用程式建構器，它將 Claude Code（也支援 Cursor CLI）的先進 AI 代理能力與 Lovable 簡單直觀的應用程式建構體驗相結合。只需描述您的應用程式想法——「我想要一個帶深色模式的任務管理應用程式」——就能觀看 Claudable 立即生成程式碼並顯示工作應用程式的即時預覽。

這個開源專案使您能夠輕鬆免費地建構和部署專業的網頁應用程式。

核心特性

🤖 強大的 AI 代理支援

• Claude Code: Anthropic 的先進 AI 編碼代理，具有高推理能力、本機執行、多種操作模式（互動式、自動編輯、全自動）
• Cursor CLI: 智慧編碼代理，適用於複雜編碼任務
• 原生 MCP 支援: 充分利用 Claude Code 和 Cursor CLI 代理的能力

💻 開發體驗

• 自然語言轉程式碼: 只需描述您想要建構的內容，Claudable 就會生成生產就緒的 Next.js 程式碼
• 即時預覽: 透過熱重載立即查看變更，在 AI 建構應用程式時即時看到變化
• 零配置啟動: 無需複雜的沙箱、API 金鑰或資料庫配置——立即開始建構
• 美觀使用者介面生成: 使用 Tailwind CSS 和 shadcn/ui 生成精美的使用者介面

🚀 部署與整合

• 一鍵部署: 將應用程式推送到 Vercel 只需一鍵，無需配置
• GitHub 整合: 自動版本控制和持續部署設定
• Supabase 資料庫: 直接連接生產就緒的 PostgreSQL 資料庫到您的專案
• 自動錯誤偵測: 偵測應用程式中的錯誤並自動修復

💰 成本效益

• 完全免費: 除了應用程式建構器外，沒有額外的訂閱費用
• 開源: MIT 授權，可用於商業用途
• 無供應商鎖定: 您擁有生成的程式碼，可以在任何地方修改或託管

技術架構

前端技術堆疊

• Next.js: 現代 React 框架
• Tailwind CSS: 實用優先的 CSS 框架
• shadcn/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. 取得權杖: GitHub Personal Access Tokens → Generate new token (classic) → Select repo scope
2. 連接: Settings → Service Integrations → GitHub → Enter token → Create or connect repository

Vercel 部署

1. 取得權杖: 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. 學習網頁開發

• 程式設計初學者觀察 AI 如何將需求轉化為程式碼
• 理解現代網頁應用程式架構和開發流程

3. 自動化前端開發

• 前端開發者自動化重複性開發任務
• 快速搭建專案框架和使用者介面元件

4. 無程式碼/低程式碼開發

• 設計師或行銷人員獨立完成簡單網頁應用程式
• 減少對專業開發人員的依賴

專案優勢

成本效益

• 完全免費: 無訂閱費或使用限制
• 無額外 API 費用: 直接使用現有的 Claude 或 Cursor 訂閱

開發速度

• 分鐘級開發: 將想法轉化為工作應用程式只需幾分鐘
• 生產就緒: 生成符合行業最佳實踐的乾淨、可維護程式碼
• 即時回饋: 即時預覽功能縮短開發回饋循環

彈性

• 多 AI 代理支援: 支援 Claude Code 和 Cursor CLI
• 無供應商鎖定: 擁有完整程式碼所有權
• 可客製化: 可修改和擴展生成的程式碼

未來發展計畫

根據專案路線圖，即將推出的功能包括：

• 新 CLI 代理: 支援更多 AI 編碼工具
• 對話檢查點: 儲存和恢復對話/程式碼庫狀態
• 增強 MCP 整合: 原生 MCP 深度整合
• 子代理系統: 增強的代理系統架構

開源資訊

• GitHub: https://github.com/opactorai/Claudable
• 開發者: OPACTOR (https://opactor.ai)
• 社群支援: 活躍的開源社群，持續更新和改進

總結

Claudable 代表了網頁開發的新典範，透過 AI 代理將自然語言描述直接轉化為可部署的網頁應用程式。它不僅降低了網頁開發的門檻，還顯著提升了開發效率，是現代開發者工具箱中不可或缺的工具。