释放Qwen3-Coder潜力：Bolt+AnalyticDB Supabase，打造生产力工具

抖音热门 2025年08月29日 19:27 1 admin

01、引言：如何释放Qwen3-Coder的潜能

7月22日, 阿里云通义千问Qwen团队重磅发布了其迄今为止“最具代理能力”的代码大模型——Qwen3-Coder。其旗舰版本 Qwen3-Coder-480B-A35B-Instruct 凭借惊人的4800亿总参数（350亿激活）的MoE架构、原生256K并可扩展至百万的超长上下文窗口，在自主编码（Agentic Coding）、浏览器使用及工具调用等关键能力上，刷新了开源模型的性能纪录，展现出与顶尖闭源模型 Claude Sonnet 4 相媲美的实力。

Qwen3-Coder的强大毋庸置疑，但如何将其潜力转化为生产力？许多用户仍停留在片段代码修复或单元测试生成的初级阶段，但Qwen3-Coder的能力远不止于此！依托其卓越的自主编码代理能力，“结合Bolt”，您将瞬间拥有多位专家级编程助手。同时，阿里云瑶池旗下的云原生数据仓库AnalyticDB PostgreSQL版重磅推出Supabase服务，结合AnalyticDB Supabase极简前后端技术栈，让您的Bolt开发体验从“玩具”跃升至“生产力工具”。

02、实战案例：5分钟构建仓储物流系统

我们通过一个实际案例，展示其强大效率：仅用5分钟，输入三条自然语言指令，即成功构建了一个功能完整的仓储物流管理系统前后端！

prompt1： “创建一个仓储物流的库存管理页面，包含库存状态、出入库记录、库位管理等功能，风格要实用清晰。”，此时Bolt会生成前端页面框架。

prompt2 ：“继续构建”，此时Bolt会自动连接至Supabase数据库，智能创建所需数据表结构。

prompt3： “继续构建”，此时Bolt会自动生成并写入Mock测试数据到数据库。

视频演示Demo如下：

https://cloud.video.taobao.com/vod/UaPf970OHo-Owo1Lt6_1Y_c3mUspSIbmKd0n2x-fQLo.mp4

这是完成后的应用展示截图：

释放Qwen3-Coder潜力：Bolt+AnalyticDB Supabase，打造生产力工具

这是被自动创建并写入数据的Supabase表截图：

03、使用方式

您可以选择自己部署Bolt，也可以在阿里云计算巢一键开通。

私域部署（免费）

Step1. 下载代码

git clone https://github.com/wangxuqi/bolt.diy.gitcd bolt.diycp .env.example .env

Step2. 设置环境变量，在.env中添加。您需要先获取阿里云accesskey&secret。以及通义API-KEY。你也可以使用自己部署的大模型。这里使用Qwen3-coder API。（注：API调用可能产生费用）。

-- 阿里云accesskey和secretALIBABA_CLOUD_ACCESS_KEY_ID=LTAI5txxxxxxxxALIBABA_CLOUD_ACCESS_KEY_SECRET=OQhoiSkAsxxxxxxxxxx-- 通义APIkeyTONGYI_API_KEY=sk-xxxxxx

Step3. 启动项目。随后访问 http://localhost:5173 即刻释放你的灵感。

npm install -g pnpmpnpm installpnpm run dev

Step4. 免费创建Supabase测试实例作为后端。

基于阿里云计算巢一键部署Bolt

点击阿里云登录 - 欢迎登录阿里云，安全稳定的云计算服务平台至浏览器即可一键开通，省去手动部署步骤。

04、方案优势

▶︎ 更友好的泛开发者体验

与各类AI IDE，比如Cursor、Cline等相比，基于bolt的Vibe Coding方式更适合非专业开发者。它能够实时编译执行。使用：生成代码 → 实时编译 → 浏览器预览 → 即时反馈的方式，让变更及时可见，用户甚至不需要知道如何编译，即可完成应用的开发。

其提供的交互式编码方式，和Agent主动引导逻辑，能够真正意义上实现自主编码，并且对于语言无法描述的需求，可以通过可视化的选取来完成，让描述更清晰。比如，对于现有模块的优化，我们可以通过选中页面上的模块，让模型修改。

▶︎ 开箱即用的后端集成

原生集成了AnalyticDB PostgreSQL版重磅推出的Supabase服务，开箱即用，并且模型会自动引导实现后端逻辑。如前文所述，我们仅仅Bolt“继续构建”，即完成了后端的配置和使用。哪怕是产生了错误，它也会自动修复。

创建后端项目流程如下：

在Bolt界面点击new project。
跳转至阿里云Supabase控制台创建项目（AnalyticDB Supabase免费提供两个测试实例）。
创建完成后，即可在Bolt界面看到并管理该Supabase实例。

▶︎ 灵活安全的模型定制

