跳到主要内容

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、下载代码包

在右侧区块中搜索 Agent UI ，并下载代码包。

3、解压并添加到小程序目录中

解压 Agent UI 代码包，会得到components文件夹，方便区分，这里将文件夹名改为agent_ui，并将代码包添加到小程序目录miniprogram中。 小程序目录结构如下：

4、安装依赖

在miniprogram文件夹上右键，在终端中打开，执行npm命令：npm install ./agent_ui

注意：agent_ui 需要替换成第三步重命名的文件夹名。

构建npm

点击小程序 工具 菜单栏，选择构建 npm

5、初始化 SDK

在小程序 app.js 顶部初始化 weda-client。

envID和staticResourceDomain可以在下砸代码包的弹窗中获取。

import { init } from '@cloudbase/weda-client';
init({
  envID: 'xxx', // 云开发环境Id
  appConfig: {
    staticResourceDomain: 'xxx.tcloudbaseapp.com', // 云开发环境下静态托管域名，用于使用素材资源
  },
  customConfig: {
    async login({ app, auth, loginState, defaultLogin }) {
      await auth.signInWithOpenId();
    },
    loginConfig: { needSignIn: true }
  }
})

6、页面引用添加区块

注册 agent_ui 组件

在pages/index页面中注册agent_ui组件

添加agent_ui组件到页面

在pages/index页面中添加agent_ui组件

注意：agent_ui 组件需要放在id="wd-page-root"的view下。

配置agent ID

在pages/index页面中配置agent ID

小程序合法域名处理​

如在微搭低代码和小程序中使用agent ui，发布小程序后，提示request 合法域名校验出错，需要前往小程序管理后台配置合法域名。

将报错的域名添加到合法域名列表中。

如果是授权给微搭的小程序，提示禁用域名配置，可以先在微搭解绑小程序，配置完合法域名后，在绑定到微搭。

属性​

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

属性名称属性标识类型描述
智能体 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提交用户反馈