Bolt.new 是什么

Bolt.new 是 StackBlitz 在 2024 年推出的一款 AI 全栈 Web 开发平台,定位很直接:把过去需要本地装 Node、装包、起服务、买服务器这一整条链路,全部塞进浏览器里。你打开 bolt.new,登录后就能在一个完整的开发环境里写 Prompt、生成代码、跑 Node 服务、装 npm 包,最后直接部署上线。

它和 ChatGPT、Claude 这种聊天式 AI 编程工具有本质区别:后者只能吐出代码片段,复制出来还要你自己新建项目、装依赖、排错;Bolt.new 把”产出可运行的应用”作为终点。

Bolt.new 主界面,左侧是 AI 对话栏,右侧是代码编辑器与实时预览-1
📷 appshunter.io / Unsplash License / 来源

核心技术:WebContainers

Bolt.new 背后真正的关键不是哪个大模型,而是 StackBlitz 自家的 WebContainers。这是一个跑在浏览器里的微型 Node.js 运行时,整个堆栈用 WebAssembly 在你的浏览器标签页里模拟出文件系统、包管理器、Node 服务器、甚至终端。

这意味着:

  • 你点开 Bolt.new,不需要本地装 Node、不需要 VS Code、不需要终端
  • npm installnpm run dev 之类的命令是真的在执行,不是模拟
  • 可以跑 Next.js、Vite、Astro、Express 这类需要 Node 运行时的框架
  • 可以调用第三方 API,因为服务真实在跑

WebContainers 是 Bolt.new 能在浏览器里做”全栈”这件事的物理基础。没有它,AI 最多只能给你写前端静态页。

AI 拿到的”权限”到底有多高

传统 AI 编程助手(无论是 Copilot 还是 ChatGPT)都有一个边界:AI 只生成代码文本,运行环境由人类控制。所以 AI 看不到自己写的代码有没有报错、服务器起没起来。

Bolt.new 的差异点在环境控制权:AI 模型直接拿到文件系统的写权限、Node 服务器的控制权、包管理器的执行权、终端命令的运行权、浏览器控制台的读取权。这相当于把”开发者”这个角色的能力完全授权给了 AI。

带来的实际能力差异:

能力 传统 AI 编程助手 Bolt.new
写代码
自动装依赖 ❌ 提示手动 npm install ✅ AI 直接执行
起本地服务验证 ❌ 用户自己 npm run dev ✅ AI 启动并读取日志
根据报错自动修 ❌ 把报错贴回对话框 ✅ 直接读 console 调整
一键部署 ✅ 从对话里点 Deploy
分享给他人 ❌ 只能给代码 ✅ 给一个 URL
AI 在对话中修改 package.json 后自动重启 dev server 的流程示意-2
📷 Ilija Boshkov / Unsplash License / 来源

实际能跑什么框架

按官方 README 和 WebContainers 的能力范围,Bolt.new 支持绝大多数主流 JavaScript 生态项目:

  • 构建工具:Vite、Webpack、Parcel
  • 前端框架:Next.js、React、Vue、Svelte、Astro、SvelteKit、Remix
  • UI 库:Tailwind CSS、ShadCN、Radix UI、Material UI
  • 后端:Express、Koa、Fastify、Hono
  • 数据库客户端:Prisma、Drizzle(注意浏览器内运行意味着数据库连接的目标必须是公网可访问的服务)

一个判断标准是:只要这个项目能在 StackBlitz 普通项目里跑起来,就能在 Bolt.new 里跑。

怎么开始用 Bolt.new

Bolt.new 本身是 SaaS,没有”安装”步骤。第一步就是打开浏览器:

  1. 访问 bolt.new
  2. 用 GitHub 账号登录
  3. 在对话框里写下你想做的应用,例如”做一个 Todo 应用,前端用 React + Tailwind,数据存 localStorage”
  4. AI 会自动创建项目脚手架、装依赖、起 dev server
  5. 右侧预览面板会实时显示效果
  6. 不满意直接在对话里说”把按钮改成蓝色、加个删除功能”,AI 会改文件并刷新

