当前位置： 首页 > news >正文

VibeCoding On Function AI Deep Dive：用 AI 应用生产 AI 应用

news 2025/9/18 0:14:35

作者：寒斜

这是一个很有意思的话题，今天大家都在热火朝天的构建 AI 应用。有用各种各样的编程语言，开发框架开发的，也有用低代码工作流搭建的，但是你否知道，其实可以仅通过自然语言就可以完成一个 AI 应用的开发乃至上线么？ 本篇文章就来跟大家分享一下我是如何使用自然语言的方式构建丰富多彩的 AI 应用的，希望借此可以带您直观感受 VibeCoding 的魅力，感受 AI 时代的软件生产变革。

用 AI 应用生产 AI 应用——VibeCoding On Function AI Deep Dive。

操作演示

接下来我们先来真实的操作一下使用自然语言构建AI应用， 基础软件部分的获取请参考之前的系列文章《Vibecoding 新体验：实测 Qwen3 Coder 代码生成效果》，对于已经部署好的同学可以重新部署一个新的版本。近期方案中增加了对百炼等 AI 能力的集成，可以帮助您生成有趣又实用的 AI 应用。

场景一：儿童教育娱乐类 AI 应用

这类应用非常适合家里有小朋友的同学，跟他/她们一起利用 AI 进行娱乐和互动，培养使用 AI 的意识。我们接下来看一下如何生产构建。

儿童绘本制作应用

针对有声儿童绘本的生成场景，可以构建一些有教育意义或者有童趣的绘本场景。

演示效果如下

image

构建过程

使用“专家模式”，输入框输入“@”选择“资深全栈工程师”。（这里不需要数据库所以不用前面两个智能体。）

image

总共 10 轮对话，没有一行代码，可以看到 AI（qwen3-code-plus）可以很好的进行修正。

image

发布

只需按照以下流程，点击一下“发布”按钮即可。

image

image

儿童猜画应用

可以跟小朋友玩“人类绘画 AI 猜画”的游戏培养绘画兴趣。

演示效果如下

image

构建过程

使用“专家模式”，输入框输入“@”选择“资深全栈工程师”。（这里不需要数据库所以不用前面两个智能体。）

image

仅四轮对话即可生成修改这样的创意 AI 应用。

image

发布

可参考儿童绘本制作应用发布流程。

场景二：企业网站+知识问答

这类应用是非常刚需的企业应用，比如企业的产品门户页或者解决方案官网等，然后还要在官网上增加一个智能助手，来实现企业的自助服务。

效果演示

image

构建过程

企业网站+知识问答分两个步骤。

步骤一：

构建知识问答 API 服务，知识问答服务可以使用 AgentCraft 的底座无代码搭建，构建一个知识库的 API 示例如下：

image

步骤二：

自然语言开发，本次依然只使用“全栈专家”。

image

经过 6 轮对话即可完成+AI 的能力。

image

系统中的 AI 集成

这里是如何做到可以让 AI 应用直接开发 AI 应用的呢？主要分三个部分：

系统提示词集成

