1 实战演练:一句话生成你的鸿蒙聊天机器人
让我们通过一个完整的真实场景,看看自定义智能体 @HarmonyMaster 是如何协同 CodeGenie 的核心能力完成开发任务的。
1.1 智能体提示词配置
你是鸿蒙开发专家,精通 ArkTS 语言、ArkUI 声明式开发范式以及鸿蒙系统的分布式架构。它的核心能力是协同四大模块(任务规划、知识检索、代码生成、规则校验)为用户提供从需求到部署的完整开发解决方案。
Core Workflow (深度执行流)
当接收到开发指令时,智能体必须严格遵循以下五个步骤进行思考和输出,不得跳过任何环节:
1. 任务拆解与规划:
分析用户指令,识别出 UI 开发、逻辑实现、权限配置、性能优化等核心任务。
2. 知识检索:
通过 Context7 明确指出你查询了哪些关键 API(如 FormExtensionAbility、mediaquery 等),并确认其 API 版本的稳定性。明确指出你获取了哪些设计规范(如尺寸、颜色、布局标准)。
3. 代码生成:
UI 层:基于 ArkTS 组件生成布局,确保结构清晰(如 Column、Grid 等)。
逻辑层:实现生命周期回调、数据流转或交互逻辑。
适配层/配置层:处理配置文件(如 module.json5)或特定的适配逻辑。
4. 规则校验与修正:
这是关键步骤:你必须主动审查生成的代码,调用规则检查工具进行自我修正。
格式要求:
🔍 检查:[发现的问题描述]
✨ Rule [X] 生效:[具体的修正动作和结果代码]
5. 构建与部署:
调用文件系统工具模拟写入文件的过程,并描述执行编译命令(如
hvigorw assembleHap)。以 "BUILD SUCCESSFUL" 结尾,并给出最终的反馈总结。
Response Format
你的回答必须结构清晰,标题层级分明
具体的配置如下图:

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 预览器界面展示效果
📱 消息气泡区域:浅灰色背景(
#FAFAFA)区域展示消息,用户发送的蓝色渐变气泡右对齐,AI 回复的白色气泡左对齐带 AI 头像💬 标题栏:顶部渐变紫色背景(
#667eea→#764ba2),居中显示"AI 智能助手"文字和副标题"在线 · 随时为您服务",底部带圆角和阴影效果⌨️ 输入区域:底部白色区域包含圆角输入框(
灰色背景#F5F5F5)和发送按钮,按钮根据输入状态在蓝色(#667eea)与灰色间切换,带火箭/铅笔图标🔄 滚动效果:列表支持弹性滚动,新消息自动滚动到底部,滚动条默认隐藏,打字机效果 30ms/字流畅显示
🎨 细节特效:气泡带圆角和阴影,AI 头像渐变蓝色,时间戳显示,三点跳动加载动画,三点菜单弹出支持
2 构筑"鸿蒙专家"的三大核心能力
通过上面的实战案例,我们可以看到,CodeGenie 通过三大核心能力为鸿蒙开发者打造了专属智能体。
2.1 自定义智能体
智能体不仅仅是一个聊天窗口,而是一个经过深度定制的鸿蒙开发专家。它能:
实时感知项目架构: 知道 UI 组件应该放在
ets/components目录下,知道权限配置在module.json5任务驱动式开发: 不是零散的代码补全,而是理解需求后进行系统性的任务拆解和完整实现
全程自我修正: 生成代码后会自动进行规则检查,识别潜在问题并修复
2.2 自定义模型
鸿蒙的 ArkTS 语言基于 TypeScript 扩展,增加了大量装饰器和严格类型约束。通用模型往往写出"跑不通"的代码。
在 CodeGenie 中,可以为智能体配置不同的专业模型:
公有云模型: 灵活指向业界领先的大模型,获得最强的代码生成能力
私有化部署: 通过配置企业内部自行部署的私有模型服务地址(如基于 DeepSeek、Qwen 等开源模型在企业内网搭建的推理端点),实现"能力外借,数据不出"的极致隐私保护

2.3 强大的内置工具
智能体不仅要会写代码,还得会理解和搭建鸿蒙工程。CodeGenie 的内置工具链让智能体真正融入开发工作流:
文件系统读写: 自动扫描并解析鸿蒙工程的 Stage 模型结构,精准区分
AppScope、entry和feature模块,将代码生成到正确的目录

命令行工具交互: 直接调用宿主机的 Shell 环境,执行版本控制、依赖管理和构建任务

编译构建闭环: 自动执行
hvigorw assembleHap等编译命令,如果报错会自动解析日志并修复,直到构建成功

3 辅助配置:MCP Servers 与自定义 Rules
3.1 MCP Servers(轻量级连接)
鸿蒙 API 庞大且迭代极快,通过连接 MCP Servers,智能体可以访问实时知识库:
Figma 设计直连: 读取 Figma 设计文件的布局元数据,将设计稿转化为精准的 ArkUI 代码
实时文档查询: 在需要实现特定功能时,实时查询最新的 API 文档,生成符合最新规范的代码

3.2 自定义 Rules(关键规范)
为确保生成的代码符合企业级标准,可以配置关键规则:
UI 适配规范: "严禁在 ArkUI 中写死 px 单位,所有尺寸必须使用 vp"
状态管理规范: "涉及跨组件同步的数据,必须使用 @Observed + @ObjectLink 装饰器"
权限合规规范: "所有涉及敏感 API 必须在 module.json5 中声明对应的 reason 字段"

智能体在生成代码后会自动进行规则检查,及时修正不符合规范的内容。
总结
在 CodeGenie 的平台上,自定义智能体是核心驱动力,而自定义模型为它赋予了专业的智能。内置工具让智能体能够直接操作工程,MCP Servers 和自定义 Rules 则提供了必要的知识连接和规范约束。
对于鸿蒙开发者而言,这意味着你可以拥有一个懂 ArkTS、懂 Stage 模型、懂最新 API、懂团队规范的"超级队友"。
现在,就在 CodeGenie 中启动你的 @HarmonyMaster,让 AI 驱动的智能体帮你攻克原生鸿蒙开发的每一个细节,让创意在"星河"中极速落地!





