跳到主要内容

Agent UI 区块组件

Agent UI 可以帮助开发者快速搭建聊天界面，并集成到微信小程序、H5、web 场景中。 Agent UI 提供以下功能：

  • Agent 会话组件： 提供对接 Agent 服务的组件，支持对接 Agent 服务的会话能力。
  • 用户反馈： 提供用 户反馈弹窗，用于提交用户反馈，优化 Agent 服务质量。

使用说明​

创建 Agent​

在 Agent 管理页面，点击创建 Agent 按钮，创建 Agent，并 配置 Agent 的信息。

复制 Agent ID ，用于 Agent UI 区块配置 。

添加 Agent UI​

在公共区块中搜索 Agent UI ，并添加到当前页面。

配置 Agent ID​

点击 Agent UI 区块，配置 Agent ID , Agent ID 可以从 AI + -> Agent -> 具体的 Agent 详情页面复制

完成以上配置，Agent UI 就已经配置好了，并且展示完整的聊天界面。

集成到微信小程序​

Agent UI 集成到微信小程序场景中，需要下载 Agent UI 的代码包，引入到微信小程序中，并配置 Agent ID。

1、进入任意微搭应用

2、下载代码包 3、解压并添加到小程序目录中

4、安装依赖

5、初始化 SDK

6、页面引用添加区块

属性​

区块接收外部传入的属性。

属性名称属性标识类型描述
智能体 IDbotIdString必填，Agent ID

实现细节​

Agent UI 区块组件基于可视化技术搭建，为了便于开发者自定义，这里详细描述其中的实现细节，便于开发者自行调整逻辑。

使用 Agent UI 只需配置 Agent ID ，配置 Agent ID 后，Agent UI 会自动加载 Agent ID 对应的 Agent 配置，Agent 加载和会话流程如下。

内部数据交互​

初始化 Agent 阶段：

  • 查询 Agent ID 对应的 Agent 信息
  • 加载 Agent 聊天记录
  • 初始化 Agent 会话

会话阶段：

  • 发起 Agent 会话
  • 流式加载 Agent 响应
  • 查询建议问题

区块 query 和事件说明​

名称描述
$w.queryBotById根据 Agent UI 配置的 ID 来查 Agent
$w.queryChatRecords查询聊天记录，在 queryBotById 完成后调用
$w.sendMessage发送消息
$w.page.handler.queryRecommendQuestions查询推荐问题
$w.submitFeedback提交用户反馈