Run Demo

This document will describe how to quickly realize a chat feature demo. You will complete the following key steps within 10 minutes and finally obtain a chat feature with a comprehensive user interface. Before that, you can directly try the chat feature below or Experience Sandbox.


Environment Requirements

Node.js version ≥ 18

Running the Demo

Step 1: Download Source Code

// Run the code in terminal and clone project from github
git clone https://github.com/TencentCloud/chat-uikit-react

// Go to the project
cd chat-uikit-react

// Install dependencies of the demo
npm install

Step 2: Configure Demo

Note:
To respect emoji design copyright, the Chat Demo/TUIKit project does not include large emoji element slicing. Before official commercial launch, please replace them with other emoji packs designed or owned by yourself. The default yellow face emoji pack shown below is owned by Tencent Cloud and available for paid licensing. If needed, submit a ticket to contact us for authorization.



1. Open the /src/pages/ChatGithub/index.tsx file, find the following code snippet, and fill in the login information.
export const loginInfo = {
// Your Application SDKAppID, number type
SDKAppID: 0,
// Your UserID, string type
userID: '',
// Your UserSig, string type
userSig: '',
}
2. The login information requires three parts: SDKAppID, userID, and userSig.
2.1 SDKAppID and userID can be obtained from the Chat Console. Click the target application card to enter its configuration page.


2.2 userSig is a security signature calculated based on both. To temporarily obtain userSig, go to the development tool userSig tool in the console.
Note:
The correct UserSig issuance method is to integrate the UserSig calculation code into your server and provide an App-oriented API. When UserSig is required, your App can initiate request to the business server to obtain dynamic UserSig. For more details, see UserSig generation by the server.

Procedure 3: Start a Startup Item

# Launch the project
npm run dev

Procedure 4: Send Your First Message

Enter your message in the input box, then press Enter to send.


Integrating Chat-Uikit-React

If you want to integrate chat-uikit-react into your project, go to Integrate chat-uikit-react.

Communication and Feedback

Join the Telegram Technical Exchange Group or WhatsApp communication group to enjoy support from professional engineers and solve your problems.