chat-uikit-react

About Tencent Cloud Chat

Tencent Cloud Chat provides globally interconnected chat APIs, multi-platform SDKs, and UIKit components to help you quickly bring messaging capabilities such as one-to-one chat, group chat, chat rooms, and system notifications to your applications and websites.

Global Compliance Certifications

🚀 Recommended: Use the More Efficient AI Integration Assistant

We offer you a brand-new way to integrate AI. Just briefly describe your needs, and it will automatically generate the integration code, significantly boosting development efficiency.

Click here to experience the AI Integration Assistant immediately

Integrating chat-uikit-react

This tutorial shows how you can build a chat application in just 10 minutes by integrating chat-uikit-react

Core Capabilities

- 1 Billion+ Monthly active users
- 550 Billion+ Daily peak messages
- 100,000+ Customers worldwid
- 99.99% Message success rate

Low-Code UIKit and Free Demo


👉🏻 Free Demo

Get Started

> In respect for the copyright of emoji designs, the Chat Demo/TUIKit project does not include large emoji element cutouts. Please replace them with your own designed or copyrighted emoji packs before the official commercial launch. The default QQ emojis are copyrighted by Tencent and do not support authorization. We ask for your understanding and to be aware of this.

$3

1. Log in to the Chat console.
2. Click Create Application, enter your app name, and click Create.
3. After creation, you can see the status, service version, SDKAppID, creation time, tag, and expiration time of the new app on the overview page of the console.

$3

1. Click the target app card to go to the basic configuration page of the app.
2. In the Basic info area, click Display key, and then copy and save the key information, which is SDKSecretKey.
3. Goto UserSig Tools to generate UserSig, you need to set the SDKAppID and SDKSecretKey, you will get the userSig.

$3

``

Please run the following code in the terminal.

$ git clone https://github.com/TencentCloud/chat-uikit-react

Go to the project

$ cd chat-uikit-react

Install dependencies of the demo and build chat-uikit-react

$ npm install
`

$3

1. Open the src/pages/ChatGithub/index.tsx file.
2. Set the loginInfo with the SDKAppID and userID and userSig obtained at Step 2.

$3

`
$ npm run dev
``

Send your first message

1. Run the demo in two seperate tab pages.
2. In the search box of the demo in the first tab page, search for the login ID of the demo in the second tab page.
3. Click on the user avatar to initiate a conversation.
4. Enter a message in the input box and press Enter to send it. Emoji/Image/Video/Document messages are supported.

Contact Us

Join a Tencent Cloud Chat developer group for Reliable technical support & Product details & Constant exchange of ideas.
- Telegram group (EN): join
- WhatsApp group (EN): join
- Telegram group (ZH): join
- WhatsApp group (ZH): join