Agent UI React Component

The Agent UI React component, built based on Tencent Cloud Chat UI and Tea component design specifications, helps developers quickly build AI chat interfaces in React applications.

Agent UI React component provides the following features:

• Integrate with CloudBase large model
• Integrate with CloudBase Agent

tip

Since the Agent UI React component depends on the Tencent Cloud Tea component library, it is currently compatible with React 17 and 18.

tip

Development environment requires Node.js >= v18

Demo

PC Size Display

H5 Mobile View

Quick Trial

Method 1: Access the CloudBase Agent UI Web React Online Application Example to experience directly.

Method 2: Download the React sample project to debug and experience locally.

Component Usage

1. Install Dependencies

// Install the CloudBase @cloudbase/js-sdk, which provides access to CloudBase basic resources and AI-related capabilities for the Web
npm i @cloudbase/js-sdk

// Install this component
npm i @cloudbase/agent-ui-react@1.0.0-beta.3

2. Import the Component

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

const tcb = cloudbase.init({
  // Replace with the actual CloudBase environment 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>
  );
}

where the structure of the agentConfig parameter is as follows:

Parameter Name	Allowed Values	Description
chatMode	'bot' or 'model'	When chatMode='bot', agentConfig.botId is required; when chatMode='model', modelConfig.modelProvider and modelConfig.quickResponseModel are required
showBotAvatar	boolean	Whether to display the avatar on the left side of the UI
agentConfig.botId	string	agent id, required when chatMode = 'bot'
agentConfig.allowUploadFile	boolean	Whether to display file upload in the interface
agentConfig.allowWebSearch	boolean	Allow the UI to display the web search configuration switch
agentConfig.allowPullRefresh	boolean	Allow click refresh
agentConfig.allowUploadImage	boolean	Allow image upload
agentConfig.allowMultiConversation	boolean	whether to display the conversation list and the create conversation button
agentConfig.showToolCallDetail	boolean	Whether to display tool call details
modelConfig.modelProvider	'hunyuan' or 'deepseek'	large model service provider
modelConfig.quickResponseModel	string	Specific model version. Refer to Large Model Versions

Enable the corresponding capability on CloudBase Platform

Document File Upload Instructions

• Size Limit: Maximum 10M per file
• Quantity Limit: Maximum 5 files per request
• File Type: pdf, txt, doc, docx, ppt, pptx, xls, xlsx, csv

Image File Upload Instructions

• Size Limit: Maximum 30MB per image
• Quantity Limit: Maximum 1 image per request

Example: Direct Connection Large Model Call

• Use deepseek series models

{
  "chatMode": "model", // bot indicates using agent, model indicates using large model
  "showBotAvatar": true, // Whether to display the avatar on the left side of the dialog box
  "modelConfig": {
    "modelProvider": "deepseek", // large model service provider
    "quickResponseModel": "deepseek-v3", // large model name supports deepseek-v3/deepseek-r1/deepseek-v3-0324
    "logo": "", // model avatar
    "welcomeMsg": "welcome message" // model welcome message
  }
}

• Use hunyuan series models

data: {
  chatMode: "model", // bot indicates using agent, model indicates using large model
  showBotAvatar: true, // Whether to display the avatar on the left side of the dialog box
  modelConfig: {
    modelProvider: "hunyuan-exp", // large model service provider
    quickResponseModel: "hunyuan-lite", // large model name supports hunyuan-lite/hunyuan-turbos-latest/hunyuan-t1
    logo: "", // model avatar
    welcomeMsg: "welcome message", // model welcome message
  },
}

Agent Invocation Example:

{
  chatMode: "bot", // bot indicates using agent, model indicates using large model
  showBotAvatar: true, // Whether to display the avatar on the left side of the dialog box
  agentConfig: {
    botId: "your botid", // agent id,
    allowWebSearch: true, // Allow the client to enable web search
    allowUploadFile: true, // Allow file upload
    allowPullRefresh: true, // Allow pull-to-refresh
    allowUploadImage: true // Allow image upload 
    showToolCallDetail: true, // Whether to display tool call details
    allowMultiConversation: true, // whether to display the conversation list and the create conversation button
  }
}

Get the CloudBase environment ID

Get Agent ID

Large Model Version

hunyuan

Model Version	Description
hunyuan-lite	Possesses powerful Chinese content generation capabilities, logical reasoning abilities in complex contexts, and reliable task execution capabilities
hunyuan-turbos-latest	Hunyuan Turbo S achieves "response in seconds", outputting answers faster with doubled response speed and 44% reduced first-character latency. Supports 24k max input and 8k max output. Features upgraded pre-trained model with increased training tokens; enhanced reasoning capabilities in math/logic/coding; improved Chinese/English experience including text generation, comprehension, Q&A, and casual conversation
hunyuan-t1	Tencent's first deep reasoning model Hunyuan-T1. This model is based on the industry's first ultra-large-scale Hybrid-Transformer-Mamba MoE large model TurboS fast-thinking base released in early March, expanding reasoning capabilities, featuring superior decoding speed, and further aligning with human preferences.

deepseek

Model Version	Description
deepseek-v3	Focuses on general tasks such as natural language processing, knowledge question answering, and content creation
deepseek-r1	Reasoning model designed specifically for mathematics, code generation, and complex logical reasoning tasks
deepseek-v3-0324	Compared to DeepSeek-V3, it significantly improves performance in reasoning tasks, enhances front-end development capabilities, upgrades Chinese writing capabilities, and optimizes Chinese search capabilities