与此同时，为了解决安全诉求，对于私有化部署Qwen3-Coder的场景，也提供了OpenAILike的集成方式，只需要你部署的模型提供openai兼容的调用方式，即可完成模型集成和调用。

▶︎ 中文优化体验

原生版本Bolt在使用中文提示词进行构建时，往往会因为返回结构被破坏，导致整个Agent Flow无法正常地完成扭转，因此我们对一些关键的部分做了改造，让Bolt能够更流畅、更专业地响应中文提示词，完成编码任务。

▶︎ 便捷的代码导出与协作

你可以将生成的代码一键导出为文件，或者导出到Github，完成与其他Agent的联动。比如导出代码后，使用cursor进一步规划和完善应用。

▶︎ 一键部署上线

对于生成的代码，可以一键部署到Vercel、Netlify等主流代码托管平台，你的服务即可被他人访问。同时，我们也支持一键部署到阿里云函数计算Web函数。应用可以和Supabase部署在同一个VPC内，提供极速访问的同时，避免产生公网流量费用。

05、Bolt技术原理

Agent-Tool协同模式

Bolt这不是简单的React模式，而是更复杂的AI Agent工作流，它包含以下模块：

规划Agent (Planning)：分析用户需求；制定开发计划；确定技术栈。
执行Agent (Execution)：生成具体代码；创建文件结构；配置构建环境。
验证Agent (Validation)：检查代码语法；测试功能完整性；优化性能问题。
反馈Agent (Feedback)：收集用户反馈；迭代改进代码；修复报错问题。

通过以上模块的互相配合，在需要时调用tool，实现基于Agent的自动编码能力，以及整个项目的生命周期管理。Bolt支持以下action：

File: 用于文件的创建和修改，对于代码的改动部分主要由它完成。
Shell: 用于运行应用调试、下载安装包等行为，让整个工作流能够自动执行。
Supabase: 用于数据库的交互和SQL脚本的生成。
Start: 一个特殊的行为，用于整个应用启动，由于npm run dev是阻塞式运行的，如果使用Shell工具模式会导致应用阻塞，因此单独剥离出了一个Start Action。

精密设计的系统提示词

从一定程度上说，系统提示词是能够让大模型自主编码的核心部分。AI Agent的提示词包含多个关键部分：

▶︎ 角色赋予

通过使用system参数来赋予一个角色，从而显著提升其表现。Bolt的角色赋予提示词为：

你是Bolt, 一位专家级AI助手和杰出的高级软件开发者，具备多种编程语言、框架和最佳实践的广泛知识。

▶︎ 行为约束

通过约束，控制大模型可以选择的技术栈，执行的命令和代码处理方式，Bolt包含多种约束，来限制模型输出的行为。比如：

-- 约束语言和环境<system_constraints> You operate in WebContainer, an in-browser Node.js runtime that emulates a Linux system: ...</system_constraints><technology_preferences>  - Use Vite for web servers  ...</technology_preferences>-- 约束数据库使用方式<database_instructions>  ...</database_instructions>- 代码风格约束<code_formatting_info>  Use 2 spaces for indentation</code_formatting_info>

▶︎ 标准化相应格式

只有规范和约束返回的格式，才能够让系统正确地调用工具完成指令，比如文件创建和修改、执行Shell脚本等行为，都是通过约束输出后解析出来的。Bolt里的response_requirements翻译如下：

<response_requirements>  关键：你必须严格遵守以下准则,这一点至关重要且不可协商：  1.对于所有设计请求，确保它们是专业的、美观的、独特的，并且功能完整——足以用于生产环境。  2.为所有响应使用有效的markdown格式，除了artifacts外不要使用HTML标签！  3.专注于处理用户的请求，不要偏离到不相关的话题。  4.如果涉及到你正在创建的内容，永远不要在你的响应中使用"artifact"这个词。</response_requirements>

▶︎ 核心Artifact&Action约束

核心部分，在Bolt里有两个至关重要的约束标签 boltArtifact 和 boltAction。artifact约束封装在<artifact_instructions>内，由于内容较长，这里不再展开，其目的是Bolt要求大模型的数据必须按照如下方式输出，让其可以正确被解析为Action，随后被执行。比如下面的大模型返回可以创建出代码文件Product.jsx

<boltArtifact id="de m" title="修改代码实现">  <boltAction type="file" fileAction="create" filePath="Product.jsx">      "import { useState } from 'react';\n"  </boltAction></boltArtifact>

▶︎ 聚焦的技术栈选择

与Agent IDE不同，Bolt技术栈主要围绕TypeScript和Node.js生态构建全栈能力。前端主要支持React、Vue、Svelte等现代框架，内置Vite、Webpack等构建工具，支持npm/yarn包的自动安装和管理，后端集成Supabase，支付使用stripe。之所以选取该技术栈是因为其为了实现编译执行。“生成代码 → 实时编译 → 浏览器预览 → 即时反馈”的方式是基于WebContainer实现的。而WebContainer是一个浏览器内的Node.js运行时。