Agent UI React 组件

Agent UI React 组件基于腾讯云 Chat UI 及 Tea 组件设计规范打造，可以帮助开发者快速在 React 应用中搭建 AI 聊天界面。

Agent UI React 组件提供以下功能：

• 对接云开发大模型
• 对接云开发 Agent（智能体）

提示

由于 Agent UI React 组件依赖腾讯云 Tea 组件库，目前适配的 React 版本为 17，18

提示

开发环境 Node 版本依赖 >= Node.js v18

演示效果

PC 尺寸效果

移动端 H5 尺寸效果

快速体验

方式一：访问云开发 Agent UI Web React 在线应用示例，直接体验

方式二：下载 React 示例项目，本地调试体验。

组件使用

1. 安装依赖

// 安装云开发 @cloudbase/js-sdk，提供 Web 端访问云开发基础资源及 AI 相关能力
npm i @cloudbase/js-sdk

// 安装本组件
npm i @cloudbase/agent-ui-react@1.0.0-beta.3

2. 引入组件

import cloudbase from "@cloudbase/js-sdk";
import { useEffect, useState } from "react";

const tcb = cloudbase.init({
  // 需替换为实际使用云开发环境 id
  env: "your envId",
});

export function YourComponent() {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    auth.signInAnonymously().then(() => {
      setReady(true);
    });
  });

  if (!ready) {
    return null;
  }

  return (
    <div>
      <AgentUI
        tcb={tcb}
        style={{ width: "100vw", height: "100vh" }}
        chatMode="bot"
        showBotAvatar={true}
        agentConfig={{
          botId: "your botId",
          allowWebSearch: true,
          allowUploadFile: true,
          allowPullRefresh: true,
          allowUploadImage: true,
          showToolCallDetail: true,
        }}
        modelConfig={{
          modelProvider: "cloudbase",
          quickResponseModel: "deepseek-v4-flash",
        }}
      />
    </div>
  );
}

其中 agentConfig 参数结构如下：

参数名称	参数可选值	说明
chatMode	'bot' 或 'model'	当 chatMode='bot'时，agentConfig.botId 必填；当 chatMode='model'时，modelConfig.modelProvider 和 modelConfig.quickResponseModel 必填
showBotAvatar	boolean	界面是否展示左侧头像
agentConfig.botId	string	agent id，当 chatMode = 'bot' 时，必填
agentConfig.allowUploadFile	boolean	界面是否展示文件上传
agentConfig.allowWebSearch	boolean	允许界面呈现联网配置开关
agentConfig.allowPullRefresh	boolean	允许点击刷新
agentConfig.allowUploadImage	boolean	允许上传图片
agentConfig.allowMultiConversation	boolean	是否展示会话列表，创建会话按钮
agentConfig.showToolCallDetail	boolean	是否展示工具调用细节
modelConfig.modelProvider	string	大模型服务商
modelConfig.quickResponseModel	string	具体的模型版本, 参考大模型版本

** 云开发平台开启对应能力 **

** 文档文件上传说明 **

• 大小限制：单文件不超过 10M
• 数量限制：单次最多支持 5 个文件
• 文件类型：pdf、txt、doc、docx、ppt、pptx、xls、xlsx、csv

** 图片文件上传说明 **

• 大小限制：单张图片最大不超过 30MB
• 数量限制：单次最多支持 1 张图片

直连大模型调用示例:

• 使用 deepseek 系列模型

{
  "chatMode": "model",
  "showBotAvatar": true,
  "modelConfig": {
    "modelProvider": "cloudbase",
    "quickResponseModel": "deepseek-v4-flash",
    "logo": "",
    "welcomeMsg": "欢迎语"
  }
}

• 使用 hunyuan 系列模型

data: {
  chatMode: "model",
  showBotAvatar: true,
  modelConfig: {
    modelProvider: "cloudbase",
    quickResponseModel: "hy3-preview",
    logo: "",
    welcomeMsg: "欢迎语",
  },
}

使用 Agent 调用示例:

{
  chatMode: "bot", // bot 表示使用agent，model 表示使用大模型
  showBotAvatar: true, // 是否在对话框左侧显示头像
  agentConfig: {
    botId: "your botid", // agent id,
    allowWebSearch: true, // 允许客户端选择启用联网搜索
    allowUploadFile: true, // 允许上传文件
    allowPullRefresh: true, // 允许下拉刷新
    allowUploadImage: true // 允许上传图片
    showToolCallDetail: true, // 是否展示工具调用细节
    allowMultiConversation: true, // 是否展示会话列表，创建会话按钮
  }
}

获取云开发环境 ID

获取 Agent ID

大模型版本

hunyuan

模型版本	说明
hy3-preview	混元新一代模型

cloudbase

模型版本	说明
deepseek-v4-flash	推理模型，专为数学、代码生成和复杂逻辑推理任务设计
deepseek-v3-0324	相比 DeepSeek-V3 大幅提高了推理任务表现，增强了前端开发能力，升级了中文写作能力，优化了中文搜索能力