HarmonyOS 鸿蒙Next技术实践 | 三步集成Function组件，轻松拉起你的AI智能体

HarmonyOS 鸿蒙Next技术实践 | 三步集成Function组件，轻松拉起你的AI智能体 在HarmonyOS应用生态中，如何优雅地集成AI能力，为用户提供无缝的智能服务入口？FunctionComponent 提供了一个极简的解决方案。它允许开发者通过一个简单的UI组件，直接在你的应用中拉起指定的智能体。本文将带你快速了解其核心概念与集成步骤。

一、 认识两种组件形态

FunctionComponent 根据配置不同，会呈现两种UI形态，以适应不同场景：

• 图标组件：当不设置 title 参数时，默认显示为图标。它像一个综合型智能入口，不带预设用户意图，非常适合作为应用内智能体的主入口。

• 按钮组件：当设置了 title 参数时，显示为带文案的按钮。它允许你自定义功能描述，引导性更强，例如“智能创建”、“一键翻译”等。

二、 开发三步走

第一步：基础环境准备

1. 你需要在华为智能体平台提前创建好你的智能体，并获取其唯一的 agentId。
2. 确保终端设备已登录华为账号并处于联网状态。

第二步：核心代码集成

在你的页面（例如 Index.ets）中引入必要模块并构建基础组件。

import { FunctionComponent, FunctionController } from '@kit.AgentFrameworkKit';
import { BusinessError } from "@kit.BasicServicesKit";

@Entry
@Component
export struct AgentExample {
  private controller: FunctionController = new FunctionController();
  // 请替换为你的真实智能体ID
  private agentId: string = 'agentproxy65481da1fa2293a8482d45';

  build() {
    Column() {
      // 这是一个带标题的按钮组件
      FunctionComponent({
        agentId: this.agentId, // 必填
        onError: (err: BusinessError) => {
          // 处理错误
        },
        options: {
          title: '智能创建', // 设置标题即为按钮组件
          queryText: '创建一个新的模式' // (可选) 直接传入初始对话内容
        },
        controller: this.controller
      })
    }
  }
}

第三步：（进阶）添加可用性检查与事件监听

为了提升用户体验和应用稳定性，建议添加以下逻辑：

1. 前置可用性检查：在加载组件前，先检查当前环境是否支持该智能体。

@State isAgentSupport: boolean = false;

async checkAgentSupport() {
  try {
    let context = this.getUIContext()?.getHostContext() as common.UIAbilityContext;
    this.isAgentSupport = await this.controller.isAgentSupport(context, this.agentId);
  } catch (err) {
    hilog.error(0x0001, 'AgentExample', `Check support failed: ${err.message}`);
  }
}

build() {
  Column() {
    if (this.isAgentSupport) { // 仅在支持时渲染
      FunctionComponent({ ... })
    }
  }
}

1. 订阅智能体对话状态：通过 FunctionController 监听智能体对话框的打开和关闭事件，以便在合适的时机执行你的业务逻辑。

aboutToAppear() {
  this.initListeners();
}

initListeners() {
  this.controller.on('agentDialogOpened', this.onAgentOpenedCallback);
  this.controller.on('agentDialogClosed', this.onAgentClosedCallback);
}

onAgentOpenedCallback = () => {
  hilog.info(0x0001, 'AgentExample', '智能体对话框已打开');
  // 可以在此处暂停游戏音乐、记录日志等
}

onAgentClosedCallback = () => {
  hilog.info(0x0001, 'AgentExample', '智能体对话框已关闭');
  // 可以在此处恢复音乐、刷新页面数据等
}

aboutToDisappear() {
  // 记得在页面销毁时取消订阅，防止内存泄漏
  this.controller.off('agentDialogOpened');
  this.controller.off('agentDialogClosed');
}

三、 总结

通过 FunctionComponent，HarmonyOS将复杂的智能体集成流程简化为一个声明式UI组件。开发者只需关注 agentId 和基本的UI配置，即可快速为应用注入AI能力。结合前置检查和事件监听，可以构建出体验更佳、更稳定的智能功能。

现在就尝试将你的智能体嵌入到应用中，为用户带来全新的交互体验吧！

也欢迎大家加入我们的班级一起学习：https://developer.huawei.com/consumer/cn/training/classDetail/9d5d34e77df44f55bb7d2bd83ed8dd94?type=1?ha_source=hmosclass&ha_sourceId=89000248