提示词写得越具体,效果越好。官方在 README 里列了几条经验:

  • 明确指定技术栈:直接写”用 Next.js 14 App Router + Tailwind + Prisma + SQLite”,不要让 AI 猜
  • 先用 enhance 图标让 AI 优化你的 prompt,再发出去
  • 先搭骨架再加功能:让 AI 先把路由、数据流、组件结构定下来,再迭代具体页面
  • 批量发指令:把”改色、加移动端适配、重启服务”合并成一条消息,省 API 额度
在 Bolt.new 对话框中点击 enhance 图标优化 prompt 的界面-3
📷 appshunter.io / Unsplash License / 来源

想自己部署?bolt.diy 开源方案

如果不想受限于 Bolt.new 的官方配额,或者想换底层 LLM(OpenAI、Anthropic、自托管模型都可以接),可以看官方推出的开源版本 bolt.diy(仓库地址:github.com/stackblitz-labs/bolt.diy)。它的界面和 Bolt.new 几乎一致,区别在于:

  • 完全自托管,数据走你自己的服务器
  • 可以接任意兼容 OpenAI API 格式的 LLM
  • 没有官方 token 配额限制,唯一的限制是你买的 API 额度

bolt.diy 的部署方式以 Docker 为主,仓库根目录提供了 docker-compose.yml。由于这个项目迭代很快、配置项较多(涉及 LLM provider 选择、API key、端口映射等),本文不直接贴出具体 compose 内容以免过时,建议以仓库 README 和 docker-compose.yml 注释为准。基本的部署路径是:

  1. 克隆仓库:git clone https://github.com/stackblitz-labs/bolt.diy.git
  2. 进入目录后按照 README 的 Docker 段落执行 docker compose up -d
  3. 按提示配置 .env 里的 LLM provider 和 API key
  4. 浏览器访问本地端口(具体端口以仓库 compose 文件中映射为准)
  5. 启动后界面与 bolt.new 一致,可以直接对话开发

如果你的目标是纯本地、纯离线开发,bolt.diy + Ollama 本地模型也是一种可行组合,但 Ollama 的接入方式请参考 bolt.diy 仓库最新的文档说明。

{{图:bolt.diy 部署完成后浏览器访问的对话界面}}

Bolt.new vs v0 vs Cursor

这三个工具常被放在一起比较,但定位其实不一样:

维度 Bolt.new v0(Vercel) Cursor
运行位置 浏览器内(WebContainers) 浏览器 本地 IDE
全栈能力 ✅ 可跑后端 ❌ 主要生成前端组件 ✅ 完整本地环境
AI 自主程度 高,可直接改文件、装包、起服务 中,生成代码片段 中,辅助编辑
部署能力 ✅ 内置 ✅ 一键部署到 Vercel ❌ 需手动部署
最适合 快速搭可运行的全栈原型 生成 UI 组件草图 已有项目精细化重构

简单说:v0 适合做 UI 草图,Cursor 适合深度编辑已有代码,Bolt.new 适合从零到一个能跑的全栈应用。

价格与配额

Bolt.new 采用免费 + 付费订阅的模式,按官方 README 描述:

  • 免费档:注册即用,配有每日 AI token 额度,到达上限后当日 AI 对话暂停
  • 付费档:在 bolt.new 左下角 Settings 里订阅,付费可获得更多 token、私有项目等能力

具体配额数字和订阅价格会动态调整,下单前请以官网 Settings 页面显示为准

谁适合用 Bolt.new

根据实际使用体验,Bolt.new 最适合这几类人:

  • 产品经理 / 设计师:想快速验证一个想法能不能跑通,不愿意折腾环境
  • 独立开发者:从 0 到 1 搭 MVP,能省下大量初始化工作
  • 教学 / Demo 场景:分享一个 URL,对方就能看到跑起来的效果
  • 没有本地环境的设备:比如在 Chromebook、平板上临时做开发

反过来,如果你的项目需要复杂的本地工具链(特定 Node 版本、原生模块、特殊 GPU 环境),或者代码量已经大到需要精细重构,Bolt.new 不一定是最佳选择——这时候 Cursor 这类本地 IDE 更合适。

相关阅读

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。