@tencentcloud/sdk-mcp 1.6.3 → 1.6.5

package/resource/integration/chat/preset/react/integration.md

@@ -2,13 +2,7 @@ TUIKit 是基于腾讯云 Chat SDK 的一款 React 组件库，它提供了一
 
 > **AI 助手使用说明：**
 >
-> - **IM 知识咨询**
-
-> Skill 提供** IM 知识咨询**能力，您可以用 Skill 在 IDE 中直接查询 SDK、UIKit、服务端 API、产品计费等内容，[点击这里，立即体验 AI 咨询助手](https://cloud.tencent.com/document/product/269/125822)。
->
-> - **AI 集成**
-
-> MCP 提供全新的 AI 集成方式，只需要简单描述您的需求，即可**自动生成集成代码**，大幅提升开发效率，[点击这里，立即体验 AI 集成助手](https://cloud.tencent.com/document/product/269/124481)。
+> MCP 提供了 **IM 知识咨询**和**含 UI 集成**的 AI 解决方案，您可以通过 MCP 查询 IM 相关的知识和集成 UIKit，[点击这里，立即体验 AI 助手](https://cloud.tencent.com/document/product/269/126983)。
 >
 
 ## 关键概念
@@ -37,10 +31,32 @@ chat-uikit-react 主要分为 ConversationList、Chat、MessageList、ChatHeader
 
 - TypeScript@^5.0.0
 
+## 快速体验完整示例项目
+
+如果您希望先快速跑通完整效果，或在接入过程中对照最终代码结构，可以直接克隆我们已经完成接入的示例项目。示例项目已完成 Chat UIKit 相关依赖安装、组件引入、初始化配置和基础页面接入，适合作为接入参考。
+``` bash
+git clone https://gitee.com/tencent-cloud-uikit/rtc-chat-web.git
+cd chat-desktop-react
+npm install
+npm run dev
+```
+
+> **说明：**
+>
+> 示例项目地址：[点击查看 Gitee 示例项目](https://gitee.com/tencent-cloud-uikit/rtc-chat-web)。
+>
+> 示例项目用于帮助您快速体验和对照接入流程。若您需要在已有项目中集成，建议继续阅读下方步骤，按文档逐步完成接入。
+>
+
 ## 创建项目
 
 创建一个新的名为 **chat-integration-react** 的 React 项目，并按照脚手架的步骤提示完成项目的初始化。
 
+> **注意：**
+>
+> 1. 建议使用 npm 进行安装，npm 会主动下载所需的 peerDependencies 依赖。
+> 2. `npm create vite@latest` 会使用最新的 vite 版本，最新版本的 vite 可能会与低版本的 node.js 冲突，请检查您电脑上的相关环境配置。
+
 【shell】
 ``` bash
 npm create vite@latest
@@ -65,13 +81,7 @@ npm create vite@latest
 
 ### 步骤 1. 安装依赖
 
-通过 npm 方式下载 [chat-uikit-react](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react) 并在项目中使用。
-
-> **说明：**
->
-
-> 建议使用 npm 进行安装，npm 会主动下载所需的 peerDependencies 依赖。
->
+通过 npm 方式下载 [chat-uikit-react](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react) 并在项目中使用（建议使用 npm 进行安装，npm 会主动下载所需的 peerDependencies 依赖）。
 
 【shell】
 ``` bash
@@ -82,7 +92,6 @@ npm i @tencentcloud/chat-uikit-react
 
 > **说明：**
 >
-
 > 以下代码中未填入 `SDKAppID`、`userID` 和 `userSig`，需在 步骤3 中获取相关信息后进行替换。
 >
 
@@ -343,7 +352,6 @@ const { status } = useLoginState({
 
 > **注意：**
 >
-
 > 本文示例代码采用从 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取 UserSig 的方案，**该方法仅适合本地跑通功能调试**。 正确的 UserSig 签发方式请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
 >
 
@@ -351,7 +359,7 @@ const { status } = useLoginState({
 
 - userID：单击 [即时通信 IM 控制台 > 消息服务 Chat > 账号管理](https://console.cloud.tencent.com/im/account-management)，切换至目标应用所在账号，您可以创建 2～3 个账号用于体验单聊、群聊的功能。
 
-- userSig：单击 [即时通信 IM 控制台 > 开发工具 > UserSig生成校验](https://console.cloud.tencent.com/im/tool-usersig)，切换至目标应用所在账号，填写创建的 userID，即可生成 userSig。
+- userSig：单击 [即时通信 IM 控制台 > 开发工具 > UserSig 生成校验](https://console.cloud.tencent.com/im/tool-usersig)，切换至目标应用所在账号，填写创建的 userID，即可生成 userSig。
 
 ## 运行和测试
 
@@ -364,8 +372,8 @@ npm run dev
 
 > **注意：**
 >
-> - 请确保 步骤3 代码中  SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
-> - userID 和 userSig  为一一对应关系，具体参见 生成 UserSig（用户鉴权）。
+> - 请确保 步骤3 代码中 SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
+> - userID 和 userSig 为一一对应关系，具体参见 生成 UserSig（用户鉴权）。
 > - 如遇到项目启动失败，请检查 开发环境要求 是否满足。
 
 ## 集成更多高级特性
@@ -374,10 +382,8 @@ npm run dev
 
 > **说明：**
 >
-
 > TUICallKit 是腾讯云推出一款音视频通话 UI 组件，通过集成该组件，您只需要编写几行代码就可以在聊天应用中体验音视频通话功能。
 >
-
 > 更多详细信息可参考：音视频通话-开通服务。
 >
 
@@ -415,13 +421,10 @@ npm run dev
 
 > **说明：**
 >
-
 > 搜索，在客服、社交、在线教育、在线医疗、OA 等场景下是刚需功能，可帮助用户快速查找群组、用户、消息，提升产品使用体验和用户粘性。
 >
-
-> 由于 Web 平台本地存储特殊性等原因，Vue **无法实现本地搜索**，为了更好的满足对于搜索能力的需求，推出了**云端搜索能力**。**云端搜索功能支持全局搜索和会话内搜索，同时支持搜索群组、用户和消息。**
+> 由于 Web 平台本地存储特殊性等原因，Vue **无法实现本地搜索**，为了更好地满足对于搜索能力的需求，推出了**云端搜索能力**。**云端搜索功能支持全局搜索和会话内搜索，同时支持搜索群组、用户和消息。**
 >
-
 > 此功能属于增值服务，需要您购买云端搜索插件，请点击 [购买](https://console.cloud.tencent.com/im/plugin/TUICloudSearch)。
 >
 
@@ -459,17 +462,16 @@ npm run dev
 
 ### 什么是 UserSig？如何生成 UserSig？
 
-UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。UserSig 签发方式是需将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
+UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。UserSig 的签发方式是需将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
 
 > **注意：**
 >
-
 > 本文示例代码采用在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取 UserSig 的方案，**该方法仅适合本地跑通功能调试**。 正确的 UserSig 签发方式请参见[服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
 >
 
 ### 是否支持 react 17 版本？
 
-目前不支持 React v17.x，仅支持 React v18.2+ 以上的版本。
+目前不支持 React v17.x，仅支持 React v18.2+ 版本。
 
 ### 我能不能使用第三方组件库，例如 Ant-Design？
 

package/resource/integration/chat/preset/uni-app/integration.md

@@ -14,26 +14,26 @@ TUIKit 是一款基于腾讯云 IM SDK 和 UTS 原生渲染技术的 uni-app UI
 
 - **支持平台**： 仅支持打包为 Android / iOS App，不支持 H5 和小程序。
 
+- **支持项目**： uni-app 项目、uni-app x 项目。
+
    > **说明：**
    >
-
    > H5 和小程序项目，如有需要请参考以下替代方案：
    >
->   - 打包 Web H5，可参考：Web H5（Vue3）。
->   - 打包小程序，可参考：uni-app 完整版（Vue3/Vue2）。
->   - 接入过程中遇到任何卡点或有改进建议，欢迎通过 [UniApp Atomicx 接入体验反馈](https://wj.qq.com/s2/26120470/621d/) 反馈，官方会及时跟进处理。
+   > - 打包 Web H5，可参考：Web H5（Vue3）。
+   > - 打包小程序，可参考：uni-app 完整版（Vue3/Vue2）。
+   > - 接入过程中遇到任何卡点或有改进建议，欢迎通过 [UniApp Atomicx 接入体验反馈](https://wj.qq.com/s2/26120470/621d/) 反馈，官方会及时跟进处理。
 
 ## 集成步骤
 
 > **说明：**
 >
-
-> **Demo： **[GitHub 完整 Demo](https://github.com/Tencent-RTC/TUIKit_uni-app)开箱即用，5 分钟跑通聊天 + 音视频通话全功能。
+> **Demo：** [GitHub 完整 Demo](https://github.com/Tencent-RTC/TUIKit_uni-app) 开箱即用，5 分钟跑通聊天 + 音视频通话全功能。
 >
 
 ### 步骤1：创建项目
 
-打开 HBuilderX，在菜单栏中选择 “**文件 > 新建 > 项目**”，创建一个名为 `chat-example` 的 uni-app 项目。
+打开 HBuilderX，在菜单栏中选择 “**文件 > 新建 > 项目**”，创建一个名为 `chat-example` 的 uni-app / uni-app x 项目。
 
 ### 步骤2：安装 TUIKit 插件
 
@@ -41,28 +41,40 @@ TUIKit 是一款基于腾讯云 IM SDK 和 UTS 原生渲染技术的 uni-app UI
 
 ### 步骤3：配置原生模块与 Android 权限
 
+【uni-app 项目】
+
 > **说明：**
 >
-
-> `Camera` 、`Record`**、**`VideoPlayer` 模块用于聊天中的拍照、录音、视频播放功能。Android 权限用于录音、网络访问和文件存储。
+> `Camera` 、`Record`**、** `VideoPlayer` 模块用于聊天中的拍照、录音、视频播放功能。Android 权限用于录音、网络访问和文件存储。
 >
 
-1. **模块配置**。点击 `manifest.json` > 点击**安卓 / iOS 模块配置 **>  勾选 **Camera&Gallery（相机和相册）、Record（录音）、 VideoPlayer（视频播放）**。如图所示：
+1. **模块配置**。点击 `manifest.json` > 点击**安卓 / iOS 模块配置** >  勾选 **Camera&Gallery（相机和相册）、Record（录音）、 VideoPlayer（视频播放）**。如图所示：
 
-2. **配置 Android 相关权限**。点击 `manifest.json`> 点击**安卓 / iOS权限配置 **>  Android 云打包配置中配置如下权限。如图所示：
+2. **配置 Android 相关权限**。点击 `manifest.json`> 点击**安卓 / iOS权限配置** >  Android 云打包配置中配置如下权限。如图所示：
 
-   ``` bash
-   <uses-permission android:name="android.permission.RECORD_AUDIO" />
-   <uses-permission android:name="android.permission.INTERNET" />
-   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
-   <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-   <uses-permission android:name="android.permission.VIBRATE"/>
-   ```
+``` bash
+<uses-permission android:name="android.permission.RECORD_AUDIO" />
+<uses-permission android:name="android.permission.INTERNET" />
+<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+<uses-permission android:name="android.permission.VIBRATE"/>
+```
+
+【uni-app x 项目】
+
+**配置 Android 相关权限**。点击 `manifest.json`> 点击**安卓 App 配置** >  权限配置中配置如下权限。如图所示：
+``` bash
+<uses-permission android:name="android.permission.RECORD_AUDIO" />
+<uses-permission android:name="android.permission.INTERNET" />
+<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+<uses-permission android:name="android.permission.VIBRATE"/>
+```
 
 ### 步骤4：集成 TUIKit
-1. 根据项目 `manifest.json` > **基础配置** > **Vue 版本，**集成 TUIKit**。**
+1. **集成 TUIKit**：uni-app 项目根据 `manifest.json` > **基础配置** > **Vue 版本，**集成 TUIKit**。uni-app x 不区分 vue 版本。**
 
-【Vue3】
+【uni-app Vue3 项目】
 
 **拷贝 TUIKit 页面及静态资源**：将 `⁠uni_modules/tuikit-atomic-x/quickstart/`⁠下的`⁠pages/*⁠` 拷贝到项目 `page`⁠ 目录，⁠`static/*⁠` 拷贝到项目 `static` 目录下。
 
@@ -76,14 +88,13 @@ cp -r uni_modules/tuikit-atomic-x/quickstart/static/* static/ && cp -r uni_modul
 xcopy /E /I /Y "uni_modules\tuikit-atomic-x\quickstart\static\*" "static\" && xcopy /E /I /Y "uni_modules\tuikit-atomic-x\quickstart\pages\*" "pages\"
 ```
 
-【Vue2】
+【uni-app  Vue2 项目】
 1. **转换兼容模式：**仅 Vue2 项目，Vue3 项目可忽略**。**
 
-> **说明：**
->
-
-> 该脚本用于将插件源码中 Vue3 的 Composition API 写法自动转换为 Vue2 的 Options API 写法，以确保在 Vue2 项目中正常运行。
->
+   > **说明：**
+   >
+   > 该脚本用于将插件源码中 Vue3 的 Composition API 写法自动转换为 Vue2 的 Options API 写法，以确保在 Vue2 项目中正常运行。
+   >
 
 ``` bash
 node ./uni_modules/tuikit-atomic-x/scripts/switch-to-compatible-mode.js
@@ -100,7 +111,30 @@ cp -r uni_modules/tuikit-atomic-x/quickstart/static/* static/ && cp -r uni_modul
 xcopy /E /I /Y "uni_modules\tuikit-atomic-x\quickstart\static\*" "static\" && xcopy /E /I /Y "uni_modules\tuikit-atomic-x\quickstart\pages\*" "pages\"
 ```
 
-3. **配置页面路由：**替换 `pages.json` 内容，注册所需页面路由：
+【uni-app x 项目】
+1. **转换 uniappx 模式：**仅 uni-app x 项目，uni-app 项目可忽略**。**
+
+   > **说明：**
+   >
+   > 该脚本用于将插件中 nvue 组件转化为 uvue 组件。
+   >
+
+``` bash
+node ./uni_modules/tuikit-atomic-x/scripts/switch-to-uniappx-mode.js
+```
+2. **拷贝 TUIKit 页面及静态资源**：将 `⁠uni_modules/tuikit-atomic-x/quickstart/` ⁠下的 `⁠pages/*⁠` 拷贝到项目 `page`⁠ 目录，⁠`static/*⁠` 拷贝到项目 `static` 目录下。
+
+【Mac 端】
+``` bash
+cp -r uni_modules/tuikit-atomic-x/quickstart/static/* static/ && cp -r uni_modules/tuikit-atomic-x/quickstart/pages/* pages/
+```
+
+【Windows 端】
+``` bash
+xcopy /E /I /Y "uni_modules\tuikit-atomic-x\quickstart\static\*" "static\" && xcopy /E /I /Y "uni_modules\tuikit-atomic-x\quickstart\pages\*" "pages\"
+```
+
+2. **配置页面路由：**替换 `pages.json` 内容，注册所需页面路由：
 
    ``` json
    {
@@ -315,7 +349,6 @@ xcopy /E /I /Y "uni_modules\tuikit-atomic-x\quickstart\static\*" "static\" && xc
 
    > **说明：**
    >
-
    > 如需调整页面路由，请同步修改页面和 `uni_modules/tuikit-atomic-x/components` 中路由跳转逻辑。
    >
 
@@ -323,28 +356,26 @@ xcopy /E /I /Y "uni_modules\tuikit-atomic-x\quickstart\static\*" "static\" && xc
 
 > **说明：**
 >
-
 > 接入过程中遇到任何卡点或有改进建议，欢迎通过 [UniApp Atomicx 接入体验反馈](https://wj.qq.com/s2/26120470/621d/) 反馈，官方会及时跟进处理。
 >
 
-1. **制作自定义基座。**点击**运行 **> **运行到手机或模拟器 **> **制作自定义调试基座：**
+1. **制作自定义基座。**点击**运行** > **运行到手机或模拟器** > **制作自定义调试基座：**
 
    > **说明：**
    >
-
-   > 首次制作自定义基座需要下载 Gradle 依赖，Android 通常需要 10～20 分钟，iOS 需要 5～10 分钟，请耐心等待，请勿中断。
+   > 首次制作自定义基座需要下载 Gradle 依赖，Android 通常需要 10～20 分钟，iOS 需要 5～10 分钟。过程中请勿中断。
    >
 
-2. **登录。**在 `pages/login/login.vue` 中，填入 `SDKAppID`、 `SecretKey`，在登录页面输入 `userID`，点击登录。
+2. **登录。**在 `pages/login/login.vue` 中，填入 `SDKAppID`、 `userID`、`userSig`，点击登录。
 
 | 参数 | 类型 | 说明 |
 | --- | --- | --- |
 | SDKAppID | Number | SDKAppID 是腾讯云 IM 客户应用的唯一标识。您可以在 <a href="https://console.cloud.tencent.com/im">即时通信 IM 控制台</a> 创建新应用获取 。<br><strong>说明：</strong><br>SDKAppID 是腾讯云 IM 客户应用的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。 |
 | SecretKey | String | SecretKey 是腾讯云 IM 客户应用的密钥。您可以在 <a href="https://console.cloud.tencent.com/im">即时通信 IM 控制台</a> 对应应用获取。 |
 | userID | String | 用户的唯一标识符，由您定义，只能包含大小写字母（a-z，A-Z）、数字（0-9）、下划线和连字符。 |
-| userSig | String | 用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。<br><strong>安全提示：</strong><br>- 本文示例代码通过 <code>genTestUserSig</code> 函数生成 <code>userSig</code>。该方法中 <code>SecretKey</code> 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量。<strong>该方法仅适合本地跑通功能调试</strong>。 正确的 UserSig 签发方式请参见 <a href="https://cloud.tencent.com/document/product/269/32688">服务端生成 UserSig</a>。<br>- 示例代码中的 UserSig 仅供测试使用，生产环境请通过 服务端生成。<br>- 敏感信息（UserSig/SecretKey）仅用于 Demo 测试，不可提交到代码仓库或用于生产环境。 |
+| userSig | String | 用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。您可以在 <a href="https://console.cloud.tencent.com/im">即时通信 IM 控制台</a> 生成。<br><strong>安全提示：</strong><br>- uni-app Vue3、uni-app Vue2 项目示例支持通过 <code>genTestUserSig</code> 函数生成 <code>userSig</code>。该方法中 <code>SecretKey</code> 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量。<strong>该方法仅适合本地跑通功能调试</strong>。 正确的 UserSig 签发方式请参见 <a href="https://cloud.tencent.com/document/product/269/32688">服务端生成 UserSig</a>。<br>- uni-app x 项目不支持通过 <code>genTestUserSig</code> 函数生成 <code>userSig</code>。您可以在 <a href="https://console.cloud.tencent.com/im">即时通信 IM 控制台</a> 或者通过 服务端生成自行生成 userSig。<br>- 示例代码中的 UserSig 仅供测试使用，生产环境请通过 服务端生成。<br>- 敏感信息（UserSig/SecretKey）仅用于 Demo 测试，不可提交到代码仓库或用于生产环境。 |
 
-【vue3】
+【uni-app  vue3 项目】
 ``` typescript
 import { ref } from 'vue'
 import { useLoginState } from '@/uni_modules/tuikit-atomic-x/state/LoginState';
@@ -373,7 +404,7 @@ login({
 })
 ```
 
-【vue2】
+【uni-app vue2 项目】
 ``` typescript
 import { useLoginState } from '@/uni_modules/tuikit-atomic-x/state/LoginState'
 import { genTestUserSig } from '@/uni_modules/tuikit-atomic-x/debug/GenerateTestUserSig'
@@ -410,11 +441,41 @@ export default {
 }
 ```
 
-3. **运行项目。**点击**运行 **> **运行到手机或模拟器 **> **运行到 Android/iOS 基座**，使用制作好的**自定义基座**运行到手机。
+【uni-app x 项目】
+``` typescript
+import { useLoginState } from '@/uni_modules/tuikit-atomic-x/state/LoginState';
+const { login } = useLoginState();
+
+const sdkAppId = 0; // SDKAppID
+const userId = ref(''); // userID
+const userSig = ''; // userSig
+
+// 登录
+login({
+  sdkAppID: sdkAppId,
+  userID: userId.value,
+  userSig: userSig,
+  success: () => {
+    uni.reLaunch({ url: '/pages/scenes/chat/conversationList/conversationList' })
+  },
+  fail: (code: number, msg: string) => {
+    uni.showToast({ title: msg || '登录失败', icon: 'none' })
+  }
+})
+
+```
+
+3. **运行项目。**点击**运行** > **运行到手机或模拟器** > **运行到 Android/iOS 基座**，使用制作好的**自定义基座**运行到手机。
 
 ## 集成音视频通话（推荐）
 
 **初始化 TUICallKit 服务。**在根目录下的 `App.vue` 中引入如下代码。
+
+> **说明：**
+>
+> TUICallKit 暂不支持 uni-app x 项目**，仅支持 uni-app 项目。**
+>
+
 ``` typescript
 import { initCallService } from '@/uni_modules/tuikit-atomic-x/server/callService';
 initCallService();
@@ -432,7 +493,7 @@ A：**不支持。**由于新版 TUIKit 基于 **UTS (Uni-app Type Script)** 插
 
 A：**不支持。**新版 TUIKit 基于 **UTS（Uni-app Type Script）**插件架构开发，其底层为**原生 SDK**，数据通过 hybridApi 进行交互，因此无法获取 **Chat 实例**。
 
-#### **Q：我的现有项目全是 **`.vue`** 页面（Webview 渲染），能直接集成吗？**
+#### **Q：我的现有项目全是** `.vue` **页面（Webview 渲染），能直接集成吗？**
 
 A：**可以混用，但需要注意页面模式。**
 
@@ -454,7 +515,7 @@ nvue 页面中：
 
 3. 不支持简写属性（例如 `margin: 10px 20px`），必须写全（`margin-top`, `margin-left` 等）。
 
-4. 更多参考信息：[uni-app-nvue 开发与 vue 开发的常见区别](https://uniapp.dcloud.net.cn/tutorial/page.html#nvue-%E5%BC%80%E5%8F%91%E4%B8%8E-vue-%E5%BC%80%E5%8F%91%E7%9A%84%E5%B8%B8%E8%A7%81%E5%8C%BA%E5%88%AB)。
+4. 更多参考信息：[uni-app-nvue 开发与 Vue 开发的常见区别](https://uniapp.dcloud.net.cn/tutorial/page.html#nvue-%E5%BC%80%E5%8F%91%E4%B8%8E-vue-%E5%BC%80%E5%8F%91%E7%9A%84%E5%B8%B8%E8%A7%81%E5%8C%BA%E5%88%AB)。
 
 ### 集成与构建类
 
@@ -463,7 +524,7 @@ nvue 页面中：
 A：请检查是否制作并使用了**自定义调试基座**。
 
 由于插件包含原生代码（Java/Objective-C），标准基座不包含这些原生库。
-- **解决步骤：** 请严格按照文档“运行和测试-步骤2”操作，在 HBuilderX 中点击 **运行 **> **运行到手机或模拟器 **> **制作自定义调试基座**。制作完成后，运行时请务必选择**运行到 Android/iOS 基座**，并勾选“使用自定义基座”。
+- **解决步骤：** 请严格按照文档“运行和测试-步骤2”操作，在 HBuilderX 中点击 **运行** > **运行到手机或模拟器** > **制作自定义调试基座**。制作完成后，运行时请务必选择**运行到 Android/iOS 基座**，并勾选“使用自定义基座”。
 
 #### **Q：制作自定义基座时一直失败或卡顿怎么办？**
 

package/resource/integration/chat/preset/vue/integration.md

@@ -3,16 +3,8 @@ TUIKit 是基于腾讯云 Chat SDK 的一款 Vue 3 UI 组件库，它提供了
 > **说明：**
 >
 > - **AI 助手使用说明**
-
-> Skill 提供了** IM 知识咨询**和 **Vue3 State API 无 UI 集成**能力，您可以用 Skill 在 IDE 中直接查询 SDK、UIKit、服务端 API、产品计费等内容，也可以用 Skill 在 Vue3 项目中集成 IM 能力, [点击这里，立即体验 AI 集成和咨询助手](https://cloud.tencent.com/document/product/269/125822)。
->
-
-> 您好！我们正在开发一款即时通信产品 UIKit，它基于腾讯云 Chat SDK，是一款 Vue3 UI 组件库，能帮助您快速集成并实现核心功能。
->
-
-> 您的反馈我们会**高度重视**，本问卷填写**仅需要 30 秒**！诚邀您的参与。
+> MCP 提供了 **IM 知识咨询**和**含 UI 集成**的 AI 解决方案，您可以通过 MCP 查询 IM 相关的知识和集成 UIKit，[点击这里，立即体验 AI 助手](https://cloud.tencent.com/document/product/269/126983)。
 >
-> - **请根据您的技术栈和目标平台，选择对应的接入文档开始集成：**
 
 |接入需求|桌面端|移动端 H5|
 |---------|---------|---------|
@@ -46,15 +38,31 @@ chat-uikit-vue3 主要分为 ConversationList、Chat、MessageList、ChatHeader
 
 - Node.js（Node.js ≥ 20.0.0，建议使用目前的 LTS v22 版本）
 
-## 创建项目
+## 快速体验完整示例项目
 
-使用 Vite 创建一个新的名称为 **chat-integration-vue3** 的 Vue3 项目。
+如果您希望先快速跑通完整效果，或在接入过程中对照最终代码结构，可以直接克隆我们已经完成接入的示例项目。示例项目已完成 Chat UIKit 相关依赖安装、组件引入、初始化配置和基础页面接入，适合作为接入参考。
+``` bash
+git clone https://gitee.com/tencent-cloud-uikit/rtc-chat-web.git
+cd chat-desktop-vue3
+npm install
+npm run dev
+```
 
 > **说明：**
 >
+> 示例项目地址：[点击查看 Gitee 示例项目](https://gitee.com/tencent-cloud-uikit/rtc-chat-web)。
+>
+> 示例项目用于帮助您快速体验和对照接入流程。若您需要在已有项目中集成，建议继续阅读下方步骤，按文档逐步完成接入。
+>
+
+## 创建项目
 
-> 高版本 Vite 需要使用最新的 Node.js 版本。
+使用 Vite 创建一个新的名称为 **chat-integration-vue3** 的 Vue3 项目。
+
+> **注意：**
 >
+> 1. 建议使用 npm 进行安装，npm 会主动下载所需的 peerDependencies 依赖。
+> 2. `npm create vite@latest` 会使用最新的 vite 版本，最新版本的 vite 可能会与低版本的 node.js 冲突，请检查您电脑上的相关环境配置。
 
 【shell】
 ``` bash
@@ -90,7 +98,6 @@ cd chat-integration-vue3
 
 > **说明：**
 >
-
 > 建议使用 npm 进行安装，npm 会主动下载所需的 peerDependencies 依赖。
 >
 
@@ -103,7 +110,6 @@ npm i @tencentcloud/chat-uikit-vue3@6 tuikit-atomicx-vue3@6
 
 > **注意：**
 >
-
 > 以下代码中未填入 `SDKAppID`、`userID` 和 `userSig`，需在 步骤3 中获取相关信息后进行替换。
 >
 
@@ -168,7 +174,13 @@ body { margin: 0; padding: 0; font-family: Inter, Avenir, Helvetica, Arial, sans
           <template #headerToolbar>
             <div class="toolbar">
               <div class="toolbar-left">
-                <EmojiPicker /><FilePicker /><VideoPicker /><ImagePicker />
+                <EmojiPicker />
+                <FilePicker />
+                <VideoPicker />
+                <ImagePicker />
+                <AudioCallPicker />
+                <VideoCallPicker />
+                <QuickConferencePicker />
               </div>
               <button class="icon-btn" @click="searchOpen = !searchOpen">
                 <IconSearch size="20" />
@@ -191,7 +203,10 @@ body { margin: 0; padding: 0; font-family: Inter, Avenir, Helvetica, Arial, sans
     </div>
 
     <div v-show="activeTab === 'contacts'" class="detail-panel">
-      <ContactInfo @send-message="activeTab = 'conversations'" />
+      <ContactInfo
+        @send-message="activeTab = 'conversations'"
+        @enter-group="activeTab = 'conversations'"
+      />
     </div>
   </div>
 </template>
@@ -203,6 +218,7 @@ import {
   ConversationList, ContactList, ContactInfo, ChatSetting,
   EmojiPicker, FilePicker, VideoPicker, ImagePicker,
   VariantType, useChatContext,
+  AudioCallPicker, VideoCallPicker, QuickConferencePicker
 } from '@tencentcloud/chat-uikit-vue3';
 import { IconMenu, IconSearch } from '@tencentcloud/uikit-base-component-vue3';
 import SideTab from './SideTab.vue';
@@ -341,7 +357,6 @@ login({
 
 > **注意：**
 >
-
 > 本文示例代码采用在[即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取 UserSig 的方案，**该方法仅适合本地跑通功能调试**。 正确的 UserSig 签发方式请参见[服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
 >
 
@@ -357,7 +372,7 @@ login({
 
 【shell】
 ``` bash
- npm run dev
+npm run dev
 ```
 
 > **注意：**
@@ -372,17 +387,15 @@ login({
 
 > **说明：**
 >
-
 > TUICallKit 是腾讯云推出一款音视频通话 UI 组件，通过集成该组件，您只需要编写几行代码就可以在聊天应用中体验音视频通话功能。
 >
-
 > 更多详细信息可参考：音视频通话-开通服务。
 >
 
 1. 安装 `@trtc/calls-uikit-vue` 依赖。
 
    ``` bash
-     npm install @trtc/calls-uikit-vue
+   npm install @trtc/calls-uikit-vue
    ```
 2. 从 `@trtc/calls-uikit-vue` 导出 `TUICallKit`，并挂载到 DOM 节点上。
 
@@ -403,7 +416,7 @@ login({
    import { TUICallKit } from '@trtc/calls-uikit-vue';
    </script>
    ```
-3. 打开 `<MessageInput />` 组件中 `#headerToolbar` 插槽内的注释。
+3. 在 `<MessageInput />` 组件中，使用 `#headerToolbar` 插槽控制输入框工具栏。
 
    ``` java
    <MessageInput class="message-input-container">
@@ -426,20 +439,42 @@ login({
    ```
 4. 拨打语音通话。
 
+### 视频会议
+
+TUIRoomKit 是一款定位企业会议、网络研讨会、在线教育等多人音视频会话场景的含 UI 低代码组件，提供房间管理、成员管理、屏幕分享等会控功能，支持标清、高清、超高清等多种画质。
+
+上述接入过程默认集成视频会议功能，如果需要关闭视频会议功能，在 `<MessageInput />` 组件中，使用 `#headerToolbar` 插槽控制输入框工具栏，注释掉视频会议的工具（QuickConferencePicker）即可。
+``` typescript
+<MessageInput>
+  <template #headerToolbar>
+    <div class="toolbar">
+      <div class="toolbar-left">
+        <EmojiPicker />
+        <FilePicker />
+        <VideoPicker />
+        <ImagePicker />
+        <AudioCallPicker />
+        <VideoCallPicker />
+        <!-- <QuickConferencePicker /> -->
+      </div>
+      <button class="icon-btn" @click="searchOpen = !searchOpen">
+        <IconSearch size="20" />
+      </button>
+    </div>
+  </template>
+</MessageInput>
+```
+
 ### 云端搜索
 
 > **说明：**
 >
-
 > 搜索，在客服、社交、在线教育、在线医疗、OA 等场景下是刚需功能，可帮助用户快速查找群组、用户、消息，提升产品使用体验和用户粘性。
 >
-
 > 由于 Web 平台本地存储特殊性等原因，Vue **无法实现本地搜索**，为了更好的满足对于搜索能力的需求，推出了**云端搜索能力**。**云端搜索功能支持全局搜索和会话内搜索，同时支持搜索群组、用户和消息。**
 >
-
 >
 >
-
 > 此功能属于增值服务，需要您购买云端搜索插件，请点击 [购买](https://console.cloud.tencent.com/im/plugin/TUICloudSearch)。
 >
 
@@ -475,7 +510,6 @@ UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信
 
 > **注意：**
 >
-
 > 本文示例代码采用在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取 UserSig 的方案，**该方法仅适合本地跑通功能调试**。 正确的 UserSig 签发方式请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
 >
 
@@ -520,7 +554,7 @@ const isChatSettingShow = ref(false);
 
 ### NPM 包
 
-[chat-uikit-vue3 npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue3)
+[chat-uikit-vue3 npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue3)
 
 ### GitHub