介绍

本文介绍使用阿里云百炼控制台，通过大模型选择->参数设置->提示词调配->记忆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 {
    @Override
    public 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 {
    @Autowired
    private 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 框架，前后端分离式调用。

后续更多炫彩文章内容，感谢你的关注！！！