自定义Agent与多模型对接:AI辅助鸿蒙应用开发实践

具体的配置如下图：

1.2 开发者指令

@HarmonyMaster

开发一个基于HarmonyOS的AI聊天机器人应用，包含聊天消息列表布局、消息气泡样式、用户输入区域、发送按钮

1.3 智能体的深度执行流

1.3.1 任务拆解与规划

智能体首先分析指令，识别出五个核心任务：

·   UI开发（聊天消息列表（List组件）、消息气泡样式、用户输入区域、发送按钮）

·   数据层（消息数据模型定义、消息列表状态管理）

·   逻辑层（发送消息逻辑、消息自动滚动、时间戳生成）

·   样式层（用户气泡与AI气泡的差异化样式设计）

1.3.2 知识检索（通过 MCP 连接）

Context7 知识库检索记录

智能体通过 MCP 连接 Context7 知识库，实时查询：

·   List component API and scrollIndex/scrollToIndex methods (列表组件与滚动控制)

·   ArkTS custom component @Prop decorator (自定义组件属性传递)

·   Date object timestamp implementation (日期时间戳)

·   @State state management for reactive updates (响应式状态管理)

·   Column/Row/Blank layout components (弹性布局系统)

·   TextInput placeholder and onChange events (输入框交互)

·   Button dynamic backgroundColor with conditional logic (动态样式绑定)

·   ForEach rendering optimization with key generator (列表渲染优化)

·   ListScroller automatic scroll to bottom (列表自动滚动)

·   Text constraintSize property for content wrapping (文本约束与换行)

·   EdgeEffect.Spring elastic scrolling (弹性滚动效果)

·   EntryAbility windowStage.loadContent lifecycle (页面加载生命周期)

·   module.json5 pages configuration (模块页面注册)

·   setTimeout delayed execution for async simulation (异步延迟处理)

·   borderRadius complex corner customization (多角圆角定制)

1.3.3 代码生成（基于自定义模型）

基于检索到的知识和配置的专业模型，智能体开始生成代码：

AI聊天机器人核心代码：

import { Message, MessageRole } from '../model/Message';import { MessageBubble } from '../components/MessageBubble';@Entry@Componentstruct ChatPage {  @State messages: Message[] = [new Message('你好！我是AI助手，有什么可以帮助你的吗？', MessageRole.ASSISTANT)];  @State inputText: string = '';  private listScroller: ListScroller = new ListScroller();  aboutToAppear(): void {    setTimeout(() => this.listScroller.scrollToIndex(this.messages.length - 1), 100);  }  scrollToBottom() {    this.listScroller.scrollToIndex(this.messages.length - 1);  }  sendMessage() {    if (this.inputText.trim() === '') return;    this.messages.push(new Message(this.inputText.trim(), MessageRole.USER));    this.inputText = '';    this.scrollToBottom();    this.simulateAIResponse();  }  simulateAIResponse() {    setTimeout(() => {      const responses = ['这是一个很有趣的问题！让我来详细解答一下。', '很好的想法！我建议您从以下几个方面入手。'];      this.messages.push(new Message(responses[Math.floor(Math.random() * responses.length)], MessageRole.ASSISTANT));      this.scrollToBottom();    }, 1000);  }  @Builder HeaderBuilder() {    Row() {      Text('AI聊天助手').fontSize(20).fontWeight(FontWeight.Medium).fontColor('#000000')    }.width('100%').height(56).padding({ left: 16, right: 16 }).backgroundColor('#FFFFFF')      .border({ width: { bottom: 1 }, color: '#F0F0F0' }).justifyContent(FlexAlign.Center)  }  @Builder InputAreaBuilder() {    Row() {      TextInput({ placeholder: '输入消息...', text: this.inputText }).layoutWeight(1).height

智能体调用内置文件系统写入工具，将代码写入到 ets/pages/ChatPage.ets。

1.3.4 规则校验与修正

智能体自动进行自我审查：

· 🔍检查： Text组件使用了不存在的API maxWidth(280)，导致编译错误· ✨Rule [组件API规范] 生效： 将maxWidth替换为标准属性constraintSize({ maxWidth: 280 })，确保文本约束正确生效

· 🔍检查： ListScroller调用了错误方法 scrollIndex(this.messages.length - 1)· ✨Rule [列表滚动API规范] 生效： 修正为标准方法 `scrollToIndex(this.messages.length -1）

1.3.5 构建与部署

智能体调用命令行工具执行编译：

hvigorw assembleHap

几秒钟后，控制台返回 BUILD SUCCESSFUL 🎉

最终生成的AI聊天机器人应用完美实现了以下核心能力：

·   精准消息展示： 用户消息与AI回复通过不同样式气泡清晰区分（蓝色/灰色背景）

·   智能滚动管理： 发送消息或接收AI回复时自动滚动到最新消息位置

·   弹性滚动效果： 列表采用 EdgeEffect.Spring 提供流畅的弹性回弹体验

·   极简输入设计： 圆角输入框设计，支持回车键快速发送，发送按钮根据输入状态动态变色

·   沉浸式标题栏： 56px标准高度标题栏，底部1px分隔线，符合Material Design规范

1.3.6 应用总结与预览

智能体在完成构建与修复动作以后，此时一个全新的鸿蒙AI聊天机器人应用就完成了，此时可以通过DevEco Studio自带的预览器实现聊天界面预览或通过智能体继续增加功能。

1.3.7 预览器界面展示效果