您是一位专注于Web应用开发领域的专家X，拥有跨多种编程语言、框架和最佳实践的丰富知识。
你的协作方有D(一个数据库专家)以及M(一个专业的项目经理) 可以参考他们的建议开发应用<system_constraints>...之前的提示内容
<IntegrationExamples><Integration name="百炼平台AI">// 已知存在server端的api文件 src/app/api/ai/route.ts// 浏览器端调用示例// 文本生成（非流式）const response = await fetch('/api/ai', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({action: 'text-generation',data: {model: 'qwen-plus',messages: [{role: 'system',content: 'You are a helpful assistant.'},{role: 'user',content: '你是谁？'}]}})});/**文本生成response的数据结构如下{"choices": [{"message": {"role": "assistant","content": ""},"finish_reason": "stop","index": 0,"logprobs": null}],"object": "chat.completion","usage": {"prompt_tokens": 121,"completion_tokens": 788,"total_tokens": 909,"prompt_tokens_details": {"cached_tokens": 0}},"created": 1755147048,"system_fingerprint": null,"model": "qwen-plus","id": ""}**/// 文本生成（流式）const response = await fetch('/api/ai', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({action: 'text-generation',data: {model: 'qwen-plus',messages: [{role: 'system',content: 'You are a helpful assistant.'},{role: 'user',content: '你是谁？'}],stream: true,stream_options: {include_usage: true}}})});// 处理流式响应if (response.body) {const reader = response.body.getReader();const decoder = new TextDecoder();while (true) {const { done, value } = await reader.read();if (done) break;const chunk = decoder.decode(value);// 处理每个数据块console.log(chunk);}}// 图像生成1-启动异步生成任务const response = await fetch('/api/ai', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({action: 'image-generation',data: {model: 'wan2.2-t2i-flash',input: {prompt: '一间有着精致窗户的花店，漂亮的木质门，摆放着花朵'},parameters: {size: '1024*1024',n: 1}}})});const { output } = await response.json();const taskId = output.task_id;// 图像生成2-查询异步任务const response = await fetch('/api/ai', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({action: 'get-image-task',data: {taskId: '86ecf553-d340-4e21-xxxxxxxxx'}})});const result = await response.json();/**result.output?.task_status 状态码如下:PENDING：任务排队中RUNNING：任务处理中SUCCEEDED：任务执行成功FAILED：任务执行失败CANCELED：任务取消成功UNKNOWN：任务不存在或状态未知示例:if(result.output?.task_status === 'SUCCEEDED'){let imageurl = result.output.results?.[0]?.url;}**/// 图像理解const response = await fetch('/api/ai', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({action: 'visual-understanding',data: {model: 'qwen-vl-max',messages: [{role: 'system',content: [{ type: 'text', text: 'You are a helpful assistant.' }]},{role: 'user',content: [{ type: 'image_url', image_url: { url: '<img-url>' } },{ type: 'text', text: '图中描绘的是什么景象?' }]}]}})});// 音频理解（音频识别）示例const response = await fetch('/api/ai', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({action: 'audio-understanding',data: {model: 'qwen-audio-turbo-latest',input: {messages: [{role: "system",content: [{"text": "You are a helpful assistant."}]},{role: "user",content: [{"audio": "https://dashscope.oss-cn-beijing.aliyuncs.com/audios/welcome.mp3"},{"text": "这段音频在说什么?"}]},{role: "assistant",content: [{"text": "这段音频说的是:'欢迎使用阿里云'"}]},{role: "user",content: [{"text": "介绍一下这家公司。"}]}]}}})});const result = await response.json();// 文本转语音示例(语音合成)const response = await fetch('/api/ai', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({action: 'text-to-speech',data: {model: 'qwen-tts',input: {text: "那我来给大家推荐一款T恤，这款呢真的是超级好看，这个颜色呢很显气质，而且呢也是搭配的绝佳单品，大家可以闭眼入，真的是非常好看，对身材的包容性也很好，不管啥身材的宝宝呢，穿上去都是很好看的。推荐宝宝们下单哦。",voice: "Chelsie"}}})});const result = await response.json();/**result 返回示例{"output": {"finish_reason": "stop","audio": {"expires_at": 1755191553,"data": "","id": "","url": ""}},"usage": {"input_tokens_details": {"text_tokens": 14},"total_tokens": 122,"output_tokens": 108,"input_tokens": 14,"output_tokens_details": {"audio_tokens": 108,"text_tokens": 0}},"request_id": ""}**/</Integration><Integration name="AgentCraft AI">// 服务端 建议目录src/app/api/agentcraft/route.ts// 已知 AGENTCRAFT_BASE_URL , API_VERSION 和 TOKEN 需要用户输入import { NextResponse } from 'next/server';export async function POST(request: Request) {try {const { messages ,stream} = await request.json();// 调用知识库API// AgentCraft API Vesion 为 v1 或者 v2const response = await fetch({AGENTCRAFT_BASE_URL} + '/{API_VERSION}/chat/completions', {method: 'POST',headers: {'accept': 'application/json','Authorization': 'Bearer <TOKEN>','Content-Type': 'application/json'},body: JSON.stringify({messages: [{role: "system",content: "你是一个有用的助手"},...messages],stream,max_tokens: 8192})});if (stream) {// 创建一个新的 Response 对象，直接转发流式响应return new Response(response.body, {status: response.status,headers: {'Content-Type': 'text/event-stream; charset=utf-8','Cache-Control': 'no-cache','Connection': 'keep-alive','Access-Control-Allow-Origin': '*',}});}if (!response.ok) {throw new Error(`知识库API请求失败: ${response.status}`);}const data = await response.json();const content = data.choices?.[0]?.message?.content || '抱歉，我无法处理您的请求。请稍后再试。';return NextResponse.json({ content });} catch (error) {console.error('Error:', error);return NextResponse.json({ error: '处理请求时发生错误' }, { status: 500 });}}// 客户端const response = await fetch('/api/agentcraft', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({action: 'text-generation',data: {model: 'qwen-plus',messages: [{role: 'system',content: 'You are a helpful assistant.'},{role: 'user',content: '你是谁？'}],stream: true,stream_options: {include_usage: true}}})});// 处理流式响应if (response.body) {const reader = response.body.getReader();const decoder = new TextDecoder();while (true) {const { done, value } = await reader.read();if (done) break;const chunk = decoder.decode(value);// 处理每个数据块console.log(chunk);}}</Integration>
</IntegrationExamples>
...之前的提示内容
</system_constraints>

