Run Demo

This document introduces how to quickly run through the Chat Demo to experience sending text, voice, and video messages.
Quick Experience
﻿
Before local integration, we built a Demo you can try online.
Prerequisites
Enabling a Service
1. Log in to the IM console, go to the application management page, and click Create New Application. If you have an existing application, you can omit the application creation process.
﻿
2. On the application management page, obtain the SDKAppID and key information from the SDKAppID column.
﻿
Note:
View key info requires identity verification.
Key information is sensitive information. To prevent misappropriation, keep it safe and guard against leakage.
3. ﻿Go to the user management page, create 2–3 test accounts for experience in C2C chat and group chat capacities.
﻿
4. userSig info. Click IM console > Development tool > userSig tool, fill in the created userID to generate userSi
Development Environment Requirement
React v18.0
TypeScript
Node.js >= v18 (recommended: current stable version LTS v22.x)
npm (version must match Node.js version)
Git
Operation Steps
Get Demo
# Run the code in CLI
$ git clone https://github.com/Tencent-RTC/TUIKit_React.git
# Go to the project
$ cd ./TUIKit_React/demos/rtcube-vite-react
# Install dependencies of the demo and build chat-uikit-react
$ npm install
Run Demo
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.
Note:
To respect the copyright of emoji designs, the Chat Demo/TUIKit project does not include cutouts of large emoji elements. Please replace them with your own designs or other emoji packs for which you hold the copyright before officially launching for commercial use. The default smiley face emoji pack shown below is copyrighted by Tencent RTC, you can upgrade to Chat Pro Plus Edition and Enterprise Edition to use it for free.
﻿
﻿
﻿
# Launch the project
npm run dev
After running the program, click the "Experience Chat" card to enter the login page. Enter the obtained SDKAppID, userID, and secretKey to experience the chat function.
Experience one-on-one chat
﻿
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.