npm package: @leyline/chat-uikit-react
Description: ## About Tencent Cloud Chat
Latest version: 0.1.1

# chat-uikit-react

## About Tencent Cloud Chat

[Tencent Cloud Chat](https://www.tencentcloud.com/products/im) 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
<table>
<tr>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/Vk2L735_1SOC.png" width=90 height=80 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/Mp5i133_2ISO%209001.png" width=88 height=90 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/AfnR546_4ISO%2027001.png" width=90 height=87 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/WQjf098_5ISO%2027017.png" width=90 height=87 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/aNQJ919_6ISO%2027018.png" width=90 height=86 /> </td>
</tr>
<tr>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/Rj5T795_7CSASTAR.png" width=90 height=90 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/BXNX111_8NIST%20CSF.png" width=90 height=84 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/dHEg621_9ISO%2027701.png" width=90 height=86 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/BLQI655_10ISO%2029151.png" width=90 height=86 /> </td>
<td> <img src="https://staticintl.cloudcachetci.com/cms/backend-cms/dHDE860_11BS10012.png" width=90 height=42 /> </td>
</tr>
</table>

## 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

![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/712468b756a111ee974d5254005f490f.png)
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/80785e9c56a111ee974d5254005f490f.png)

👉🏻 [Free Demo](https://web.sdk.qcloud.com/im/demo/intl/index.html)


## Get Started

### Step 1. Create an app

1. Log in to the [Chat console](https://console.tencentcloud.com/im).
2. Click `Create Application`, enter your app name, and click `Confirm`.
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/f016163c56a111ee94c3525400d793d0.png)
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.
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/2adc015456a211ee974d5254005f490f.png)

### Step 2. Obtain the SDKAppID and SECRETKEY
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 SECRETKEY.
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/696c6df756a211ee84f2525400494e51.png)

### Step 3. Download the source code and install dependencies
```
# Please run the following code in the terminal.
$ git clone https://github.com/TencentCloud/chat-uikit-react
$ cd chat-uikit-react
$ npm install && cd examples/sample-chat && npm install
```
### Step 4. Configure
1. Open the `examples/sample-chat` project and locate the `GenerateTestUserSig.js` file in `./examples/sample-chat/src/debug/GenerateTestUserSig.js`.
2. Set the `SDKAppID` and `SECRETKEY` obtained at Step 2.

### Step 5. Run the demo
```
$ cd examples/sample-chat
$ npm run start
```

## 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.
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/22dabb7156df11ee94c3525400d793d0.png)
3. Click on the user avatar to initiate a conversation.
![](https://web.sdk.qcloud.com/im/assets/4.png)
4. Enter a message in the input box and press **Enter** to send it. Emoji/Image/Video/Document messages are supported.
   ![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/059d7f4856e011eeabd75254005810a4.png)

## Contact Us
Join a Tencent Cloud Chat developer group for Reliable technical support & Product details & Constant exchange of ideas.
- Telegram group (EN): [join](https://t.me/+1doS9AUBmndhNGNl)
- WhatsApp group (EN): [join](https://chat.whatsapp.com/Gfbxk7rQBqc8Rz4pzzP27A)
- Telegram group (ZH): [join](https://t.me/tencent_imsdk)
- WhatsApp group (ZH): [join](https://chat.whatsapp.com/IVa11ZkVmKTEwSWsAzSyik)