UIKit
Guideline for Beginners
Console Guide
- Creating and Upgrading an Application
- Basic Configuration
- Feature Configuration
- Account Management
- Group Management
- Webhook Configuration
Product Introduction
- Message Management
  - One-to-One Message
  - Message Storage
  - Offline Push
  - Group Message
  - Message Formats
- Account System
  - Login Authentication
  - Online Status Management
- Group Related
  - Group System
  - Group Management
- User Profile and Relationship Chain
  - Profile Management
  - Relationship Chain Management
Purchase Guide
- Billing Overview
- Pricing
Error Codes
React

Introduction to chat-uikit-react
chat-uikit-react is a react UI component library based on Tencent Cloud Chat SDK. It provides some common UI components, including features for conversation, chat, and group. Based on the well-designed UI components, you can quickly build elegant, reliable, and scalable Chat applications. The interface of chat-uikit-react is shown in the figure below:
You can experience it online  web & H5 demo:
﻿Web Demo﻿
﻿H5 Demo﻿
TUIKit Web interface is shown in the following figure:
﻿
TUIKit H5 interface is shown in the following figure:
﻿
Environment Requirements
React v18.0 (Version 17.x is not supported.)
TypeScript
Node (The Node version should not be earlier than 12.13.0 and not later than 17.0.0. The official LTS version 16.17.0 of Node.js is recommended.)
npm (Use a version that matches the Node version in use.)
chat-uikit-react Integration
Step 1: Create a project
Create a new React project. You can choose whether to use a TS template or not.
npx create-react-app sample-chat --template typescript
After the project is created, go to the project directory.
cd sample-chat
Step 2: Download the chat-uikit-react component
Use npm to download chat-uikit-react and use it in your project. Additionally, related open source code is also provided on GitHub, which you can use as a basis to develop your own component library.
npm install @tencentcloud/chat-uikit-react
Step 3: Include the chat-uikit-react component
Note:
In the following code, SDKAppID, userID, and userSig are not input. Acquire the necessary information in Step 4 and replace it accordingly.
npm  Integration Method
Source Code Integration Method
Replace the content in App.tsx, or you can create a new component for inclusion.
import React, { useEffect, useState } from 'react';
import { ChatSDK } from '@tencentcloud/chat';
import { TUIKit } from '@tencentcloud/chat-uikit-react';
import { TUILogin } from '@tencentcloud/tui-core';
import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';
﻿
const config = {
  SDKAppID: 0, // Your SDKAppID, Get it from Step 4
  userID: '', // Login UserID, Get it from Step 5
  userSig: '', // Your userSig, Get it from Step 5
}
﻿
export default function SampleChat() {
  const init = () => {
    TUILogin.login({
    ...config,
    useUploadPlugin: true
    }).then(() => {
    }).catch(() => {});
  }
  useEffect(() => {
    init();
  }, [])
﻿
  // language support en or zh
  return (
    <TUIKit language={'en'}></TUIKit>   
  )
}
1. Copy UIKit to the src directory of your own project:
macOS
Windows
mkdir -p ./src/TUIKit && rsync -av  ./node_modules/@tencentcloud/chat-uikit-react/ ./src/TUIKit
xcopy .\node_modules\@tencentcloud\chat-uikit-react .\src\TUIKit /i /e
2.  Replace the content in App.tsx, or you can create a new component for inclusion.
import React, { useEffect, useState } from 'react';
import { ChatSDK } from '@tencentcloud/chat';
import { TUILogin } from '@tencentcloud/tui-core';
import { TUIKit } from './TUIKit/index';
﻿
const config = {
  SDKAppID: 0, // Your SDKAppID, Get it from Step 4
  userID: '', // Login UserID, Get it from Step 5
  userSig: '', // Your userSig, Get it from Step 5
}
﻿
export default function SampleChat() {
  const init = () => {
    TUILogin.login({
    ...config,
    useUploadPlugin: true
    }).then(() => {
    }).catch(() => {});
  }
  useEffect(() => {
    init();
  }, [])
﻿
  // language support en or zh
  return (
    <TUIKit language={'en'}></TUIKit>   
  )
}
Step 4: Create an application
1. Log in to the Chat console.
2. Click Create Application, enter your application name, and then click Create.
﻿
3. After creation is complete, you can view the status, service version, SDKAppID, creation time, tag, and expiration time of the new application on the console overview page.
﻿
Step 5: Obtain userID and userSig
userID 
Click to enter the Application you created above. You will see the Chat product entrance in the left sidebar. Click to enter.
After entering the Chat Product subpage, click on Users to go to the User Management Page.
Click Create account, a form for creating account information will pop up. If you are just a regular member, we recommend you choose the General type.
To enhance your experience with message sending and receiving features, we recommend creating two userIDs.
﻿
﻿
﻿
userSig can be generated in real-time using the development tools provided by the console. To access the development tools, click Chat Console > Development Tools > UserSig Tools > Signature (UserSig) Generator.
﻿
﻿
﻿
Step 6: Start the project
Replace SDKAppID, userID, and userSig in App.tsx, and then run the following command:
 npm run start
Note:
1. Ensure that SDKAppID, userID, and userSig are successfully replaced in Step 3, as the failure to do so may cause the project to operate abnormally.
2. A userID corresponds to a userSig. For more information, see Generating UserSig.
3. If the project fails to start, please check whether the environment requirements are met.
Step 7: Send your first message
1. After starting the project, click + on the left to start a one-to-one chat.
2. Enter the userID created in Step 5 in the search box, and then press Enter.
3. Enter your message in the input box and press Enter to send.
﻿
﻿
﻿
FAQs
What is UserSig?
A UserSig is a cipher with which you can log in to Chat. It is the ciphertext generated by encrypting information such as userID.
How can I generate a UserSig?
The issuance method for UserSig involves integrating the computation code of UserSig into your server, and providing an API oriented towards your project. When UserSig is needed, your project sends a request to the business server to obtain the dynamic UserSig. For more information, see How to Generate a UserSig on the Server.
Note:
The sample code provided in this document retrieves the UserSig by embedding the secret key in the client code. This approach makes the secret key highly susceptible to decompilation and reverse engineering. Once your key is compromised, attackers can misappropriate your Tencent Cloud traffic. Hence, this approach is exclusively recommended for debugging features locally. For the correct issuance of UserSig, please refer to the previous sections.
Contact Us
Join the Telegram technical discussion group or WhatsApp discussion group, enjoy the support of professional engineers, and solve your difficulties.
Documentation
Related to UIKit:
﻿chat-uikit-react npm﻿
﻿Demo Source Code and Running Example﻿
To enable more features, please refer to the ChatEngine API documentation:
﻿chat-uikit-engine npm﻿
﻿chat-uikit-engine API documentation﻿
Introduction to chat-uikit-react
Environment Requirements
chat-uikit-react Integration
FAQs
Contact Us
Documentation