跳到主要内容

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.2

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 大幅提高了推理任务表现,增强了前端开发能力,升级了中文写作能力,优化了中文搜索能力