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必填 |
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 | 'hunyuan' 或 'deepseek' | 大模型服务商 |
modelConfig.quickResponseModel | string | 具体的模型版本, 参考大模型版本 |
文件上传说明
- 大小限制:单文件不超过 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 大幅提高了推理任务表现,增强了前端开发能力,升级了中文写作能力,优化了中文搜索能力 |