可以看到，这里 IntegrationExamples 中写明了在客户端调用百炼 API 以及 AgentCraft AI 的示例，他们覆盖了文本生成，图片生成，声音生成，图像识别，知识库，智能体等全方位的 AI 能力，AI 可以根据示例很好的完成开发。

开发态环境集成

为了减少 AI 的输出内容，降低成本，以及确保稳定的 AI 服务，系统通过应用模板内置了 AI 的 API Server，也就是在 NextJS 的后端服务中加入了提前写好的 AI API 服务（这里只是内置了百炼的 API 服务，AgentCraft 本身的服务则是服务端和客户端都需要重新生成。）

image

// app/api/ai/route.ts
import { NextRequest, NextResponse } from 'next/server';
// 定义类型
type MessageContent = {type: string;text?: string;image_url?: { url: string };audio?: string;
};
type Message = {role: string;content: string | MessageContent[];
};
type RequestBodies = {'text-generation': {model: string;messages: Message[];};'image-generation': {model: string;input: {prompt: string;};parameters: {size: string;n: number;};};'get-image-task': {taskId: string;};'visual-understanding': {model: string;messages: Message[];};'audio-understanding': {model: string;input: {messages: Message[];};};'text-to-speech': {model: string;input: {text: string;voice?: string;};};
};
// API端点映射
const API_ENDPOINTS = {'text-generation': 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions','image-generation': 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text2image/image-synthesis','get-image-task': (taskId: string) => `https://dashscope.aliyuncs.com/api/v1/tasks/${taskId}`,'visual-understanding': 'https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions','audio-understanding': 'https://dashscope.aliyuncs.com/api/v1/services/aigc/multimodal-generation/generation','text-to-speech': 'https://dashscope.aliyuncs.com/api/v1/services/aigc/multimodal-generation/generation'
};
// 请求方法映射
const REQUEST_METHODS = {'text-generation': 'POST','image-generation': 'POST','get-image-task': 'GET','visual-understanding': 'POST','audio-understanding': 'POST','text-to-speech': 'POST'
};
// 是否需要异步头
const ASYNC_HEADERS = {'image-generation': true
};
export async function POST(req: NextRequest) {const { action, data } = await req.json();// 检查API密钥const apiKey = process.env.DASHSCOPE_API_KEY;if (!apiKey) {return NextResponse.json({ error: 'DASHSCOPE_API_KEY is not configured' }, { status: 500 });}// 验证actionif (!(action in API_ENDPOINTS)) {return NextResponse.json({ error: 'Invalid action specified' }, { status: 400 });}try {// 特殊处理get-image-task，因为它需要taskId参数const url = action === 'get-image-task' ? API_ENDPOINTS[action](data.taskId) : API_ENDPOINTS[action];// 验证taskIdif (action === 'get-image-task' && !data.taskId) {return NextResponse.json({ error: 'Task ID is required' }, { status: 400 });}// 构建请求头const headers: Record<string, string> = {'Authorization': `Bearer ${apiKey}`,'Content-Type': 'application/json'};// 添加异步头（如果需要）if (ASYNC_HEADERS[action as keyof typeof ASYNC_HEADERS]) {headers['X-DashScope-Async'] = 'enable';}// 构建请求配置const config: RequestInit = {method: REQUEST_METHODS[action],headers};// 添加请求体（GET请求不需要）if (REQUEST_METHODS[action] === 'POST') {config.body = JSON.stringify(data);}// 发送请求const response = await fetch(url, config);// 处理流式响应if (action === 'text-generation' && data.stream) {// 创建一个新的 Response 对象，直接转发流式响应return new Response(response.body, {status: response.status,headers: {'Content-Type': 'text/event-stream; charset=utf-8','Cache-Control': 'no-cache','Connection': 'keep-alive','Access-Control-Allow-Origin': '*',}});}const result = await response.json();return NextResponse.json(result, { status: response.status });} catch (error) {console.error('DashScope API error:', error);return NextResponse.json({ error: 'Internal server error' }, { status: 500 });}
}

