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

【AI智能体】LLM记账智能体+MCP服务-实现步骤与效果展示

news 2025/9/1 15:29:53

介绍

本文介绍使用阿里云百炼控制台，通过大模型选择->参数设置->提示词调配->记忆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;}}