网站添加qq聊天学生怎么做网站
介绍
本文介绍使用阿里云百炼控制台，通过大模型选择->参数设置->提示词调配->记忆ID设置->MCP服务接入->智能体发布->接口接入->前端页面实现->功能调用->效果输出等一系列流程，实现一个帮助用户智能记账的智能体应用（此篇内容的模型使用远程部署，需要消耗token，新用户有免费额度，后续会出本地部署的相关文章）
阿里云百炼平台
浏览器访问下方网址，进入阿里云百炼控制台：
https://bailian.console.aliyun.com
阿里云百炼控制台首页，如下图所示：
点击 应用->应用管理->创建应用->进入配置
一、智能体创建与配置步骤
（1）LLM大模型选择
每个智能体都有一个主导它们分析和执行任务的“大脑”，这个“大脑”就是LLM大语言模型，例如Deepseek，通义千问等，如下图所示：
（2）提示词配置
每个智能体都需要人为的配置提示词，这些提示词好比在教导一个“懵懂的孩子”，“你是谁”“你可以做什么”“你如何去做”“你可以根据什么去做”以及“你应当遵守哪些规矩”，如下图所示：
（3）知识，技能和记忆
每个智能体都可以配置和引入外部的知识库，技能和记忆。知识库提供给智能体获取相关信息进行分析的知识存储库，可以进行动态文件解析、联网搜索、样例库配置等；技能可以选择MCP服务、插件、已有的智能体（混合智能体）以及工作流；而记忆则是通过人工的配置一些关键词，为智能体提供长期记忆，就好比将一些关键信息记录在了“备忘录”里。如下图所示：
（4）测试和优化功能
用户通过输入自然语言，测试自己配置的智能体是否达到预期效果，以便继续优化调配智能体，如下图所示：
+ 
（5）发布智能体
发布自己调配好的智能体，获取相应的key，结合自己的appId提供给服务端调用，如下图所示：
二、智能体调用
1. 服务端业务逻辑实现
（1）服务层实现
这个系统的服务层代码是根据平台提供的不同模板，使用key、用户appId、智能体的memoryId共同接入来实现智能体交互的功能。
@Service
public class AiBillServiceImpl implements AiBillService {@Overridepublic String getBillOperation(String str) throws NoApiKeyException, InputRequiredException {ApplicationParam param = ApplicationParam.builder().apiKey(System.getenv("DASHSCOPE_API_KEY")).appId("your appId").prompt(str).memoryId("your memoryId").incrementalOutput(true).build();Application application = new Application();Flowable<ApplicationResult> result = application.streamCall(param);StringBuilder billResponse = new StringBuilder();result.blockingForEach(data -> billResponse.append(Objects.requireNonNull(data.getOutput()).getText()).append(" "));return billResponse.toString().replaceAll(" ", "");}
}（2）控制器实现
控制层提供接口，供客户端方法通过发送请求调用。
@RestController
@RequestMapping("/ai-bill")
@CrossOrigin(origins = "http://localhost:8088")
public class AiBillController {@Autowiredprivate AiBillService aiBillService;@PostMapping("/operation")public String getBillOperation(@RequestParam String input) throws NoApiKeyException, InputRequiredException {return aiBillService.getBillOperation(input);}
}2. 客户端可视化实现
（1）可视化界面实现
通过vue框架里的html模块编写可视化界面，可视化界面代码如下：
<template><div class="ai-bill-container"><div class="welcome-message">欢 迎 使 用 A I 智 能 体 - 爱 小 记</div><h2 style="text-align: center;">- - - 主要功能:通过用户的收支描述，对账单数据进行记录和处理 - - -</h2><div class="tips"><p>提示：</p><ul><li>您可以通过文本输入来记录您的收支情况,也可以指示我来帮您处理账单。</li><li>输入完成后，点击“发送”按钮，系统将自动处理并记录您的账单。</li></ul></div><div class="qa-box"><div v-for="(item, index) in questionsAndAnswers" :key="index" class="qa-item"><div class="question"><strong>问题:</strong> {{ item.question }}</div><div class="answer"><strong>回答:</strong> {{ item.answer }}</div></div></div><div class="input-box"><input v-model="inputText" placeholder="请输入您对小记的指示" ref="input" /><button @click="sendRequest" :disabled="isLoading"><span v-if="!isLoading">发送</span><span v-else class="loading">发送中...</span></button></div></div></template>（2）响应式功能实现
客户端通过axios发送网络请求，请求服务端控制层的接口，实现相应功能的响应。
async sendRequest() {this.isLoading = true;const currentQuestion = this.inputText; // 保存当前问题try {const res = await axios.post('http://localhost:8888/ai-bill/operation', null, {params: {input: currentQuestion}});this.response = res.data;} catch (error) {console.error('请求失败:', error);this.response = '请求失败，请稍后重试';} finally {this.questionsAndAnswers.unshift({ question: currentQuestion, answer: this.response }); // 将问题与回答加入列表this.inputText = ''; // 清空输入框this.isLoading = false;}}三、LLM 记账智能体设计说明
本模块通过MCP协议集成AI大模型能力以此实现下面一些核心功能：
1.支持用户通过自然语言进行账单查询（例如"查看本月餐饮支出"）和操作指令（例如"今天下午购买的西瓜共花费了10元"）的自然语言交互功能。
2.基于消费习惯分析和提供个性化建议（例如"本月饮食类支出较上月增长30%，建议检查饮食类账单"）的智能建议生成功能。
3.通过智能体的memoryId维护会话上下文并且支持连续追问的多轮对话功能。
四、智能体界面设计
界面顶部显示欢迎语及 AI 智能体名称，中部介绍主要功能，下方是提示信息，告知操作方式。最底部有输入框，提示用户输入指示，右侧设 “发送” 按钮，整体布局简洁，便于用户快速了解和使用。如下图所示：
五、流程图设计
智能体交互功能的实现流程，如下图所示：
六、最终页面效果实现
用户可以通过输入框输入交互信息与大模型智能体进行交互，命令智能体通过MCP服务操作微信小程序实现记账和处理，如下图所示：
七、智能体测试
（1）通过MCP服务实现的智能体与微信小程序爱小记互连，如下图所示：
（2）用户通过语音或文字输入账单内容，大模型驱动智能体执行微信小程序同步记账，功能实现效果如下图所示：
（3）智能体查询账单测试，如下图所示：
八、总结
本文主要介绍了通过阿里云百炼平台使用智能体，实现大模型驱动的智能应用功能。
将此智能体应用集成到系统中，方便用户日常使用，加快记账效率。
技术栈使用 Spring Boot + Vue 框架，前后端分离式调用。
后续更多炫彩文章内容，感谢你的关注！！！
