Docs Overview/
Chat/
UIKit/
Web/
Run Sample Demo/

Run Sample Demo

This article will introduce how to quickly implement a chat demo. You will complete the following key steps within 10 minutes and ultimately obtain a chat feature with a full user interface. Before you start, you can directly experience the chat below or Try On CodeSandbox.


Environment Requirements

Node.js version 16+
npm (use a version that matches the Node version in use)

Running Demo

Step 1: Download the demo source code

MacOS
Windows
# Run the code in CLI
git clone https://github.com/TencentCloud/chat-uikit-react
# Go to the project
cd chat-uikit-react/examples/sample-chat
# Install dependencies of the demo
npm install
# Run the code in CLI
git clone https://github.com/TencentCloud/chat-uikit-react
# Go to the project
cd chat-uikit-react/examples/sample-chat
# Install dependencies of the demo
npm install

Step 2: Configure the demo

1. Open the examples/sample-chat project and find the GenerateTestUserSig.js file in the path ./examples/sample-chat/src/debug/GenerateTestUserSig.js.
2. In the GenerateTestUserSig.js file, set SDKAPPID and SECRETKEY. Their values can be obtained in the Chat console. Click the target application tab to enter its configuration page.


3. Copy the key information and save it to the ./examples/sample-chat/src/debug/GenerateTestUserSig.js file.



Note:
This document mentions a method for generating UserSig by configuring a secret key in the client code. This method makes the secret key susceptible to decompilation and reverse engineering. Once your key is compromised, attackers can misappropriate your Tencent Cloud traffic. Therefore, this method is only suitable for locally running a demo and debugging features.
The correct way to generate UserSig is to integrate the UserSig computation code into your server and provide an API for the app. When UserSig is needed, your app should request a dynamic UserSig from the business server. For more information, see How to Generate a UserSig on the Server.

Step 3: Start the project

# Launch the project
npm run start

Step 4: Send your first message

Enter a message in the input box and press Enter to send.




Integrating chat-uikit-react

If you wish to integrate chat-uikit-react into your project, please go to Integration chat-uikit-react.

Contact Us

Join the Telegram technical discussion group or WhatsApp discussion group, enjoy the support of professional engineers, and solve your difficulties.