[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73688":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":38,"readmeContent":39,"aiSummary":40,"trendingCount":16,"starSnapshotCount":16,"syncStatus":41,"lastSyncTime":42,"discoverSource":43},73688,"Claudable","opactorai\u002FClaudable","opactorai","Claudable is an open-source web builder that leverages local CLI agents, such as Claude Code, Codex, Gemini CLI, Qwen Code, and Cursor Agent, to build and deploy products effortlessly.","",null,"TypeScript",3985,599,33,25,0,6,13,35,18,30.33,"MIT License",false,"main",true,[27,28,29,30,31,32,33,34,35,36,37],"agent","claude","claude-code","codex","codingagent","free","gemini","local","lovable","qwen","web-builder","2026-06-12 02:03:16","# Claudable\n\n\u003Cimg src=\"https:\u002F\u002Fstorage.googleapis.com\u002Fclaudable-assets\u002FClaudable.png\" alt=\"Claudable\" style=\"width: 100%;\" \u002F>\n\u003Cdiv align=\"center\">\n\u003Ch3>Connect CLI Agent • Build what you want • Deploy instantly\u003C\u002Fh3>\n\u003C\u002Fdiv>\n\u003Cp align=\"center\">\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fhesreallyhim\u002Fawesome-claude-code\">\n\u003Cimg src=\"https:\u002F\u002Fawesome.re\u002Fmentioned-badge.svg\" alt=\"Mentioned in Awesome Claude Code\">\n\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Faaron_xong\">\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FFollow-@aaron__xong-000000?style=flat&logo=x&logoColor=white\" alt=\"Follow Aaron\">\n\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002FNJNbafHNQC\">\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDiscord-Join%20Community-7289da?style=flat&logo=discord&logoColor=white\" alt=\"Join Discord Community\">\n\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fopactorai\u002FClaudable\">\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fopactorai\u002FClaudable?style=flat&logo=github&logoColor=white&labelColor=181717&color=f9d71c\" alt=\"GitHub Stars\">\n\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fopactorai\u002FClaudable\">\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fopactorai\u002FClaudable?style=flat&logo=github&logoColor=white&labelColor=181717&color=181717\" alt=\"GitHub Forks\">\n\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fopactorai\u002FClaudable\u002Fblob\u002Fmain\u002FLICENSE\">\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fopactorai\u002FClaudable?style=flat&logo=github&logoColor=white&labelColor=181717&color=181717\" alt=\"License\">\n\u003C\u002Fa>\n\u003C\u002Fp>\n\n## What is Claudable?\n\nClaudable is a powerful Next.js-based web app builder that combines **C**laude Code's (Cursor CLI also supported!) advanced AI agent capabilities with **Lovable**'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 Vercel and integrate database with Supabase for free.\n\nThis open-source project empowers you to build and deploy professional web applications easily for **free**.\n\nHow to start? Simply login to Claude Code (or Cursor CLI), start Claudable, and describe what you want to build. That's it. There is no additional subscription cost for app builder.\n\n## Features\n\n![Claudable Demo](assets\u002Fgif\u002FClaudable_v2_cc_4_1080p.gif)\n\n- **Powerful Agent Performance**: Leverage the full power of Claude Code and Cursor CLI Agent capabilities\n- **Natural Language to Code**: Simply describe what you want to build, and Claudable generates production-ready Next.js code\n- **Instant Preview**: See your changes immediately with hot-reload as AI builds your app\n- **Zero Setup, Instant Launch**: No complex sandboxes, no API key, no database headaches - just start building immediately\n- **Beautiful UI**: Generate beautiful UI with Tailwind CSS and shadcn\u002Fui\n- **Deploy to Vercel**: Push your app live with a single click, no configuration needed\n- **GitHub Integration**: Automatic version control and continuous deployment setup\n- **Supabase Database**: Connect production PostgreSQL with authentication ready to use\n- **Desktop App**: Available as Electron desktop application for Mac, Windows, and Linux\n\n## Demo Examples\n\n### Codex CLI Example\n\n![Codex CLI Demo](assets\u002Fgif\u002FClaudable_v2_codex_1_1080p.gif)\n\n### Qwen Code Example\n\n![Qwen Code Demo](assets\u002Fgif\u002FClaudable_v2_qwen_1_1080p.gif)\n\n## Supported AI Coding Agents\n\nClaudable supports multiple AI coding agents, giving you the flexibility to choose the best tool for your needs:\n\n- **Claude Code** - Anthropic's advanced AI coding agent\n- **Codex CLI** - OpenAI's powerful coding agent\n- **Cursor CLI** - Powerful multi-model AI agent\n- **Qwen Code** - Alibaba's open-source coding CLI\n- **Z.AI GLM-4.6** - Zhipu AI's coding agent\n\n### Claude Code (Recommended)\n**[Claude Code](https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fclaude-code\u002Fsetup)** - Anthropic's advanced AI coding agent with Claude Opus 4.6\n- **Features**: Deep codebase awareness, Unix philosophy, direct terminal integration\n- **Context**: Native 200k tokens\n- **Pricing**: Included with Claude Pro\u002FMax\u002FTeam\u002FEnterprise plans, or Anthropic API key\n- **Installation**:\n  ```bash\n  npm install -g @anthropic-ai\u002Fclaude-code\n  claude  # then > \u002Flogin\n  ```\n\n### Codex CLI\n**[Codex CLI](https:\u002F\u002Fgithub.com\u002Fopenai\u002Fcodex)** - OpenAI's powerful coding agent with GPT-5 support\n- **Features**: High reasoning capabilities, local execution, multiple operating modes (interactive, auto-edit, full-auto)\n- **Context**: Varies by model\n- **Pricing**: Included with ChatGPT Plus\u002FPro\u002FBusiness\u002FEdu\u002FEnterprise plans (from $20\u002Fmonth)\n- **Installation**:\n  ```bash\n  npm install -g @openai\u002Fcodex\n  codex  # login with ChatGPT account\n  ```\n\n### Cursor CLI\n**[Cursor CLI](https:\u002F\u002Fcursor.com\u002Fen\u002Fcli)** - Powerful AI agent with access to cutting-edge models\n- **Features**: Multi-model support (Anthropic, OpenAI), AGENTS.md support\n- **Context**: Model dependent\n- **Pricing**: Free tier available, Pro from $20\u002Fmonth (credit-based system)\n- **Installation**:\n  ```bash\n  curl https:\u002F\u002Fcursor.com\u002Finstall -fsS | bash\n  cursor-agent login\n  ```\n\n### Qwen Code\n**[Qwen Code](https:\u002F\u002Fgithub.com\u002FQwenLM\u002Fqwen-code)** - Alibaba's open-source CLI for Qwen3-Coder models\n- **Features**: 256K-1M token context, multiple model sizes (0.5B to 480B), Apache 2.0 license\n- **Context**: 256K native, 1M with extrapolation\n- **Pricing**: Completely free and open-source\n- **Installation**:\n  ```bash\n  npm install -g @qwen-code\u002Fqwen-code@latest\n  qwen --version\n  ```\n\n### Z.AI GLM-4.6\n**[Z.AI GLM-4.6](https:\u002F\u002Fz.ai\u002Fsubscribe)** - Zhipu AI's coding agent powered by GLM-4.6\n- **Features**: Strong reasoning capabilities and cost-efficient, code generation and understanding\n- **Context**: 200K tokens\n- **Pricing**: Starting from $3\u002Fmonth (GLM Coding Lite) to $30\u002Fmonth (GLM Coding Max), with 50% off first month\n- **Installation**: See [Quick Start Guide](https:\u002F\u002Fdocs.z.ai\u002Fdevpack\u002Fquick-start)\n\n## Technology Stack\n\n**Database & Deployment:**\n- **[Supabase](https:\u002F\u002Fsupabase.com\u002F)**: Connect production-ready PostgreSQL database directly to your project.\n- **[Vercel](https:\u002F\u002Fvercel.com\u002F)**: Publish your work immediately with one-click deployment\n\n**There is no additional subscription cost and built just for YOU.**\n\n## Prerequisites\n\nBefore you begin, ensure you have the following installed:\n- Node.js 18+\n- Claude Code or Cursor CLI (already logged in)\n- Git\n\n## Quick Start\n\nGet Claudable running on your local machine in minutes:\n\n```bash\n# Clone the repository\ngit clone https:\u002F\u002Fgithub.com\u002Fopactorai\u002FClaudable.git\ncd Claudable\n\n# Install all dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\nYour application will be available at http:\u002F\u002Flocalhost:3000\n\n**Note**: Ports are automatically detected. If the default port is in use, the next available port will be assigned.\n\n## Troubleshooting\n- **Database migration conflicts**: If you upgraded from a previous Claudable version and run into database errors, reset the Prisma database so it matches the latest schema:\n  ```bash\n  npm run prisma:reset\n  ```\n  The command drops and recreates the local database, so back up any data you need before running it.\n\n## Setup\n\nThe `npm install` command automatically handles the complete setup:\n\n1. **Port Configuration**: Detects available ports and creates `.env` files\n2. **Dependencies**: Installs all required Node.js packages\n3. **Database Setup**: SQLite database auto-creates at `data\u002Fcc.db` on first run\n\n### Desktop App (Electron)\n\nBuild and run Claudable as a desktop application:\n\n```bash\n# Development mode\nnpm run dev:desktop\n\n# Build desktop app\nnpm run build:desktop\n\n# Package for specific platforms\nnpm run package:mac      # macOS\nnpm run package:win      # Windows\nnpm run package:linux    # Linux\n```\n\n### Additional Commands\n```bash\nnpm run db:backup   # Create a backup of your SQLite database\n                    # Use when: Before major changes or deployments\n                    # Creates: data\u002Fbackups\u002Fcc_backup_[timestamp].db\n\nnpm run db:reset    # Reset database to initial state\n                    # Use when: Need fresh start or corrupted data\n                    # Warning: This will delete all your data!\n\nnpm run clean       # Remove all dependencies\n                    # Use when: Dependencies conflict or need fresh install\n                    # Removes: node_modules\u002F, package-lock.json\n                    # After running: npm install to reinstall everything\n```\n\n## Usage\n\n### Getting Started with Development\n\n1. **Connect Claude Code**: Link your Claude Code CLI to enable AI assistance\n2. **Describe Your Project**: Use natural language to describe what you want to build\n3. **AI Generation**: Watch as the AI generates your project structure and code\n4. **Live Preview**: See changes instantly with hot reload functionality\n5. **Deploy**: Push to production with Vercel integration\n\n### Database Operations\n\nClaudable uses SQLite for local development. The database automatically initializes on first run.\n\n## Troubleshooting\n\n### Port Already in Use\n\nThe application automatically finds available ports. Check the `.env` file to see which ports were assigned.\n\n### Installation Failures\n\n```bash\n# Clean all dependencies and retry\nnpm run clean\nnpm install\n```\n\n### Claude Code Permission Issues (Windows\u002FWSL)\n\nIf you encounter the error: `Error output dangerously skip permissions cannot be used which is root sudo privileges for security reasons`\n\n**Solution:**\n1. Do not run Claude Code with `sudo` or as root user\n2. Ensure proper file ownership in WSL:\n   ```bash\n   # Check current user\n   whoami\n   \n   # Change ownership of project directory to current user\n   sudo chown -R $(whoami):$(whoami) ~\u002FClaudable\n   ```\n3. If using WSL, make sure you're running Claude Code from your user account, not root\n4. Verify Claude Code installation permissions:\n   ```bash\n   # Reinstall Claude Code without sudo\n   npm install -g @anthropic-ai\u002Fclaude-code --unsafe-perm=false\n   ```\n\n## Integration Guide\n\n### GitHub\n**Get Token:** [GitHub Personal Access Tokens](https:\u002F\u002Fgithub.com\u002Fsettings\u002Ftokens) → Generate new token (classic) → Select `repo` scope\n\n**Connect:** Settings → Service Integrations → GitHub → Enter token → Create or connect repository\n\n### Vercel  \n**Get Token:** [Vercel Account Settings](https:\u002F\u002Fvercel.com\u002Faccount\u002Ftokens) → Create Token\n\n**Connect:** Settings → Service Integrations → Vercel → Enter token → Create new project for deployment\n\n### Supabase\n**Get Credentials:** [Supabase Dashboard](https:\u002F\u002Fsupabase.com\u002Fdashboard) → Your Project → Settings → API\n- Project URL: `https:\u002F\u002Fxxxxx.supabase.co`  \n- Anon Key: Public key for client-side\n- Service Role Key: Secret key for server-side\n\n\n## License\n\nMIT License.\n\n## Upcoming Features\nThese features are in development and will be opened soon.\n- **Native MCP Support** - Model Context Protocol integration for enhanced agent capabilities\n- **Checkpoints for Chat** - Save and restore conversation\u002Fcodebase states\n- **Enhanced Agent System** - Subagents, AGENTS.md integration\n- **Website Cloning** - You can start a project from a reference URL.\n- Various bug fixes and community PR merges\n\nWe're working hard to deliver the features you've been asking for. Stay tuned!\n\n## Star History\n\n[![Star History Chart](https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=opactorai\u002FClaudable&type=Date)](https:\u002F\u002Fwww.star-history.com\u002F#opactorai\u002FClaudable&Date)\n","Claudable 是一个基于Next.js的开源网页构建工具，它利用本地CLI代理如Claude Code、Codex、Gemini CLI等，实现从自然语言描述到代码生成的一站式服务。其核心功能包括通过自然语言指令自动生成高质量的Next.js代码，并提供即时预览与一键部署至Vercel的功能，支持Tailwind CSS和shadcn\u002Fui来创建美观的用户界面。此外，Claudable还集成了版本控制和持续部署设置，以及免费的Supabase数据库连接选项。该工具非常适合需要快速原型设计、开发并上线Web应用的场景，尤其适合那些希望减少前期配置工作量而专注于创意实现的小团队或个人开发者使用。",2,"2026-06-11 03:46:55","high_star"]