[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"pack-detail-ai-app-builders-en":3,"seo:pack:ai-app-builders:en":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","Stable","AI App Builders","bolt.diy, Bolt.new, Webstudio, Budibase, ToolJet, Onlook, Sandpack — generate full-stack apps and live-edit React in the browser.",[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":25,"title":76,"metaDescription":77,"h1":13,"tldr":78,"bodyMarkdown":79,"faq":80,"schema":96,"internalLinks":105,"citations":118,"wordCount":131,"generatedAt":132},"pack","AI App Builders: 7 Generators for Full-Stack Apps & React","bolt.diy, Bolt.new, Webstudio, Budibase, ToolJet, Onlook, Sandpack — generate full-stack apps and live-edit React in the browser. Install with TokRepo.","Seven AI builders that go from prompt to running app in minutes — Bolt for greenfield SaaS, Webstudio for design-first React, Budibase and ToolJet for internal tools, Onlook for live-design React, Sandpack for embedded sandboxes.","## What's in this pack\n\n| # | Builder | Best for | Output |\n|---|---|---|---|\n| 1 | bolt.diy | self-hosted Bolt-style generator | full-stack app in WebContainer |\n| 2 | Bolt.new | hosted prompt-to-SaaS | full-stack app + deploy to Netlify |\n| 3 | Webstudio | visual builder, design-tool ergonomics | clean React + CSS |\n| 4 | Budibase | internal tools with self-host | low-code app + Postgres |\n| 5 | ToolJet | internal tools, more drag-drop | low-code app + connectors |\n| 6 | Onlook | \"Figma for code\", live-edit React in browser | edits to your existing React repo |\n| 7 | Sandpack | embeddable code sandbox by CodeSandbox | runnable React inside any page |\n\nThese seven cover the full spectrum from \"type a sentence, get a SaaS\" to \"give designers visual control over my real React codebase.\" They are not interchangeable — each makes a different bet on who is doing the work and what gets generated.\n\n## Why this matters\n\nThe \"AI builds your app\" category went from gimmick to real workflow in 2025. Three reasons:\n\n1. **WebContainers**: StackBlitz's in-browser Node runtime means a full npm install + dev server boots in 5 seconds inside a tab. No more \"wait while we provision a sandbox.\"\n2. **Frontier model coding ability**: Claude Sonnet 3.7 and GPT-5 finally write React that actually compiles and works first-try, not \"almost works after 3 fixes.\"\n3. **Live-edit on real codebases**: Onlook is the breakthrough — designers can drag elements in the browser and emit clean diffs against your existing repo. No more \"redesign in Figma → engineer reimplements.\"\n\nThe result: building a CRUD app from a prompt now takes 15 minutes including auth, deployment, and a real database. The bottleneck shifted from coding to product thinking.\n\n## Install in one command\n\n```bash\n# Install the whole pack\ntokrepo install pack\u002Fai-app-builders\n\n# Or pick the one that matches your situation\ntokrepo install bolt-diy\ntokrepo install webstudio\ntokrepo install onlook\n```\n\nEach TokRepo asset page lists hosted vs self-host options, the typical token cost per generation, and the deploy targets supported (Netlify, Vercel, Cloudflare Pages, Docker).\n\n## Common pitfalls\n\n- **WebContainer != Node**: bolt.diy and Bolt.new run apps in WebContainer, which is a Node-compatible WASM runtime. Some npm packages with native bindings don't work. Verify your stack before betting a project on it.\n- **Generated code drift**: AI-generated React often uses slightly off-spec patterns (improperly memoized hooks, accidental client\u002Fserver boundary bugs). Treat generation as a starting point, not a finished product.\n- **Internal tools vs apps**: Budibase and ToolJet are *internal tool* builders — they assume an authenticated employee user. Don't ship them as customer-facing SaaS without rethinking auth, branding, and edge cases.\n- **Onlook needs a real repo**: it edits *your* React, not a sandbox. Hooking it up requires running a local agent process. Treat it as a designer-installs-once tool, not a per-task spin-up.\n- **Token spend on Bolt.new**: full-app generations can burn 100k+ tokens per round. The hosted tier caps usage; self-hosting bolt.diy with your own Anthropic key avoids the cap but bills you direct.\n\n## When this pack alone isn't enough\n\nThis pack generates the *frontend*. To run a real product you also need:\n\n- **A backend or CMS**: see **Headless CMS for AI** for Strapi, Directus, Hasura — the structured-data layer to point your generated app at.\n- **A database**: bolt.diy's WebContainer demos use SQLite or in-memory; production needs Postgres \u002F Supabase \u002F Neon.\n- **Auth**: Bolt.new wires up Auth0 or Supabase Auth; if you self-host, plan it explicitly.\n- **A deploy pipeline**: pick Netlify or Cloudflare Pages and stick with one.\n\nFor docs sites, marketing pages, or product blogs, you don't need this pack at all — see **Static Site & Docs Builders** instead. App builders solve a different shape of problem.\n\n## Common misconceptions\n\n\"I'll generate a SaaS this weekend.\" Maybe — but the generated code is ~70% of the work. Auth flows, payment integration, multi-tenancy, error states, mobile responsive edge cases, GDPR consent, accessibility, and observability are all things AI builders skip or do poorly. The 30% that's left is where products live or die.",[81,84,87,90,93],{"q":82,"a":83},"Are these tools free?","bolt.diy, Webstudio (community), Budibase (community), ToolJet, Onlook (with limits), and Sandpack are open-source and free to self-host. Bolt.new is hosted with a free tier and paid plans starting around $20\u002Fmonth. The hidden cost on hosted is LLM token spend — generating a full app can burn $1-3 per round, and you'll iterate 5-20 times on a real project.",{"q":85,"a":86},"Bolt.new vs bolt.diy — which should I use?","bolt.new if you want a polished hosted experience, are comfortable with their pricing, and don't care about model choice. bolt.diy if you want self-host, BYOK (Anthropic, OpenAI, local Ollama), and the ability to fork the generator itself. The output is similar; the difference is who runs the infrastructure and pays the LLM bill.",{"q":88,"a":89},"Will this work with Cursor or Codex CLI?","Most of these are standalone web apps, not CLI tools — you visit them in the browser, generate, and download or deploy. Onlook is the exception: it pairs with your local React project and you edit visually while Cursor or Codex CLI handles other tasks. Sandpack is embeddable, so you can drop it into a Cursor extension or doc site.",{"q":91,"a":92},"How is this different from Static Site & Docs Builders?","App builders generate dynamic full-stack apps with state, auth, and a database. Static site builders generate prerendered marketing\u002Fdocs sites with no backend. If your product has user accounts, sign up here. If you're shipping a blog or landing page, use the static site pack instead.",{"q":94,"a":95},"What's the operational gotcha?","Underestimating the productionization tail. AI builders take you to a working demo in an hour. Getting that demo to a paying customer adds auth, payments, errors, monitoring, accessibility, mobile testing, GDPR, SOC 2 in some markets — typically 4-12 weeks of additional work. Plan for it; don't be the founder who ships a Bolt prototype as a real product on day three.",{"@context":97,"@type":98,"name":13,"description":99,"numberOfItems":100,"publisher":101},"https:\u002F\u002Fschema.org","CollectionPage","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":102,"name":103,"url":104},"Organization","TokRepo","https:\u002F\u002Ftokrepo.com",[106,110,114],{"url":107,"anchor":108,"reason":109},"\u002Fen\u002Fpacks\u002Fheadless-cms-for-ai","Headless CMS for AI","the backend you wire up after generation",{"url":111,"anchor":112,"reason":113},"\u002Fen\u002Fpacks\u002Fstatic-site-docs","Static Site & Docs","alternative when you don't need a full app",{"url":115,"anchor":116,"reason":117},"\u002Fen\u002Ftools\u002Fbolt-new","Bolt.new","the most viral entry in this pack",[119,123,127],{"claim":120,"source_name":121,"source_url":122},"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":124,"source_name":125,"source_url":126},"Webstudio is an open-source visual web builder that compiles to React","webstudio-is\u002Fwebstudio","https:\u002F\u002Fgithub.com\u002Fwebstudio-is\u002Fwebstudio",{"claim":128,"source_name":129,"source_url":130},"ToolJet is an open-source low-code platform for building internal tools","ToolJet\u002FToolJet","https:\u002F\u002Fgithub.com\u002FToolJet\u002FToolJet",699,"2026-05-02T15:00:00Z"]