零代码编程体验之bolt.new和bolt.diy+DeepSeek Coder

一、bolt.new和bolt.diy

Bolt is an in-browser AI web development agent for full stack web application development. It provides a chat-based environment where you prompt an agent to make code changes. These changes are implemented in realtime in the development environment.【Bolt 是一款基于浏览器的 AI 全栈 Web 应用开发助手。它提供了一个聊天式交互环境,用户只需向 AI 智能体(agent)下达指令,即可实时在开发环境中生成或修改代码。】
Bolt.new 是bolt提供的一个商业版本,它允许用户在浏览器中直接运行完整的 Node.js 环境,并通过自然语言提示快速生成、运行、编辑和部署全栈 Web 应用程序,从而大幅简化开发流程。除了收费外,它还只能使用官方默认的大语言模型(LLM),而且一键部署也是只能部署到netlify。而bolt.diy是其开源版本,继承了 Bolt.New 的核心功能,但是允许社区根据用户需求进行功能扩展,还可以选择使用如下的任意模型:
  • AmazonBedrock
  • Anthropic
  • Cohere
  • Deepseek
  • Github
  • Google
  • Groq
  • HuggingFace
  • Hyperbolic
  • Mistral
  • OpenAI
  • OpenRouter
  • Perplexity
  • Together
  • xAI

二、bolt.new零代码编程体验

直接告诉它你想创建什么样的 web应用:
在这里插入图片描述
可以看出它还帮你列出了很多的核心功能和设计元素等建议。这里我们不做更改,实际应用中你可以根据自己的需要进行多轮沟通,或者自己列出详细需求给它。
在这里插入图片描述
接下来它直接按照上述所列的功能和设计要求直接创建工程并生成相关代码,还可以执行命令启动程序。完成后可以直接看到生成的效果,看起来相当不错:
在这里插入图片描述
这里面有个很明显的问题就是有个锁屏的图标,移过去后界面还整体闪烁,尝试让它自行修复下,结果:
在这里插入图片描述
免费的一天只有150K token,而一个月免费额为1M token:
在这里插入图片描述

三、bolt.diy零代码编程体验

bolt.diy的仓库地址为:https://github.com/stackblitz-labs/bolt.diy.git,简单说它本身也是一个web应用。运行也很简单:

pnpm install
pnpm run dev

在这里插入图片描述
运行后需要设置选定的大模型的API KEY,这里我们用Deepseek-Coder:
在这里插入图片描述
接下来就让它这个web应用程序来生成其它web应用:
在这里插入图片描述
在这里插入图片描述
看似免费的东西不太好用的样子,运行结果报错了。让它自己修复一下,直接把错误信息丢给它:
在这里插入图片描述
这修复能力还不错。最终的结果页面看起来比较简陋,但所有菜单和按钮都有交互实现,不过除了Home外,其它页面都为空。让它补上:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、体验总结

1、免费的确实比收费的效果要差很多,原因应该不在于bolt.new和bolt.diy工具之间,而是大模型。
目前 Bolt.new 使用的具体大模型并未在公开文档中明确说明,但根据其产品定位(AI 全栈 Web 开发助手)和功能特点(实时代码生成、自然语言交互),可以推测它可能基于以下主流大模型之一或组合:【来自deepseek】

可能的模型选择
1) OpenAI GPT 系列

如 GPT-4 或 GPT-4-turbo:擅长代码生成(尤其是 JavaScript/全栈开发),支持长上下文理解,适合通过聊天交互实现复杂需求。

2) Anthropic Claude

如 Claude 3:在代码生成和逻辑推理方面表现优秀,可能用于需要高准确性的开发场景。

3) 开源模型

Meta CodeLlama:专为代码生成的 Llama 2 变体,适合本地化或隐私要求高的场景。

DeepSeek Coder:专注于代码生成的模型,支持多语言和长上下文。

4) 自研微调模型

