Bolt.new：全栈应用生成

为什么需要 Bolt.new：把「搭环境 + 写代码 + 跑通验证」合并成一次对话

传统全栈开发的前置成本在环境：要安装 Node.js 与包管理器、初始化脚手架、解决依赖冲突、配置代理与构建链，然后才轮到业务代码。AI 编程助手能快速生成大量代码文件，但生成完仍要回到本机环境里执行安装、起服务、调 bug——「环境税」没有被真正消除，对原型验证场景尤其拖慢节奏。

Bolt.new 用 WebContainers 把「生成代码 → npm install → 启动 dev server → 实时预览」整个闭环放进浏览器。用户只需要描述需求，它直接产出可运行的应用；发现效果不对，继续用对话修改，或在预览区选中具体元素做定向调整。部署同样内置：授权后一键推送到 Netlify、Vercel、Cloudflare Pages 等平台。

与同类工具的气质差异在于：v0 聚焦 UI 组件/页面生成，Lovable 强调应用加托管数据库的 MVP 闭环，Replit Agent 在云端容器里改代码；而 Bolt.new 的独特之处是「生成与运行在同一环境」——代码、依赖与运行状态都是浏览器内真实可验证的，且开源版本允许用自己账户的模型 API 甚至本地模型做私有化部署。

安装与环境配置：托管版零安装，自托管 3 步就绪

Bolt.new 有两条使用路线。托管版无需安装，浏览器打开即用，适合个人和原型验证；自托管版适合需要接入自有模型 Key、数据不出内网或要二次开发的团队。下面是「托管版 → 自托管 → 验证」的完整步骤。

步骤一（托管版）：打开 https://bolt.new，使用 GitHub 账号登录（未登录只能看演示）。登录后账号会获得免费额度，额度用完后可在账户页选择付费订阅扩展。

步骤二（自托管）：克隆社区维护的 bolt.diy 仓库——它是基于 bolt.new 开源代码维护的分支，核心价值是支持自由配置模型供应商。需要 Node.js 20 及以上版本。安装依赖并启动开发服务：

步骤三（配置与验证）：启动后打开 http://localhost:5173，进入 Settings → Providers，选择模型供应商（Anthropic、OpenAI、Google Gemini、xAI，或任意 OpenAI 兼容接口、本地 Ollama），填入 API Key / Base URL 后保存。然后任意输入一个需求（如「生成一个带本地存储的待办事项应用」），确认能生成代码、能安装依赖并出现可交互预览，即说明环境就绪。生产环境部署可用仓库提供的 Docker 方式（docker compose up -d），把模型 Key 放进服务端环境变量，避免写入前端代码。

# 托管版：无需安装，浏览器访问 https://bolt.new 并用 GitHub 登录 # 自托管（bolt.diy 社区版，支持自带模型 Key）git clone https://github.com/stackblitz-labs/bolt.diy.gitcd bolt.diynpm installnpm run dev

快速上手：5 分钟从需求到可部署应用

托管版没有任何代码门槛，全程在浏览器里用自然语言完成，最小可用流程如下：

1. 打开 https://bolt.new → GitHub 登录 → 在首页的「新项目」入口新建项目。

2. 在聊天输入框描述需求，建议一次说清三件事：核心功能、技术栈约束（如「React + Tailwind」）、数据形态（是否要登录、是否接数据库）。

3. 提交后等待生成。预览区会实时反映「安装依赖 → 编译 → 页面渲染」的进度；项目文件树可随时查看和展开生成的代码。

4. 用对话继续迭代：例如「把列表改成卡片式布局」「增加深色模式」「给删除操作加二次确认」。想在预览区选中某个元素再输入修改描述时，修改会精确落到对应的代码文件。

5. 满意后点击 Deploy（部署）入口，按引导授权 Netlify / Vercel / Cloudflare 等平台，项目会被推送到目标平台并给出线上地址。

结果：你得到的不只是代码，而是一个已经跑通并拥有公网地址的完整应用。进阶技巧：把技术栈约束写进 prompt（如「使用 React Router + Zustand」）会让生成结果更可控；复杂项目建议先生成骨架，再逐模块迭代，一次 prompt 塞入过多需求容易触发输出截断，导致半成品。

