[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"pack-detail-ai-app-builders-zh":3,"seo:pack:ai-app-builders:zh":74},{"code":4,"message":5,"data":6},200,"操作成功",{"pack":7},{"slug":8,"icon":9,"tone":10,"status":11,"status_label":12,"title":13,"description":14,"items":15,"install_cmd":73},"ai-app-builders","🏗","#A21CAF","stable","稳定","AI 应用生成器","bolt.diy \u002F Bolt.new \u002F Webstudio \u002F Budibase \u002F ToolJet \u002F Onlook \u002F Sandpack — 浏览器里生成全栈应用 + 实时改 React。",[16,28,38,45,52,59,66],{"id":17,"uuid":18,"slug":19,"title":20,"description":21,"author_name":22,"view_count":23,"vote_count":24,"lang_type":25,"type":26,"type_label":27},435,"b45a4842-0a5e-413f-9651-3c294157f4da","bolt-diy-ai-full-stack-app-builder-any-llm-b45a4842","bolt.diy — AI Full-Stack App Builder, Any LLM","Community fork of Bolt.new. Prompt, edit, and deploy full-stack web apps with any LLM provider. 19K+ GitHub stars.","Script Depot",357,0,"en","script","Script",{"id":29,"uuid":30,"slug":31,"title":32,"description":33,"author_name":34,"view_count":35,"vote_count":24,"lang_type":25,"type":36,"type_label":37},225,"ba69689a-ab30-4274-b6bf-1ed4a87a151b","bolt-new-ai-full-stack-web-app-generator-ba69689a","Bolt.new — AI Full-Stack Web App Generator","Prompt, run, edit, and deploy full-stack web apps in the browser. AI generates code, installs packages, runs dev server, and deploys — all from a chat interface. 16K+ stars.","AI Open Source",294,"skill","Skill",{"id":39,"uuid":40,"slug":41,"title":42,"description":43,"author_name":34,"view_count":44,"vote_count":24,"lang_type":25,"type":36,"type_label":37},882,"55aaef45-349d-11f1-9bc6-00163e2b0d79","webstudio-open-source-visual-website-builder-55aaef45","Webstudio — Open Source Visual Website Builder","Webstudio is an open-source Webflow alternative with a visual drag-and-drop editor, full CSS support, headless CMS integration, and self-hosting on Cloudflare.",382,{"id":46,"uuid":47,"slug":48,"title":49,"description":50,"author_name":22,"view_count":51,"vote_count":24,"lang_type":25,"type":36,"type_label":37},919,"ed9cefd6-34ae-11f1-9bc6-00163e2b0d79","budibase-open-source-low-code-app-builder-ed9cefd6","Budibase — Open Source Low-Code App Builder","Budibase is an open-source low-code platform for building internal tools, admin panels, dashboards, and workflow apps in minutes. Connect any database and deploy instantly.",299,{"id":53,"uuid":54,"slug":55,"title":56,"description":57,"author_name":22,"view_count":58,"vote_count":24,"lang_type":25,"type":36,"type_label":37},1185,"eac97f87-371c-11f1-9bc6-00163e2b0d79","tooljet-open-source-low-code-platform-business-apps-eac97f87","ToolJet — Open Source Low-Code Platform for Business Apps","ToolJet is an open-source low-code platform for building internal tools, dashboards, and business applications. It provides a visual app builder, workflow automation, AI integration, and connects to 30+ data sources out of the box.",279,{"id":60,"uuid":61,"slug":62,"title":63,"description":64,"author_name":34,"view_count":65,"vote_count":24,"lang_type":25,"type":36,"type_label":37},867,"0d4f9803-33e3-11f1-9bc6-00163e2b0d79","onlook-visual-ai-code-editor-react-apps-0d4f9803","Onlook — Visual AI Code Editor for React Apps","Open-source Figma-like visual editor for building React and Next.js apps with AI. Edit visually and code syncs in real-time. Design branching, team collab, deploy. Apache-2.0, 25,000+ stars.",318,{"id":67,"uuid":68,"slug":69,"title":70,"description":71,"author_name":22,"view_count":72,"vote_count":24,"lang_type":25,"type":36,"type_label":37},824,"847af291-82ed-41ac-9bec-1719afd4d3b0","sandpack-ai-powered-live-code-editor-component-847af291","Sandpack — AI-Powered Live Code Editor Component","Embed live code editors in web apps with instant preview. Sandpack by CodeSandbox powers interactive coding experiences for AI chatbots, docs, and educational platforms.",297,"tokrepo install pack\u002Fai-app-builders",{"pageType":75,"pageKey":8,"locale":76,"title":77,"metaDescription":78,"h1":13,"tldr":79,"bodyMarkdown":80,"faq":81,"schema":97,"internalLinks":107,"citations":120,"wordCount":133,"generatedAt":134},"pack","zh","AI 应用生成器：7 个全栈应用 & React 工具","bolt.diy \u002F Bolt.new \u002F Webstudio \u002F Budibase \u002F ToolJet \u002F Onlook \u002F Sandpack — 浏览器里生成全栈应用 + 实时改 React。TokRepo 一条命令装齐。","七个 AI 生成器，从 prompt 到能跑的应用只要几分钟 —— Bolt 做新建 SaaS，Webstudio 做设计优先 React，Budibase 和 ToolJet 做内部工具，Onlook 做实时设计 React，Sandpack 做嵌入式沙盒。","## 这个 pack 装了什么\n\n| # | 生成器 | 最适合 | 产出 |\n|---|---|---|---|\n| 1 | bolt.diy | 自托管的 Bolt 风格生成器 | WebContainer 里的全栈应用 |\n| 2 | Bolt.new | 托管 prompt-to-SaaS | 全栈应用 + 部署到 Netlify |\n| 3 | Webstudio | 视觉化构建器，设计工具人体工学 | 干净的 React + CSS |\n| 4 | Budibase | 自托管的内部工具 | 低代码应用 + Postgres |\n| 5 | ToolJet | 内部工具，更多拖拽 | 低代码应用 + 连接器 |\n| 6 | Onlook | 「代码版 Figma」，浏览器实时改 React | 改你现有 React 仓库的 diff |\n| 7 | Sandpack | CodeSandbox 出的可嵌入沙盒 | 任何页面里能跑的 React |\n\n七个工具覆盖全光谱，从「打一句话给 SaaS」到「让设计师对我真实 React 代码库做视觉控制」。它们不可互换 —— 每个押的赌注不同：谁来干活、生成什么。\n\n## 为什么要看\n\n「AI 帮你建应用」品类 2025 年从噱头变成真工作流，三个原因：\n\n1. **WebContainers**：StackBlitz 浏览器内 Node 运行时让完整 npm install + 开发服务器在标签页里 5 秒启动，不再「等我们 provision 个沙盒」\n2. **前沿模型编码能力**：Claude Sonnet 3.7 和 GPT-5 终于能写出真的能编译能跑的 React，不是「修三次差不多能用」\n3. **真代码库实时编辑**：Onlook 是突破 —— 设计师在浏览器拖元素，直接给你现有仓库出干净 diff。不用再「Figma 重设计 → 工程师重实现」\n\n结果：从 prompt 建一个 CRUD 应用现在 15 分钟连同 auth、部署、真数据库都搞定。瓶颈从写代码转移到产品思考。\n\n## 一条命令装齐\n\n```bash\n# 装整个 pack\ntokrepo install pack\u002Fai-app-builders\n\n# 或者按场景挑\ntokrepo install bolt-diy\ntokrepo install webstudio\ntokrepo install onlook\n```\n\n每个资产的 TokRepo 页面都列了托管 vs 自托管选项、典型每次生成 token 成本，以及支持的部署目标（Netlify \u002F Vercel \u002F Cloudflare Pages \u002F Docker）。\n\n## 常见坑\n\n- **WebContainer != Node**：bolt.diy 和 Bolt.new 在 WebContainer 里跑，是个 Node 兼容 WASM 运行时。带原生绑定的 npm 包跑不了。下手前确认你的栈支持\n- **生成代码偏离**：AI 生成的 React 经常用偏离规范的模式（hook 没正确 memo、客户端\u002F服务端边界 bug）。把生成当起点，不是成品\n- **内部工具 vs 应用**：Budibase 和 ToolJet 是*内部工具*生成器 —— 假设是认证的员工用户。不要直接当面向客户的 SaaS 上，得重做 auth、品牌、边缘情况\n- **Onlook 要真仓库**：它改*你的* React，不是沙盒。要本地起一个 agent 进程。当成设计师装一次的工具，不是按任务起的\n- **Bolt.new 的 token 花销**：全应用生成一轮可能烧 10 万+ token。托管版有用量上限；自托管 bolt.diy 用自己的 Anthropic key 没上限但直接付账\n\n## 这个 pack 单跑不够\n\n这个 pack 生成*前端*。要跑出真产品还需要：\n\n- **后端或 CMS**：看 **AI 友好 Headless CMS** —— Strapi \u002F Directus \u002F Hasura，给生成的应用接结构化数据\n- **数据库**：bolt.diy 的 WebContainer 演示用 SQLite 或内存；生产要 Postgres \u002F Supabase \u002F Neon\n- **Auth**：Bolt.new 自动接 Auth0 或 Supabase Auth；自托管要自己显式规划\n- **部署流水线**：Netlify 或 Cloudflare Pages 选一个坚持\n\n要 docs 站、营销页、产品博客根本不用这个 pack —— 看 **静态站 & 文档生成器**。应用生成器解的是不同形状的问题。\n\n## 常见误解\n\n「我这周末生成个 SaaS」。可能 —— 但生成的代码只是 70% 的工作。Auth 流程、支付集成、多租户、错误状态、移动响应边界、GDPR 同意、无障碍、可观测，AI 生成器全跳过或做得差。剩下那 30% 才是产品死活的地方。",[82,85,88,91,94],{"q":83,"a":84},"这些工具免费吗？","bolt.diy \u002F Webstudio（社区版）\u002F Budibase（社区版）\u002F ToolJet \u002F Onlook（有限制）\u002F Sandpack 都开源可自托管免费。Bolt.new 托管版有免费层，付费方案约 $20\u002F月起。隐藏成本是 LLM token 花销 —— 生成一个完整应用一轮可能烧 $1-3，真项目会迭代 5-20 次。",{"q":86,"a":87},"Bolt.new 还是 bolt.diy？","想要打磨好的托管体验、能接受它的定价、不在乎模型选择，选 bolt.new。要自托管、BYOK（Anthropic \u002F OpenAI \u002F 本地 Ollama）、能 fork 生成器本身，选 bolt.diy。输出类似；区别是谁运维基础设施、谁付 LLM 账。",{"q":89,"a":90},"能搭 Cursor \u002F Codex CLI 用吗？","多数是独立 Web 应用而不是 CLI —— 浏览器访问、生成、下载或部署。Onlook 是例外：它配合你本地 React 项目，你视觉编辑同时 Cursor 或 Codex CLI 处理别的。Sandpack 可嵌入，可以塞进 Cursor 扩展或文档站。",{"q":92,"a":93},"跟静态站 & 文档生成器有啥区别？","应用生成器生成动态全栈应用，带状态、auth、数据库。静态站生成器生成预渲染的营销\u002F文档站，没后端。产品有用户账号就用本 pack；要发博客或落地页用静态站 pack。",{"q":95,"a":96},"运维上最大的坑？","低估生产化的尾巴。AI 生成器一小时把你带到能跑的 demo。把那个 demo 卖给付费客户要加 auth、支付、错误处理、监控、无障碍、移动测试、GDPR、某些市场 SOC 2 —— 通常额外 4-12 周。规划好；别当那个第三天就把 Bolt 原型当真产品上线的创始人。",{"@context":98,"@type":99,"name":100,"description":101,"numberOfItems":102,"publisher":103},"https:\u002F\u002Fschema.org","CollectionPage","AI App Builders","Seven generators that produce full-stack apps and live-edit React in the browser — bolt.diy, Bolt.new, Webstudio, Budibase, ToolJet, Onlook, Sandpack.",7,{"@type":104,"name":105,"url":106},"Organization","TokRepo","https:\u002F\u002Ftokrepo.com",[108,112,116],{"url":109,"anchor":110,"reason":111},"\u002Fzh\u002Fpacks\u002Fheadless-cms-for-ai","AI 友好 Headless CMS","生成完之后接的后端",{"url":113,"anchor":114,"reason":115},"\u002Fzh\u002Fpacks\u002Fstatic-site-docs","静态站 & 文档","不要全栈应用时的替代",{"url":117,"anchor":118,"reason":119},"\u002Fzh\u002Ftools\u002Fbolt-new","Bolt.new","本 pack 里最火的入口",[121,125,129],{"claim":122,"source_name":123,"source_url":124},"bolt.diy is the open-source community fork of Bolt.new for self-hosted in-browser app generation","stackblitz-labs\u002Fbolt.diy","https:\u002F\u002Fgithub.com\u002Fstackblitz-labs\u002Fbolt.diy",{"claim":126,"source_name":127,"source_url":128},"Webstudio is an open-source visual web builder that compiles to React","webstudio-is\u002Fwebstudio","https:\u002F\u002Fgithub.com\u002Fwebstudio-is\u002Fwebstudio",{"claim":130,"source_name":131,"source_url":132},"ToolJet is an open-source low-code platform for building internal tools","ToolJet\u002FToolJet","https:\u002F\u002Fgithub.com\u002FToolJet\u002FToolJet",517,"2026-05-02T15:00:00Z"]