跳到主要内容

Agent UI React 组件

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

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

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

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

演示效果​

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: 'deepseek',
          quickResponseModel: 'deepseek-v3',
        }}
      />
    </div>
  );
}

其中 agentConfig 参数结构如下：

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

云开发平台开启对应能力

文档文件上传说明

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

图片文件上传说明

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

直连大模型调用示例:

  • 使用 deepseek 系列模型
{
  "chatMode": "model", // bot 表示使用agent，model 表示使用大模型
  "showBotAvatar": true, // 是否在对话框左侧显示头像
  "modelConfig": {
    "modelProvider": "deepseek", // 大模型服务厂商
    "quickResponseModel": "deepseek-v3", //大模型名称 支持 deepseek-v3/deepseek-r1/deepseek-v3-0324
    "logo": "", // model 头像
    "welcomeMsg": "欢迎语" // model 欢迎语
  }
}
  • 使用 hunyuan 系列模型
data: {
  chatMode: "model", // bot 表示使用agent，model 表示使用大模型
  showBotAvatar: true, // 是否在对话框左侧显示头像
  modelConfig: {
    modelProvider: "hunyuan-exp", // 大模型服务厂商
    quickResponseModel: "hunyuan-lite", //大模型名称 支持 hunyuan-lite/hunyuan-turbos-latest/hunyuan-t1
    logo: "", // model 头像
    welcomeMsg: "欢迎语", // model 欢迎语
  },
}

使用 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​

模型版本说明
hunyuan-lite具备强大的中文创作能力，复杂语境下的逻辑推理能力，以及可靠的任务执行能力
hunyuan-turbos-latest混元 Turbo S 能够实现“秒回”，更快速输出答案，吐字速度提升一倍，首字时延降低44%。最大输入24k，最大输出8k。预训练底座训练token 数升级；数学/逻辑/代码等思考能力提升；中英文通用体验效果提升，包括文本创作、文本理解、知识问答、闲聊等
hunyuan-t1腾讯首个深度推理模型 Hunyuan-T1，该模型基于3月初发布的业界首个超大规模 Hybrid-Transformer-Mamba MoE 大模型 TurboS 快思考基座，扩展了推理能力，超强解码速度，进一步对齐人类偏好。

deepseek​

模型版本说明
deepseek-v3专注于自然语言处理、知识问答、内容创作等通用任务
deepseek-r1推理模型，专为数学、代码生成和复杂逻辑推理任务设计
deepseek-v3-0324相比 DeepSeek-V3 大幅提高了推理任务表现，增强了前端开发能力，升级了中文写作能力，优化了中文搜索能力