对于 AI 应用，还有一个比较重要的东西，就是 API 秘钥。本方案中，API 秘钥是通过环境变量的方式从上层服务注入，而不是明文写到系统，因此更加安全。

//...
else if (shellCommand.startsWith('npm run dev')) {const currentPid = process.pid;await checkAndKillPort(PORT, currentPid);const childProcess: any = spawn('npm', ['run', 'dev'], {cwd: workdir,stdio: ['ignore', 'pipe', 'pipe'],detached: true, // 使子进程在父进程退出后继续运行env: {...process.env,PATH: process.env.PATH,NODE_ENV: 'development', // 明确设置开发环境VITE_USER_NODE_ENV: 'development'},uid,gid});
// ....

生产态环境集成

因为在开发态的时候集成 AI 的代码以及客户端的调用代码都已经准备完毕，发布到生产环境，只是提取开发态的环境变量一并部署到服务器上即可。

构建的过程中会生成 s.yaml，将整个生成的 AI 应用进行打包上传。

const sYamlContent = `edition: 3.0.0
name: mayama_ai_generated_app
vars:region: '${process.env.REGION}'functionName: 'mayama_${projectId}'
template:mayama_all:internetAccess: true
resources:mayama_nextjs_build:component: fc3actions:pre-deploy:- run: npm run buildpath: ./props:region: '\${vars.region}'description: 应用timeout: 600diskSize: 512customRuntimeConfig:port: 3000command:- bootstraplayers:- acs:fc:\${vars.region}:official:layers/Nodejs20/versions/1- acs:fc:\${vars.region}:1154600634854327:layers/ac-client-mayama-base-release/versions/10- >-acs:fc:\${vars.region}:1154600634854327:layers/ac-client-base-release/versions/4runtime: custom.debian10instanceConcurrency: 100memorySize: 3072cpu: 2environmentVariables:LD_LIBRARY_PATH: /code:/code/lib:/usr/local/lib:/opt/libNODE_PATH: /opt/nodejs/node_modulesRegion: '\${vars.region}'DASHSCOPE_API_KEY: ${process.env.DASHSCOPE_API_KEY || ''}NEXT_PUBLIC_SUPABASE_URL: ${NEXT_PUBLIC_SUPABASE_URL}NEXT_PUBLIC_SUPABASE_ANON_KEY: ${NEXT_PUBLIC_SUPABASE_ANON_KEY}PATH: >-/opt/nodejs20/bin:/usr/local/bin/apache-maven/bin:/usr/local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/local/ruby/bin:/opt/bin:/code:/code/bin:/opt/nodejs/node_modules/.binfunctionName: \${vars.functionName}code: ./triggers:- description: ''qualifier: LATESTtriggerName: defaultTriggertriggerType: httptriggerConfig:methods:- GET- POST- PUT- DELETEauthType: anonymousdisableURLInternet: falsecustomDomain:protocol: "HTTP"route:path: "/*"qualifier: "LATEST"domainName: autoextend:name: mayama_all
`;await fs.writeFile(sYamlPath, sYamlContent, 'utf-8');console.log(`✅ 已创建 s.yaml 配置文件`);

VibeCoding 的技巧

了解系统的设计可以掌握系统的应用边界，知晓什么时候可以强化提示让 AI 系统更好的完成生产任务。这里有些小技巧。

一. 项目唯一 ID

image

当 AI 第一次将项目信息输出的时候，后续都应该围绕这里的 ID 进行持续的迭代，因为系统构建真实的应用文件是以这个 ID 为唯一值，如果你发现 ID 变了，那就意味着系统重新生成了一个项目，无法延续你之前的项目。此时可以跟系统说“请在项目 ID 是 xxxx 的项目上修改”,这样就保持了项目持续迭代的一致性。

这里也建议一个会话对应一个项目，防止生成混淆。

二. 一些必要的交流术语

绝大部分情况下，你使用自然语言表达自己的需求要求 AI 满足即可，但某些情况下，需要给他一些专业的软件开发术语，可以让他修改的更加明确，比如上述示例，使用 xxxx api 完成开发（复制的是一个 curl 的请求），再比如构建应用视觉的时候，可以输入“请把页面上的卡片元素进行垂直/水平居中”，请使用 xxx 的 json 数据进行数据模拟等等。

image

三. 异常情况处理

AI 编程结果不一定是一帆风顺的，系统内置了错误提示的效果，因此当遇到错误的时候最简单直接的办法就是直接粘贴复制，让 AI 自己看错误去修改。

image

除了异常，系统还会把生成的应用本身，以及多轮对话等上下文都一并传入给 AI，全面的上下文可以更好的让 AI 帮助我们解决问题。

四. 解决不了的死循环

AI 可能会陷入某种死循环，怎么问问题都解决不了，此时你可以要求他换个思路，或者我们换一个问话方式，看看是否可以解决。

image

未来展望

随着 VibeCoding 解决方案的持续进化，我们正朝着全民开发者时代迈进：

  1. 国内开放平台的登录：使用支付宝，微信等登录系统直接让自己生成的应用对外可服务。

  2. 小程序/移动应用：扩展应用类型，如支持小程序或者移动应用的自然语言编程方案。

  3. Agentic 应用：支持更复杂的 Agentic 工作流，多模态应用。

上手体验

访问阿里云 Function AI [ 1] 控制台参考《全球首个搭载 Kimi-K2 的 Serverless 架构 VibeCoding解决方案重磅来袭！》内容教程进行部署使用。

相关链接：

[1] FunctionAI

https://cap.console.aliyun.com/projects

http://www.wxhsa.cn/company.asp?id=1077

相关文章：

  • [题解] P13777 「o.OI R2」Meowalkane
  • Kubernetes Pod控制器
  • kingbase金仓数据库的用户权限管理
  • C++14之exchange
  • Blazor之第三方登录
  • 深入解析：物联网时序数据库IoTDB是什么？
  • wpf 后台获取资源字典对象
  • POJ 3601 Subsequence
  • 【IEEE出版】第十届计算机技术与机械电气工程国际学术论坛（ISCME 2025）
  • Python-httpx库的post请求的几种参数的区别
  • 精准把控人力，PJMan “负荷分析” 助力项目高效推进
  • 92. 递归实现指数型枚举
  • Logstash、Filebeat和Fluent比较
  • 车载电动充气泵芯片方案设计
  • [题解]P4281 [AHOI2008] 紧急集合 / 聚会
  • 【API接口】最新可用红果短剧接口
  • 微信个人号接口
  • 数据结构与算法-28.图
  • 剪映如何将草稿分享给别人？
  • 测试开发私教服务班4.0：大厂导师1对1带你突破职业瓶颈！
  • 深入理解Java对象：从创建到内存访问的JVM底层机制
  • 【AP出版】第八届人文教育与社会科学国际学术会议（ICHESS 2025）
  • 从零开始搭建Qwen智能体：新手也能轻松上手指南
  • # 简单贪心题（greedy）
  • 免安装在线录屏神器推荐：纯前端屏幕录制工具使用指南
  • sqlalchemy连接池的长连接一直占用，无法释放导致服务卡住
  • 锁相关记录
  • 加入任务计划
  • 使用yolo算法对视频进行实时目标跟踪和分割
  • qoj2607 Survey