@tencent-rtc/mcp 1.2.9 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencent-rtc/mcp",
-  "version": "1.2.9",
+  "version": "1.3.1",
   "description": "Tencent Cloud MCP Server for SDK",
   "type": "module",
   "main": "index.js",
@@ -12,7 +12,7 @@
   "dependencies": {
     "@grpc/grpc-js": "^1.5.1",
     "@grpc/proto-loader": "^0.6.6",
-    "@modelcontextprotocol/sdk": "^1.10.1",
+    "@modelcontextprotocol/sdk": "1.10.1",
     "@tencentcloud/sdk-mcp": "^1.0.3",
     "@types/express": "^5.0.1",
     "@types/hashring": "^3.2.1",

package/resource/doc/chatuikit/faq/common/server.md

@@ -0,0 +1,44 @@
+---
+product: 'Chat'
+tech_stack: 'server'
+framework: 'common'
+title: 'Common Issues Knowledge Base'
+keywords: ['console', 'server-side userSig generation', 'restapi', 'pre-callback', 'post-callback', 'nodejs/go/java/python and other server-side language userSig generation example code']
+---
+
+# Common Issues Knowledge Base
+
+## UserSig Solutions
+
+### Q: How to generate userSig on the server side?
+**A:** For specific methods of generating userSig on the server side, please refer to: https://trtc.io/document/34385?product=chat&menulabel=uikit&platform=react. The documentation provides solutions for multiple server-side languages.
+
+### Q: What's the difference in message format between pre-send and post-send callbacks in Chat? How to distinguish system messages from user messages?
+**A:** 
+1. Group message pre-send callback content does not include MsgSeq, MsgTime and other information. For details, please refer to the following documentation:
+- One-to-one pre-send callback: https://trtc.io/document/34364?product=chat&menulabel=uikit&platform=react
+- One-to-one post-send callback: https://trtc.io/document/34365?product=chat&menulabel=uikit&platform=react
+- Group pre-send callback: https://trtc.io/document/34374?product=chat&menulabel=uikit&platform=react
+- Group post-send callback: https://trtc.io/document/34375?product=chat&menulabel=uikit&platform=react
+2. Normal message format: https://trtc.io/document/33527?product=chat&menulabel=uikit&platform=react
+
+### Q: What are group message priorities and group message frequency controls?
+**A:** Group messages are divided into 3 priorities (`High`, `Normal`, `Low`). If messages in a group exceed the frequency limit, the backend will prioritize delivering high-priority messages. Therefore, users should choose an appropriate priority based on the importance of the message. Total message frequency control refers to the limit on the maximum number of messages that can be sent per second across all endpoints for a single group. The default value is 40 messages/second, using average frequency limiting per second. When the number of messages exceeds the limit, the backend prioritizes delivering messages with relatively higher priority, and messages with the same priority are randomly ordered.
+
+### Q: How to intercept messages sent by users?
+**A:** Business servers can intercept through pre-send callbacks. For specific documentation, please refer to:
+- One-to-one pre-send callback: https://trtc.io/document/34364?product=chat&menulabel=uikit&platform=react
+- Group pre-send callback: https://trtc.io/document/34375?product=chat&menulabel=uikit&platform=react
+
+### Q: How to delete and manage accounts?
+**A:** REST API can be used to delete, import, and query accounts. For specific documentation, please refer to:
+- Delete account: https://trtc.io/document/34955?product=chat&menulabel=uikit&platform=react
+- Import single account: https://trtc.io/document/34953?product=chat&menulabel=uikit&platform=react
+- Import multiple accounts: https://trtc.io/document/34954?product=chat&menulabel=uikit&platform=react
+- Query account: https://trtc.io/document/34956?product=chat&menulabel=uikit&platform=react
+
+### Q: How to handle when the number of accounts exceeds the limit?
+**A:** When importing accounts, if the number of accounts exceeds the limit and you need to create more than 100 accounts, you need to upgrade your application to the Professional Edition. For specific operation instructions, please refer to: https://trtc.io/document/55096.
+
+### Q: How to delete conversations on the server side?
+**A:** Server-side conversation deletion can be done using REST API. For specific documentation, please refer to: https://trtc.io/document/34348?product=chat&menulabel=uikit&platform=react.

package/resource/doc/chatuikit/faq/web_sdk/faq.md

@@ -103,3 +103,60 @@ promise.then(function(imResponse) {
 
 ### Q: How to send file messages with Web SDK?
 **A:** Use [createFileMessage](https://trtc.io/document/47993?product=chat&menulabel=core%20sdk&platform=javascript#creating-a-file-message) to create a file message instance, then use [sendMessage](https://trtc.io/document/47993?product=chat&menulabel=core%20sdk&platform=javascript#sending-a-message) to send the file message.
+
+### Q: How to implement user online status feature in Chat?
+**A:** 
+1. Chat SDK provides **user status query, subscription, unSubscription APIs and status change event notifications**. For details, please refer to: https://trtc.io/document/49561.
+2. For server-side **online status change callback**, please refer to: https://trtc.io/document/34357?product=chat&menulabel=core%20sdk&platform=javascript.
+
+### Q: How to implement message list feature without UI in Chat SDK?
+**A:** To implement message list feature without UI, you need to combine SDK's `sendMessage`, `getMessageList` APIs and `MESSAGE_RECEIVED` event.
+
+### Q: How to implement @all and @someone features without UI in Chat SDK?
+**A:** SDK provides `createTextAtMessage` API for implementing @ mentions. For details, please refer to: https://trtc.io/document/47993?product=chat&menulabel=core%20sdk&platform=javascript#creating-an-.40-message.
+
+### Q: How to implement search functionality in Chat SDK?
+**A:** SDK provides **cloud search** capabilities, supporting message search, user search, group search, and group member search. API details can be found in the following links:
+- Search messages: https://trtc.io/document/67677?product=chat&menulabel=core%20sdk&platform=javascript
+- Search users: https://trtc.io/document/67679?product=chat&menulabel=core%20sdk&platform=javascript
+- Search groups: https://trtc.io/document/67681?product=chat&menulabel=core%20sdk&platform=javascript
+- Search group members: https://trtc.io/document/67683?product=chat&menulabel=core%20sdk&platform=javascript
+
+### Q: How to create groups, add group members, and set administrators in Chat SDK?
+**A:** For specific information about creating groups, adding group members, and setting administrators in SDK, please refer to the documentation below:
+- Create group: https://trtc.io/document/48465?product=chat&menulabel=core%20sdk&platform=javascript
+- Add group members: https://trtc.io/document/48180?product=chat&menulabel=core%20sdk&platform=javascript#49b805dd-4898-44a3-89a4-3b201f839fce
+- Modify group member role (can set administrator): https://trtc.io/document/48180?product=chat&menulabel=core%20sdk&platform=javascript#f35fb570-648c-4b97-99a1-cef5b81b1284
+
+### Q: How to create a C2C one-to-one conversation?
+**A:** The UI layer can create a one-to-one conversation by querying conversation profile using `getConversationProfile`. The `conversationID` format is: `C2C${userID}`. After SDK successfully creates the conversation, it will notify the conversation list update through the `CONVERSATION_LIST_UPDATE` event.
+
+### Q: How to get total unread message count and listen to real-time changes?
+**A:** For detailed information about total unread message count, please refer to: https://trtc.io/document/48319?product=chat&menulabel=core%20sdk&platform=javascript.
+1. To get total unread message count, call `getTotalUnreadMessageCount` API.
+2. To listen for total unread count changes, monitor the `TOTAL_UNREAD_MESSAGE_COUNT_UPDATED` event.
+Note: During initialization, it's recommended to listen to the `TOTAL_UNREAD_MESSAGE_COUNT_UPDATED` event to get the total unread message count, because the calculation of total unread count depends on the synchronization of cloud conversation list. Calling `getTotalUnreadMessageCount` directly after successful login may return 0 because the cloud conversation list hasn't finished synchronizing yet.
+
+### Q: How to get original and thumbnail images in SDK image messages?
+**A:** For image messages, high-resolution original image (type = 0), thumbnail (type = 1), and large image (type = 2) can be obtained. For details, please refer to the Message structure documentation: https://trtc.io/document/47990?product=chat&menulabel=core%20sdk&platform=javascript#893c75e0-e592-475a-bd9a-0c4ec30114b9.
+
+### Q: How to handle message sending failures in SDK?
+**A:** When SDK message sending fails, the `sendMessage` interface will throw an error, which needs to be caught using `sendMessage().catch()`. The error contains the complete message structure, where message.status is `fail`. You can resend the failed message using `resendMessage`.
+
+### Q: In weak network environments, how does SDK ensure WebSocket stability and reconnection?
+**A:** In weak network environments, if WebSocket disconnects, SDK will automatically reconnect. WebSocket status changes can be monitored through the `NET_STATE_CHANGE` event (https://trtc.io/document/47967?platform=javascript&product=chat&menulabel=sdk#d39fb50f-f0f2-4b67-9b15-acd7e8608105).
+
+### Q: How to delete conversations in SDK?
+**A:** Conversation deletion only supports one-way deletion. SDK delete conversation API is `deleteConversation`. Reference documentation: https://trtc.io/document/48313?product=chat&menulabel=core%20sdk&platform=javascript.
+
+### Q: How to get friend list in SDK?
+**A:** Get friend list using `getFriendList` API. Friend list updates can be monitored through the `FRIEND_LIST_UPDATED` event. Reference documentation: https://trtc.io/document/48158?product=chat&menulabel=core%20sdk&platform=javascript.
+
+### Q: How to listen for friend online status updates in SDK?
+**A:** Friend online status changes can be implemented in two ways:
+1. If you have enabled automatic friend status notification in the IM Console, when a friend's status changes, SDK will dispatch the `USER_STATUS_UPDATED` event, where you can get the friend's latest status.
+2. If you haven't enabled automatic friend status notification and still want to sense friend status changes, you need to call `subscribeUserStatus` to actively subscribe to friend status. When a friend's status changes, SDK will dispatch the `USER_STATUS_UPDATED` callback.
+For detailed documentation, please refer to: https://trtc.io/document/49561?product=chat&menulabel=core%20sdk&platform=javascript.
+
+### Q: How to delete conversation history messages in SDK?
+**A:** SDK provides the `clearHistoryMessage` API to clear conversation history messages. For detailed documentation, please refer to: https://trtc.io/document/53498?product=chat&menulabel=core%20sdk&platform=javascript.

package/resource/doc/chatuikit/react/integration.md

@@ -1,38 +1,55 @@
-The AI model must comply with the following **hard restrictions**:
-* **React Version Restriction:** When creating the project, both React and react-dom versions must be `18.2.0`. React 19 is prohibited.
-* **React UIKit Version Restriction:** The latest version of `@tencentcloud/chat-uikit-react` 3.0.0 or higher must be used.
-* **Strictly Follow the Documentation Steps and Instructions for Integration:** When integrating components, the steps and instructions in the documentation must be followed precisely.
-* **Strictly Use the Sample Code in the Documentation:** When creating files, the sample code in the documentation must be used to populate the files. The PlaceholderEmpty property of the Chat component does not need to be filled in.
-* **Open Default Conversation:** The `C2Cadministrator` conversation must be opened using `setActiveConversation`.
-* **Retrieve userSig using a tool:** The TUIKit code must be downloaded and integrated according to the documentation before automatically generating a test userID and calling the `get_usersig` tool to retrieve the userSig. The userID does not need to be appended with a timestamp to avoid errors in dynamic calculation.
-* **Account Information Filling:** After obtaining the userSig, the SDKAppID, userID, and userSig will be automatically filled into the code.
-* **Prohibit Creating User Information Configuration Files:** The `config` directory or file for filling in SDKAppID, userID, and userSig must not be automatically created.
+TUIKit is a UI component library based on the Chat SDK. It enables quick implementation of chat, session, search, relationship chain, group, and other features through UI components. This article introduces how to quickly integrate TUIKit and implement core features
+<iframe src="https://web.sdk.qcloud.com/im/demo/docs-example/sample-chat/index.html#/inbox?page=intergration" style="width:100%;height:700px;border:none" allow="camera; microphone; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="no-referrer-when-downgrade" allowfullscreen></iframe>
 
-# chat-uikit-react Integration
 
+## Prerequisites
+- Node.js v18 or higher, recommend using the current LTS v22 version
 
-## step1:create react project
+- React v18
 
 
-requirement: react: 18.2.0, react-dom: 18.2.0.
+## Create a project
 
+Create a new React project named **chat-app** (select **React 18** during project creation and use the TypeScript Template), and complete project initialization as prompted by the scaffold.
 
-you can use vite or rsbuild to create a react project.
 
+【shell】
+``` bash
+npm create rsbuild@latest
+```
+
+## Installing and Importing Components
+
+### Step 1: Dependency Installation
 
-## step2: install chat-uikit-react
+Download [chat-uikit-react](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react) via npm and use it in the project.
 
 
-use npm or pnpm to install @tencentcloud/chat-uikit-react
+【shell】
+``` bash
+npm i @tencentcloud/chat-uikit-react
+```
+
+### Step 2: Introducing the chat uikit react component
 
+> **Note:**
+> 
+> - The following code does not include `SDKAppID`, `userID`, and `UserSig`. You need to replace them with the relevant information obtained in [Step 4](https://write.woa.com/document/108053210129276928).
+> - To respect the copyright of emoji designs, the Chat Demo/TUIKit project does not include large emoji graphics. 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](https://console.trtc.io/subscription/buy/chat?packType=pro) to use it for free.
 
-## step3: add chat-uikit-react to your project
+> ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027202808/a7c853cf981a11ef834b525400f69702.png)
+> 
 
 
-example code
+Copy the following `App.tsx` code and replace the original content in `App.tsx`.
 
+Copy the following `App.css` code and replace the `App.css` style file in the same directory.
 
-```tsx
+
+
+
+【App.tsx】
+``` typescript
 import {
   UIKitProvider,
   useLoginState,
@@ -42,54 +59,418 @@ import {
   ChatHeader,
   MessageList,
   MessageInput,
+  ContactList,
+  ContactInfo,
+  useUIKit,
   useConversationListState,
 } from "@tencentcloud/chat-uikit-react";
+import { useEffect, useState } from "react";
+import './App.css';
 
-function ChatApp() {
-  const { setActiveConversation } = useConversationListState();
-  
-  useEffect(() => {
-    // open default conversation
-    setActiveConversation('C2Cadministrator');
-  }, [setActiveConversation]);
-
+function App() {
+  // Language support en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
+  // Theme supports light(default) / dark
   return (
-    <div style={{ height: '100vh', width: '100vw', display: 'flex', flexDirection: 'row' }}>
-      <ConversationList style={{ minWidth: '300px', maxWidth: '350px' }}/>
-      <Chat PlaceholderEmpty=''>
-        <ChatHeader />
-        <MessageList />
-        <MessageInput />
-      </Chat>
-    </div>
+    <UIKitProvider theme={'light'} language={'en-US'}>
+      <ChatApp />
+    </UIKitProvider>
   );
 }
 
-
-function App() {
-  const userID = '';        // TODO: Replace with your userID
-  const SDKAppID = 0;        // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number)
-  const userSig = '';   // TODO: Replace with your userSig
+function ChatApp() {
+  const [activeTab, setActiveTab] = useState('chats');
   
+  const { language } = useUIKit();
+  
+const texts = language === 'zh-CN'
+    ? { chats: '会话', contacts: '联系人', emptyTitle: '暂无会话', emptySub: '选择一个会话开始聊天', error: '请检查 SDKAppID, userID, userSig, 通过开发人员工具(F12)查看具体的错误信息', loading: '登录中...' }
+    : { chats: 'Chats', contacts: 'Contacts', emptyTitle: 'No conversation', emptySub: 'Select a conversation to start chatting', error: 'Please check the SDKAppID, userID, and userSig. View the specific error information through the developer tools (F12).', loading: 'Logging in...'};
+
+
   const { status } = useLoginState({
-    SDKAppID,
-    userID,
-    userSig,
+    SDKAppID: 0, // type: number
+    userID: '',  // type: string
+    userSig: '', // type: string
   })
+  const { setActiveConversation } = useConversationListState();
+
+  useEffect(() => {
+    async function init() {
+      // You can switch to another created userID
+      const userID = 'administrator';
+      const conversationID = `C2C${userID}`;
+      setActiveConversation(conversationID);
+    }
 
+    if (status === LoginStatus.SUCCESS) {
+      init();
+    }
+  }, [status]);
+
+  if (status === LoginStatus.ERROR) {
+    return (
+      <div className="loading-container">
+        <div className="loading-spinner"></div>
+        <div className="loading-text">{texts.error}</div>
+      </div>
+    )
+  }
 
   if (status !== LoginStatus.SUCCESS) {
-    return <div>Loading...</div>
+    return (
+      <div className="loading-container">
+        <div className="loading-spinner"></div>
+        <div className="loading-text">{texts.loading}</div>
+      </div>
+    )
   }
-  
-  // Language support zh-CN(default) / en-US / ja-JP / ko-KR / zh-TW
-  // Theme support light(default) / dark
+
   return (
-    <UIKitProvider language='zh-CN' theme='light'>
-      <ChatApp />
-    </UIKitProvider>
+    <div className="chat-app">
+      <ul className="vertical-tabs">
+        <li 
+          className={`tab-item ${activeTab === 'chats' ? 'active' : ''}`}
+          onClick={() => {setActiveTab('chats')}}
+        >
+          {texts.chats}
+        </li>
+        <li 
+          className={`tab-item ${activeTab === 'contacts' ? 'active' : ''}`}
+          onClick={() => {setActiveTab('contacts')}}
+        >
+          {texts.contacts}
+        </li>
+      </ul>
+      {
+        activeTab === 'chats' && (
+          <>
+            <ConversationList style={{ flex: '0 0 300px'}}/>
+            <Chat
+              className="chat-box"
+              PlaceholderEmpty={
+                <div className="empty-chat">
+                  <div className="empty-icon">💬</div>
+                  <div className="empty-title">{texts.emptyTitle}</div>
+                  <div className="empty-subtitle">{texts.emptySub}</div>
+                </div>
+              }
+            >
+              <ChatHeader />
+              <MessageList />
+              <MessageInput />
+            </Chat>
+          </>
+        )
+      }
+      {
+        activeTab === 'contacts' && (
+          <>
+            <ContactList style={{ flex: '0 0 300px'}}/>
+            <ContactInfo
+              style={{ flex: '1'}}
+              onSendMessage={() => {setActiveTab('chats')}}
+              onEnterGroup={() => {setActiveTab('chats')}}
+            />
+          </>
+        )
+      }
+    </div>
   );
 }
 
 export default App;
 ```
+
+
+【App.css】
+``` css
+body {
+  margin: 0;
+  padding: 20px;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+.chat-app {
+  height: calc(100vh - 40px);
+  max-width: 1400px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
+              0 0 0 1px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+}
+
+.vertical-tabs {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100px;
+  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
+  border-right: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.tab-item {
+  padding: 16px 20px;
+  cursor: pointer;
+  background: transparent;
+  color: #495057;
+  font-size: 14px;
+  text-align: center;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+
+.tab-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 0;
+  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+  border-radius: 0 3px 3px 0;
+  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tab-item:hover {
+  background: rgba(102, 126, 234, 0.08);
+  color: #667eea;
+}
+
+.tab-item.active {
+  background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, rgba(102, 126, 234, 0.05) 100%);
+  color: #667eea;
+}
+
+.tab-item.active::before {
+  height: 60%;
+}
+
+.chat-box {
+  flex: 1;
+  border-left: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.empty-chat {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #adb5bd;
+  gap: 12px;
+  text-align: center;
+  border-left: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.empty-icon {
+  font-size: 64px;
+  opacity: 0.3;
+  animation: float 3s ease-in-out infinite;
+}
+
+.empty-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #6c757d;
+}
+
+.empty-subtitle {
+  font-size: 14px;
+  color: #868e96;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  gap: 24px;
+}
+
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid rgba(255, 255, 255, 0.2);
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.loading-text {
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+```
+
+### Step 3: Obtain SDKAppID, UserID and UserSig
+
+In the previously copied `App.tsx` code, the login authentication information is empty. You need to fill in your Tencent Cloud application authentication information in the `useLoginState hook`, as shown below:
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >Parameter</td>
+
+<td rowspan="1" colSpan="1" >Type</td>
+
+<td rowspan="1" colSpan="1" >Note</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >userID</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >Unique identifier of the user, defined by you, it is allowed to contain only upper and lower case letters (a-z, A-Z), numbers (0-9), underscores, and hyphens.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >SDKAppID</td>
+
+<td rowspan="1" colSpan="1" >Number</td>
+
+<td rowspan="1" colSpan="1" >The unique identifier for the audio and video application created in the [Tencent RTC Console](https://console.trtc.io/).</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >SDKSecretKey</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >The SDKSecretKey of the audio and video application created in the [Tencent RTC Console](https://console.trtc.io/).</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >userSig</td>
+
+<td rowspan="1" colSpan="1" >String</td>
+
+<td rowspan="1" colSpan="1" >A security protection signature used for user log in authentication to confirm the user's identity and prevent malicious attackers from stealing your cloud service usage rights.</td>
+</tr>
+</table>
+
+
+> **Explanation of UserSig：**
+> 
+
+> **Development environment**: If you are running a demo locally and developing or debugging, you can use the `genTestUserSig` (Refer to Step 3.2) function in the debug file to generate a 'userSig'. In this method, SDKSecretKey is vulnerable to decompilation and reverse engineering. Once your key is leaked, attackers can steal your Tencent Cloud traffic.
+> 
+
+> **Production environment**: If your project is going live, please use the [Server-side Generation of UserSig](https://trtc.io/document/34385) method.
+> 
+
+1. Log in to  [Chat Console](https://console.trtc.io/) .
+
+2. Click  **Create Application**, enter your application name, then  click  **Create**.
+
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027119864/cdc5fdb411ec11efa2935254005ac0ca.png)
+
+3. After creation, you can view the Application Status, service version, SDKAppID, creation time, Tag, and expiration time of the new application on the console overview page.
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/c73f215c7cf411f0914f52540099c741.png)
+
+4. [Go to the user management page](https://console.trtc.io/chat/account-management), create 2–3 test accounts for experience in C2C chat and group chat.
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100033438418/0be64336adb311f096c2525400454e06.png)
+
+5. UserSig info. Click [IM console > development tool > UserSig tool](https://console.trtc.io/usersig), fill in the created userID, and just generate userSig.
+
+
+### Step 4: Start the Project
+
+Replace SDKAppID, UserID, and UserSig in App.tsx, then run the following command:
+
+
+【shell】
+``` bash
+ npm run dev
+```
+
+> **Note:**
+> 
+> 1. Please ensure that in Step 3 code, SDKAppID, UserID, and UserSig are all successfully replaced. Failure to replace them will result in abnormal project behavior.
+> 2. A `userID` corresponds to a `userSig`, for more information, see [Generating UserSig](https://trtc.io/document/39074?product=consoleguide).
+> 3. If the project fails to start, please check whether the [development environment requirements](https://write.woa.com/document/108053210129276928) are met.
+
+
+### Step 6: Send your first message
+
+Enter your message in the input box and press Enter to send.
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027119864/efc5e925595711efb36952540075b605.png)
+
+## FAQs
+
+#### What is UserSig?
+
+A UserSig is a password for users to log in to Chat. It is essentially the ciphertext generated by encrypting information such as the UserID.
+
+#### How can I generate a UserSig?
+
+The issuance method for UserSig involves integrating the calculation code of UserSig into your server, and providing an interface oriented towards your project. When UserSig is needed, your project sends a request to the business server to access the dynamic UserSig. For more information, please see [How to Generate a UserSig on the Server](https://trtc.io/document/39074?product=consoleguide).
+
+> **Note:**
+> 
+
+> The exemplary code provided in this document retrieves the UserSig by embedding the SECRETKEY in the client code. This approach makes the SECRETKEY highly susceptible to decompilation and reverse engineering. Once your encryption key is compromised, attackers can misappropriate your Tencent Cloud traffic. Hence, **this procedure is exclusively recommended for running functional debugging locally**. For the correct issuance of UserSig, please refer to the previous sections.
+> 
+
+
+## Communication and Feedback
+
+Join the [Telegram Technical Exchange Group](https://t.me/tencent_imsdk) or [WhatsApp Exchange Group](https://chat.whatsapp.com/IVa11ZkVmKTEwSWsAzSyik) to enjoy support from professional engineers and solve your problems.
+
+## Documentation
+
+#### UIKit  Related:
+- [chat-uikit-react npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react)
+
+- [Demo Source Code and Running Example](https://github.com/TencentCloud/chat-uikit-react)
+
+
+#### For more features, refer to the ChatEngine API documentation:
+- [chat-uikit-engine API Manual](https://web.sdk.qcloud.com/im/doc/chat-engine-lite/index.html)
+
+- [chat-uikit-engine-lite npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-engine-lite)