Bolt 可能基于开源模型(如 Llama 3)进行微调,针对 Web 开发任务优化,例如对前端框架(React、Vue)、后端(Node.js)或部署流程的专项训练。

从我们自己使用的DeepSeek Coder结果来说,直接使用开源模型的可能性不高。而从之前体验Cursor的情况来看,使用GPT4或者Claude3这类商业模型的可能性较大。至于如果是自研微调模型也是有可能的,毕竟StackBlitz一直在做基于浏览器的web开发工具,这代码方面的积累很多。
2、简单的几轮交流下来,总共花了7万多的token,deepseek上换了0.16RMB,如果全程基于这种商业大模型来开发,其耗费也是相当大的。后续可以修改bolt.diy源码中的模型选项,改用本地部署运行的模型(当然,你本机得有GPU,且足够大才行)。
在这里插入图片描述
3、直接从一两句话来生成整个应用,这种效果来说肯定很难应用到商业场景,不过,用于快速构建应用原型应该还是不错的。后续还是需要探究从设计稿到代码的方案才行,不是前面《零代码编程体验之Cursor+Claude-3.5-sonnet Ⅱ从设计稿到前端代码》提到的方案,而是从figma到代码,这点bolt.new和trae都有相关的方案。

### 类似于 Bolt.new 的产品服务 #### 1. **StackBlitz** StackBlitz 是一个基于浏览器的集成开发环境 (IDE),支持实时协作即时预览。它允许开发者创建、编辑运行 JavaScript、TypeScript Angular 应用程序,而无需安装任何本地软件[^5]。 尽管 StackBlitz 更专注于代码编写,但它也提供了类似的沙盒功能,使用户能够快速构建并测试应用。 #### 2. **Glitch** Glitch 提供了一个简单易用的平台,用于创建 Web 应用程序。它的界面友好,适合初学者非技术人员使用。用户可以通过拖放组件或直接输入少量代码来完成项目开发[^6]。此外,Glitch 还内置了自动部署机制,简化了发布流程。 #### 3. **Bubble** Bubble 是一款无代码开发工具,专为希望构建复杂 Web 应用的人群设计。其核心理念是让用户通过可视化界面搭建完整的应用程序,而不需要写一行代码[^7]。这与 Bolt.new 的目标非常相似——让任何人都能轻松制作功能性应用。 #### 4. **Adalo** Adalo 面向移动应用开发领域,提供了一套直观的设计工具,帮助用户在不接触底层代码的情况下打造 iOS Android 原生应用[^8]。对于那些寻求移动端解决方案的人来说,这是一个不错的选择。 #### 5. **Lama Coder & Claude Artifacts** 虽然这些工具主要围绕 AI 自动生成代码展开工作,但它们同样具备一定的沙盒能力,允许用户查看生成的结果并与之互动[^9]。如果对智能化辅助感兴趣,则可以考虑尝试此类服务。 以下是部分实现逻辑示例: ```javascript // 使用 Glitch 创建基本 Express.js 服务器实例 const express = require('express'); const app = express(); app.get('/', function(req, res){ res.send('Hello from a similar platform to Bolt.new!'); }); app.listen(3000); console.log("Server running at http://localhost:3000/"); ``` --- ### 技术对比总结表 | 工具名称 | 主要特点 | 是否需要编程技能 | |----------------|-----------------------------------------------------------------------------------------------|--------------------------| | StackBlitz | 浏览器内的 IDE;支持多种框架 | 是 | | Glitch | 友好的 UI 设计;强调社区共享 | 否(可选) | | Bubble | 完全可视化的网页构建 | 否 | | Adalo | 移动端专属无代码方案 | 否 | | Lama Coder/Claude Artifacts | 结合人工智能技术自动生成代码片段 | 不完全依赖 | 以上列举了几款可能满足需求的产品及其特性描述。每种工具有各自的优势所在,在选择时应结合具体应用场景个人偏好做出决定。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值