核心能力详解：4 大支柱

支柱一：WebContainers 浏览器运行时。传统 Node.js 程序在本地机器运行；WebContainers 通过 WebAssembly 把 Node.js 搬进浏览器，npm install、文件读写、dev server、构建全部发生在浏览器内的虚拟环境中。这让「生成的代码」立刻变成「能运行的程序」，模型的每一次修改都能被实时验证，而不是等回到本地复现时才发现环境不一致。

支柱二：多模型驱动与开源可自接。托管版内置多个模型（如 Claude、Gemini）供切换；开源版（推荐 bolt.diy）可以接 Anthropic、OpenAI、Google Gemini、xAI 等云端 API，或任何 OpenAI 兼容接口，也可以接本地 Ollama 模型。推理层与代码生成层解耦，企业可以做到敏感代码不出内网。

支柱三：对话式迭代与元素级定向修改。Bolt.new 的迭代是「增量修改」而非「重新生成」：上下文里保留项目文件与对话历史，新需求只改动相关文件。在预览区选中元素后输入修改指令，可把「把导航栏移到页面顶部」这类模糊指令解析成对具体组件的代码变更，减少无效重写。

支柱四：一键部署与外部生态集成。生成的应用可一键推送到 Netlify、Vercel、Cloudflare Pages、Render、Railway 等平台；结合第三方托管数据库/认证服务可补全登录、存储等后端能力。开源部署版支持 Docker 化，便于纳入企业现有 CI/CD 体系。

生产部署与监控：从上线到运维

部署方式一（托管版快速发布）：在 bolt.new 内完成迭代后，通过 Deploy 面板授权 Netlify/Vercel/Cloudflare 即可推送，之后每次迭代再点击部署即完成更新，适合个人项目与高速验证。注意：托管版生成的代码运行在浏览器内，若团队需要可审计的交付物，记得用「下载代码」或「Push 到 GitHub」等入口导出源码纳入版本管理。

部署方式二（自托管生产）：把 bolt.diy 以 Docker 部署在公司服务器或云主机，模型 Key 通过环境变量注入，前端只通过服务端代理访问模型 API。WebContainers 实际跑在用户浏览器里，服务端只承担静态资源、模型代理与反向代理，扩缩容压力小；接入内部 SSO 和日志采集后，可作为团队内部的 AI 开发平台。

可观测性：应用侧监控不依赖 Bolt——部署到 Vercel/Netlify 后用平台自带 Analytics，代码里接 Sentry 做错误监控；自托管时用 Docker 日志加云厂商监控。对话侧的额度与 token 消耗：托管版在账户页可查用量明细；自托管版若要统计每个用户/项目的模型调用量，需要在模型代理层（如 OpenRouter 或自建网关）记录请求日志。

<p class="para-label">避坑清单：</p>

<ul class="dash-list"><li>免费额度有限：托管版登录后额度按账号发放，长对话和复杂项目消耗很快；团队高频使用应直接评估付费套餐或自托管，避免开发到一半被限额打断。</li><li>WebContainers 只跑 Node.js 生态：Python、Go、Ruby 等原生运行时无法在浏览器内执行；需求里有这类后端时，把对应逻辑拆到外部 API 或独立服务，再从前端调用。</li><li>API Key 别直接放前端：bolt.diy 的 Provider Key 默认存于浏览器 localStorage，共享电脑或浏览器插件注入都可能造成泄露；多人团队生产环境务必用服务端代理统一管理 Key。</li><li>生成代码不是免检品：模型输出的依赖版本、环境变量引用与权限配置需要人工审查，重点检查密钥是否被前端代码硬编码，以及 package.json 中是否存在可疑依赖。</li></ul>

AI 应用场景

常见误区

面试题

参考来源

• webpagebolt.new 官网产品入口，免费额度使用与付费升级
• webpagestackblitz/bolt.new（GitHub）官方开源仓库（MIT 协议）
• webpagestackblitz-labs/bolt.diy（GitHub）社区维护版，支持自带模型 Key 自托管