@tencent-rtc/mcp 1.0.7 → 1.1.6

package/README.md

@@ -28,12 +28,12 @@ This improves the LLM AI Agent's ability to understand and interact with Tencent
 
 
 ## How To Use
-To set up the @tencentcloud/sdk-mcp MCP Server, follow these steps:
+To set up the @tencent-rtc/mcp MCP Server, follow these steps:
 
 - Step1: Installation.
 
 ```
-npx -y @tencentcloud/sdk-mcp
+npx -y @tencent-rtc/mcp
 ```
 
 
@@ -42,9 +42,13 @@ npx -y @tencentcloud/sdk-mcp
 ```javascript
 {
   "mcpServers": {
-    "tencentcloud-sdk-mcp": {
+    "tencent-rtc": {
       "command": "npx",
-      "args": ["-y", "@tencentcloud/sdk-mcp"]
+      "args": ["-y", "@tencent-rtc/mcp"],
+      "env": {
+        "SDKAPPID": "YOUR_SDKAPPID",
+        "SECRETKEY": "YOUR_SECRET_KEY"
+      }
     }
   }
 }

package/index.js

@@ -1,8 +1,10 @@
 #!/usr/bin/env node
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { createServer } from './server.js';
+import { ServerConfig } from './server-config.js';
 // 启动服务器
 async function main() {
+    ServerConfig.getInstance();
     const server = createServer();
     const transport = new StdioServerTransport();
     await server.connect(transport);

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,QAAQ;AACR,KAAK,UAAU,IAAI;IACjB,MAAM,MAAM,GAAc,YAAY,EAAE,CAAC;IACzC,MAAM,SAAS,GAAG,IAAI,oBAAoB,EAAE,CAAC;IAC7C,MAAM,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC,OAAO,CAAC,KAAK,CAAC,0CAA0C,CAAC,CAAC;AAC5D,CAAC;AAED,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;IACrB,OAAO,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;IACtC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,QAAQ;AACR,KAAK,UAAU,IAAI;IACjB,YAAY,CAAC,WAAW,EAAE,CAAC;IAC3B,MAAM,MAAM,GAAc,YAAY,EAAE,CAAC;IACzC,MAAM,SAAS,GAAG,IAAI,oBAAoB,EAAE,CAAC;IAC7C,MAAM,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC,OAAO,CAAC,KAAK,CAAC,0CAA0C,CAAC,CAAC;AAC5D,CAAC;AAED,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;IACrB,OAAO,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;IACtC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC,CAAC,CAAC"}

package/libs/TLSSigAPIv2.d.ts

@@ -0,0 +1,134 @@
+/**
+ * TLSSigAPIv2 TypeScript 声明文件
+ * 用于腾讯云实时音视频(TRTC)和即时通信(IM)服务的签名生成
+ */
+
+/**
+ * TLS签名API类
+ */
+export declare class Api {
+    /**
+     * 构造函数
+     * @param sdkappid - 应用的SDKAppID
+     * @param key - 应用的密钥
+     */
+    constructor(sdkappid: number, key: string);
+
+    /**
+     * SDKAppID
+     */
+    readonly sdkappid: number;
+
+    /**
+     * 应用密钥
+     */
+    readonly key: string;
+
+    /**
+     * 生成UserSig签名
+     * 用于签发 TRTC 和 IM 服务中必须要使用的 UserSig 鉴权票据
+     * 
+     * @param userid - 用户id，限制长度为32字节，只允许包含大小写英文字母（a-zA-Z）、数字（0-9）及下划线和连词符
+     * @param expire - UserSig 票据的过期时间，单位是秒，比如 86400 代表生成的 UserSig 票据在一天后就无法再使用了
+     * @returns 返回生成的UserSig字符串
+     */
+    genUserSig(userid: string, expire: number): string;
+
+    /**
+     * 生成PrivateMapKey权限票据（数字房间号）
+     * 用于签发 TRTC 进房参数中可选的 PrivateMapKey 权限票据
+     * 
+     * @param userid - 用户id，限制长度为32字节，只允许包含大小写英文字母（a-zA-Z）、数字（0-9）及下划线和连词符
+     * @param expire - PrivateMapKey 票据的过期时间，单位是秒
+     * @param roomid - 房间号，用于指定该 userid 可以进入的房间号
+     * @param privilegeMap - 权限位，使用了一个字节中的 8 个比特位，分别代表八个具体的功能权限开关
+     * @returns 返回生成的PrivateMapKey字符串
+     */
+    genPrivateMapKey(userid: string, expire: number, roomid: number, privilegeMap: number): string;
+
+    /**
+     * 生成PrivateMapKey权限票据（字符串房间号）
+     * 用于签发 TRTC 进房参数中可选的 PrivateMapKey 权限票据
+     * 
+     * @param userid - 用户id，限制长度为32字节，只允许包含大小写英文字母（a-zA-Z）、数字（0-9）及下划线和连词符
+     * @param expire - PrivateMapKey 票据的过期时间，单位是秒
+     * @param roomstr - 字符串房间号，用于指定该 userid 可以进入的房间号
+     * @param privilegeMap - 权限位，使用了一个字节中的 8 个比特位，分别代表八个具体的功能权限开关
+     * @returns 返回生成的PrivateMapKey字符串
+     */
+    genPrivateMapKeyWithStringRoomID(userid: string, expire: number, roomstr: string, privilegeMap: number): string;
+
+    /**
+     * 通用签名生成方法
+     * @param userid - 用户ID
+     * @param expire - 过期时间（秒）
+     * @param userBuf - 用户缓冲区数据，可选
+     * @returns 返回生成的签名字符串
+     */
+    genSig(userid: string, expire: number, userBuf?: Buffer | null): string;
+
+    /**
+     * 生成HMAC-SHA256签名（私有方法）
+     * @private
+     */
+    private _hmacsha256(identifier: string, currTime: number, expire: number, base64UserBuf?: string | null): string;
+
+    /**
+     * 生成用户缓冲区数据（私有方法）
+     * @private
+     */
+    private _genUserbuf(
+      account: string,
+      dwAuthID: number,
+      dwExpTime: number,
+      dwPrivilegeMap: number,
+      dwAccountType: number,
+      roomstr?: string | null
+    ): Buffer;
+  }
+
+/**
+ * 权限位常量定义
+ * 使用了一个字节中的 8 个比特位，分别代表八个具体的功能权限开关
+ */
+export declare namespace PrivilegeMap {
+  /** 创建房间的权限 */
+  const CREATE_ROOM = 1;
+  /** 加入房间的权限 */
+  const JOIN_ROOM = 2;
+  /** 发送语音的权限 */
+  const SEND_AUDIO = 4;
+  /** 接收语音的权限 */
+  const RECEIVE_AUDIO = 8;
+  /** 发送视频的权限 */
+  const SEND_VIDEO = 16;
+  /** 接收视频的权限 */
+  const RECEIVE_VIDEO = 32;
+  /** 发送辅路（屏幕分享）视频的权限 */
+  const SEND_SUB_VIDEO = 64;
+  /** 接收辅路（屏幕分享）视频的权限 */
+  const RECEIVE_SUB_VIDEO = 128;
+  /** 所有权限 */
+  const ALL_PRIVILEGES = 255;
+}
+
+/**
+ * 使用示例：
+ * 
+ * ```typescript
+ * import { Api } from './TLSSigAPIv2';
+ * // 或者使用 CommonJS 方式：
+ * // const { Api } = require('./TLSSigAPIv2');
+ * 
+ * const api = new Api(1400000000, 'your-secret-key');
+ * 
+ * // 生成UserSig
+ * const userSig = api.genUserSig('user123', 86400);
+ * 
+ * // 生成PrivateMapKey（数字房间号）
+ * const privateMapKey = api.genPrivateMapKey('user123', 86400, 12345, 255);
+ * 
+ * // 生成PrivateMapKey（字符串房间号）
+ * const privateMapKeyStr = api.genPrivateMapKeyWithStringRoomID('user123', 86400, 'room_abc', 255);
+ * ```
+ */

package/libs/TLSSigAPIv2.js

@@ -0,0 +1,243 @@
+import crypto from 'crypto';
+import zlib from 'zlib';
+
+var base64url = {};
+
+var newBuffer = function (fill, encoding) {
+    return Buffer.from ? Buffer.from(fill, encoding) : new Buffer(fill, encoding)
+};
+
+base64url.unescape = function unescape(str) {
+    return (str + Array(5 - str.length % 4))
+        .replace(/_/g, '=')
+        .replace(/\-/g, '/')
+        .replace(/\*/g, '+');
+};
+
+base64url.escape = function escape(str) {
+    return str.replace(/\+/g, '*')
+        .replace(/\//g, '-')
+        .replace(/=/g, '_');
+};
+
+base64url.encode = function encode(str) {
+    return this.escape(newBuffer(str).toString('base64'));
+};
+
+base64url.decode = function decode(str) {
+    return newBuffer(this.unescape(str), 'base64').toString();
+};
+
+function base64encode(str) {
+    return newBuffer(str).toString('base64')
+}
+
+function base64decode(str) {
+    return newBuffer(str, 'base64').toString()
+}
+
+var Api = function (sdkappid, key) {
+    this.sdkappid = sdkappid;
+    this.key = key;
+};
+/**
+ * 通过传入参数生成 base64 的 hmac 值
+ * @param identifier
+ * @param currTime
+ * @param expire
+ * @returns {string}
+ * @private
+ */
+Api.prototype._hmacsha256 = function (identifier, currTime, expire, base64UserBuf) {
+    var contentToBeSigned = "TLS.identifier:" + identifier + "\n";
+    contentToBeSigned += "TLS.sdkappid:" + this.sdkappid + "\n";
+    contentToBeSigned += "TLS.time:" + currTime + "\n";
+    contentToBeSigned += "TLS.expire:" + expire + "\n";
+    if (null != base64UserBuf) {
+        contentToBeSigned += "TLS.userbuf:" + base64UserBuf + "\n";
+    }
+    const hmac = crypto.createHmac("sha256", this.key);
+    return hmac.update(contentToBeSigned).digest('base64');
+};
+/**
+ * TRTC业务进房权限加密串需使用用户定义的userbuf
+ * @brief 生成 userbuf
+ * @param account 用户名
+ * @param dwSdkappid sdkappid
+ * @param dwAuthID  数字房间号
+ * @param dwExpTime 过期时间：该权限加密串的过期时间，建议300秒，实际过期时间:now+dwExpTime
+ * @param dwPrivilegeMap 用户权限，255表示所有权限
+ * @param dwAccountType 用户类型,默认为0
+ * @param roomstr 字符串房间号
+ * @return userbuf  {string}  返回的userbuf
+ */
+Api.prototype._genUserbuf = function (account, dwAuthID, dwExpTime,
+    dwPrivilegeMap, dwAccountType, roomstr) {
+
+    let accountLength = account.length;
+    let roomstrlength = 0;
+    let length = 1 + 2 + accountLength + 20 ;
+    if (null != roomstr)
+    {
+        roomstrlength = roomstr.length;
+        length = length + 2 + roomstrlength;
+    }
+    let offset = 0;
+    let userBuf = new Buffer.alloc(length);
+
+    //cVer
+    if (null != roomstr)
+        userBuf[offset++] = 1;
+    else
+        userBuf[offset++] = 0;
+
+    //wAccountLen
+    userBuf[offset++] = (accountLength & 0xFF00) >> 8;
+    userBuf[offset++] = accountLength & 0x00FF;
+
+    //buffAccount
+    for (; offset < 3 + accountLength; ++offset) {
+        userBuf[offset] = account.charCodeAt(offset - 3);
+    }
+
+    //dwSdkAppid
+    userBuf[offset++] = (this.sdkappid & 0xFF000000) >> 24;
+    userBuf[offset++] = (this.sdkappid & 0x00FF0000) >> 16;
+    userBuf[offset++] = (this.sdkappid & 0x0000FF00) >> 8;
+    userBuf[offset++] = this.sdkappid & 0x000000FF;
+
+    //dwAuthId
+    userBuf[offset++] = (dwAuthID & 0xFF000000) >> 24;
+    userBuf[offset++] = (dwAuthID & 0x00FF0000) >> 16;
+    userBuf[offset++] = (dwAuthID & 0x0000FF00) >> 8;
+    userBuf[offset++] = dwAuthID & 0x000000FF;
+
+    //过期时间：dwExpTime+now
+    let expire = Date.now() / 1000 + dwExpTime;
+    userBuf[offset++] = (expire & 0xFF000000) >> 24;
+    userBuf[offset++] = (expire & 0x00FF0000) >> 16;
+    userBuf[offset++] = (expire & 0x0000FF00) >> 8;
+    userBuf[offset++] = expire & 0x000000FF;
+
+    //dwPrivilegeMap
+    userBuf[offset++] = (dwPrivilegeMap & 0xFF000000) >> 24;
+    userBuf[offset++] = (dwPrivilegeMap & 0x00FF0000) >> 16;
+    userBuf[offset++] = (dwPrivilegeMap & 0x0000FF00) >> 8;
+    userBuf[offset++] = dwPrivilegeMap & 0x000000FF;
+
+    //dwAccountType
+    userBuf[offset++] = (dwAccountType & 0xFF000000) >> 24;
+    userBuf[offset++] = (dwAccountType & 0x00FF0000) >> 16;
+    userBuf[offset++] = (dwAccountType & 0x0000FF00) >> 8;
+    userBuf[offset++] = dwAccountType & 0x000000FF;
+
+    if (null != roomstr) {
+        //roomstrlength
+        userBuf[offset++] = (roomstr.length & 0xFF00) >> 8;
+        userBuf[offset++] = roomstr.length & 0x00FF;
+
+        //roomstr
+        for (; offset < length; ++offset) {
+            userBuf[offset] = roomstr.charCodeAt(offset - (length - roomstr.length));
+        }
+    }
+
+    return userBuf;
+}
+Api.prototype.genSig = function (userid, expire, userBuf) {
+    var currTime = Math.floor(Date.now() / 1000);
+
+    var sigDoc = {
+        'TLS.ver': "2.0",
+        'TLS.identifier': "" + userid,
+        'TLS.sdkappid': Number(this.sdkappid),
+        'TLS.time': Number(currTime),
+        'TLS.expire': Number(expire)
+    };
+
+    var sig = '';
+    if (null != userBuf) {
+        var base64UserBuf = base64encode(userBuf);
+        sigDoc['TLS.userbuf'] = base64UserBuf;
+        sig = this._hmacsha256(userid, currTime, expire, base64UserBuf);
+    } else {
+        sig = this._hmacsha256(userid, currTime, expire, null);
+    }
+    sigDoc['TLS.sig'] = sig;
+
+    var compressed = zlib.deflateSync(newBuffer(JSON.stringify(sigDoc))).toString('base64');
+    return base64url.escape(compressed);
+}
+/**
+ *【功能说明】用于签发 TRTC 和 IM 服务中必须要使用的 UserSig 鉴权票据
+ *
+ *【参数说明】
+ * @param userid - 用户id，限制长度为32字节，只允许包含大小写英文字母（a-zA-Z）、数字（0-9）及下划线和连词符。
+ * @param expire - UserSig 票据的过期时间，单位是秒，比如 86400 代表生成的 UserSig 票据在一天后就无法再使用了。
+ */
+Api.prototype.genUserSig = function (userid, expire) {
+    return this.genSig(userid, expire, null);
+};
+
+/**
+ *【功能说明】
+ * 用于签发 TRTC 进房参数中可选的 PrivateMapKey 权限票据。
+ * PrivateMapKey 需要跟 UserSig 一起使用，但 PrivateMapKey 比 UserSig 有更强的权限控制能力：
+ *  - UserSig 只能控制某个 UserID 有无使用 TRTC 服务的权限，只要 UserSig 正确，其对应的 UserID 可以进出任意房间。
+ *  - PrivateMapKey 则是将 UserID 的权限控制的更加严格，包括能不能进入某个房间，能不能在该房间里上行音视频等等。
+ * 如果要开启 PrivateMapKey 严格权限位校验，需要在【实时音视频控制台】=>【应用管理】=>【应用信息】中打开“启动权限密钥”开关。
+ *
+ *【参数说明】
+ * @param userid - 用户id，限制长度为32字节，只允许包含大小写英文字母（a-zA-Z）、数字（0-9）及下划线和连词符。
+ * @param expire - PrivateMapKey 票据的过期时间，单位是秒，比如 86400 生成的 PrivateMapKey 票据在一天后就无法再使用了。
+ * @param roomid - 房间号，用于指定该 userid 可以进入的房间号
+ * @param privilegeMap - 权限位，使用了一个字节中的 8 个比特位，分别代表八个具体的功能权限开关：
+ *  - 第 1 位：0000 0001 = 1，创建房间的权限
+ *  - 第 2 位：0000 0010 = 2，加入房间的权限
+ *  - 第 3 位：0000 0100 = 4，发送语音的权限
+ *  - 第 4 位：0000 1000 = 8，接收语音的权限
+ *  - 第 5 位：0001 0000 = 16，发送视频的权限  
+ *  - 第 6 位：0010 0000 = 32，接收视频的权限  
+ *  - 第 7 位：0100 0000 = 64，发送辅路（也就是屏幕分享）视频的权限
+ *  - 第 8 位：1000 0000 = 200，接收辅路（也就是屏幕分享）视频的权限  
+ *  - privilegeMap == 1111 1111 == 255 代表该 userid 在该 roomid 房间内的所有功能权限。
+ *  - privilegeMap == 0010 1010 == 42  代表该 userid 拥有加入房间和接收音视频数据的权限，但不具备其他权限。
+ */
+Api.prototype.genPrivateMapKey = function (userid, expire, roomid, privilegeMap) {
+    var userBuf = this._genUserbuf(userid, roomid, expire, privilegeMap, 0, null);
+    return this.genSig(userid, expire, userBuf);
+
+};
+/**
+ *【功能说明】
+ * 用于签发 TRTC 进房参数中可选的 PrivateMapKey 权限票据。
+ * PrivateMapKey 需要跟 UserSig 一起使用，但 PrivateMapKey 比 UserSig 有更强的权限控制能力：
+ *  - UserSig 只能控制某个 UserID 有无使用 TRTC 服务的权限，只要 UserSig 正确，其对应的 UserID 可以进出任意房间。
+ *  - PrivateMapKey 则是将 UserID 的权限控制的更加严格，包括能不能进入某个房间，能不能在该房间里上行音视频等等。
+ * 如果要开启 PrivateMapKey 严格权限位校验，需要在【实时音视频控制台】=>【应用管理】=>【应用信息】中打开“启动权限密钥”开关。
+ *
+ *【参数说明】
+ * @param userid - 用户id，限制长度为32字节，只允许包含大小写英文字母（a-zA-Z）、数字（0-9）及下划线和连词符。
+ * @param expire - PrivateMapKey 票据的过期时间，单位是秒，比如 86400 生成的 PrivateMapKey 票据在一天后就无法再使用了。
+ * @param roomstr - 房间号，用于指定该 userid 可以进入的房间号
+ * @param privilegeMap - 权限位，使用了一个字节中的 8 个比特位，分别代表八个具体的功能权限开关：
+ *  - 第 1 位：0000 0001 = 1，创建房间的权限
+ *  - 第 2 位：0000 0010 = 2，加入房间的权限
+ *  - 第 3 位：0000 0100 = 4，发送语音的权限
+ *  - 第 4 位：0000 1000 = 8，接收语音的权限
+ *  - 第 5 位：0001 0000 = 16，发送视频的权限  
+ *  - 第 6 位：0010 0000 = 32，接收视频的权限  
+ *  - 第 7 位：0100 0000 = 64，发送辅路（也就是屏幕分享）视频的权限
+ *  - 第 8 位：1000 0000 = 200，接收辅路（也就是屏幕分享）视频的权限  
+ *  - privilegeMap == 1111 1111 == 255 代表该 userid 在该房间内的所有功能权限。
+ *  - privilegeMap == 0010 1010 == 42  代表该 userid 拥有加入房间和接收音视频数据的权限，但不具备其他权限。
+ */
+Api.prototype.genPrivateMapKeyWithStringRoomID = function (userid, expire, roomstr, privilegeMap) {
+    var userBuf = this._genUserbuf(userid, 0, expire, privilegeMap, 0, roomstr);
+    return this.genSig(userid, expire, userBuf);
+
+};
+
+export {
+  Api
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tencent-rtc/mcp",
-  "version": "1.0.7",
+  "version": "1.1.6",
   "description": "Tencent Cloud MCP Server for SDK",
   "type": "module",
   "main": "index.js",

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

@@ -0,0 +1,92 @@
+The AI model must comply with the following **hard limit**.
+
+
+* **React version limit:** When creating a project, react and react-dom must be set to `18.2.0`. React 19 is forbidden.
+* **Strictly follow the document procedure and description for integration:** You must perform the integration of the component according to the document procedure and description.
+* **Strictly use the example code in the document:** You must strictly use the example code in the document when creating and filling the file. The PlaceholderEmpty property of the Chat component does not need to be filled in.
+* **Default conversation must be enabled:** You must use `setActiveConversation` to start the `C2Cadministrator` conversation. 
+* **Must call the tool to obtain userSig:** After TUIKit integration is complete, you must guide users to call the `get_usersig` tool to obtain userSig.
+* **User information configuration file creation prohibited:** Do not auto-create config directories or files that fill in SDKAppID, userID, or userSig.
+
+
+# chat-uikit-react Integration
+
+
+## step1:create react project
+
+
+requirement: react: 18.2.0, react-dom: 18.2.0.
+
+
+you can use vite or rsbuild to create a react project.
+
+
+## step2: install chat-uikit-react
+
+
+use npm or pnpm to install @tencentcloud/chat-uikit-react
+
+
+## step3: add chat-uikit-react to your project
+
+
+example code
+
+
+```tsx
+import {
+  UIKitProvider,
+  useLoginState,
+  LoginStatus,
+  Chat,
+  ChatHeader,
+  MessageList,
+  MessageInput,
+  useConversationListState,
+} from "@tencentcloud/chat-uikit-react";
+
+
+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
+  
+  const { status } = useLoginState({
+    SDKAppID,
+    userID,
+    userSig,
+  })
+
+
+  if (status !== LoginStatus.SUCCESS) {
+    return <div>Loading...</div>
+  }
+
+
+  // Open default conversation
+  const { setActiveConversation } = useConversationListState();
+  setActiveConversation('C2Cadministrator');
+  
+  // 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'>
+      <div style={{
+        height: '100vh',
+        width: '100vw',
+        display: 'flex',
+        flexDirection: 'row',
+        }}>
+        <Chat PlaceholderEmpty=''>
+          <ChatHeader />
+          <MessageList />
+          <MessageInput />
+        </Chat>
+      </div>
+    </UIKitProvider>
+  );
+}
+
+
+export default App;
+```

package/resource/doc/chatuikit/react/components/chat.md

@@ -0,0 +1,44 @@
+# Chat component document
+
+## Overview
+
+The chat component is responsible for rendering the chat interface, including the chat window header component ChatHeader, the message list component MessageList, and the message input component MessageInput.
+
+
+## Component composition
+
+
+The Chat component includes the following content:
+-**ChatHeader**: Chat window header component
+
+
+- **MessageList**: Message list component. The message list component includes message operation capabilities. For detailed properties, read the MessageList component document.
+
+
+- **MessageInput**: Message input component
+
+
+## Basic Usage
+
+
+Chat components can be used without any required attributes.
+``` typescript
+<template>
+<UIKitProvider>
+  <Chat style="flex: 1;">
+    <ChatHeader />
+    <MessageList />
+    <MessageInput />
+  </Chat>
+</UIKitProvider>
+</template>
+<script setup lang="ts">
+import {
+  UIKitProvider,
+  Chat,
+  ChatHeader,
+  MessageList,
+  MessageInput,
+} from '@tencentcloud/chat-uikit-react';
+</script>
+```