@tencentcloud/sdk-mcp 1.7.2 → 1.7.4

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

@@ -168,97 +168,7 @@ LoginStore.shared.login(sdkAppID: sdkAppID, userID: userID, userSig: userSig, co
 > 在正式的生产环境中，请在您的服务端生成 UserSig，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig 来进行鉴权。详见 服务端生成 UserSig。
 >
 
-### 步骤3：构建会话列表界面
-
-您可以基于 TUIKit SwiftUI 中的 ConversationList 组件，构建一个会话列表页面。ConversationList 内建的功能是：
-- 展示用户的会话列表，包含单聊和群聊会话。
-
-- 支持用户操作单个会话：置顶、删除、清空会话消息等。
-
-   将 ConversationList 封装为会话列表页，可参考 `chat/uikit/ConversationsPage.swift` 文件里的实现，`ConversationsPage` 主要做了以下工作：
-
-1. 在 ConversationList 上方添加了 headerView。
-
-2. 实现点击会话列表 cell 事件。
-
-3. 支持创建会话和群组功能：
-
-  1. 点击右上角 "+" 按钮可以创建新会话或群组。
-
-  2. 支持从联系人列表选择好友创建单聊。
-
-  3. 支持选择多个好友创建群聊。
-
-      核心示例代码如下所示：
-
-      ``` swift
-      import AtomicX
-      import AtomicXCore
-      import SwiftUI
-
-      public struct ConversationsPage: View {
-          ...
-
-          public var body: some View {
-              VStack(spacing: 0) {
-                  headerView
-                  ConversationList(
-                      onConversationClick: { conversation in
-                          // Customize onConversationClick event
-                          onShowMessage?(NavigationInfo(conversation: conversation))
-                      }
-                  )
-                  .environmentObject(themeState)
-              }
-              .onReceive(contactListStore.state.subscribe(StatePublisherSelector(keyPath: \ContactListState.friendList))) { friendList in
-                  if self.friendList != friendList {
-                      self.friendList = friendList
-                  }
-              }
-              .onAppear {
-                  contactListStore.fetchFriendList(completion: { _ in })
-              }
-              .overlay(
-                  // Click + to show this menu.
-                  ChatsMenuOverlay(
-                      showChatsMenu: $showChatsMenu,
-                      showStartConversation: $showStartConversation,
-                      showUserPicker: $showUserPicker
-                  )
-              )
-              ...
-          }
-          ...
-      }
-
-      private var headerView: some View {
-          HStack {
-              Text(LocalizedChatString("TabChats"))
-                  .font(.system(size: 34, weight: .semibold))
-                  .tracking(0.3)
-                  .foregroundColor(themeState.colors.textColorPrimary)
-                  .background(themeState.colors.listColorDefault)
-                  .padding(.leading, 16)
-              Spacer()
-              if AppBuilderConfig.shared.enableCreateConversation {
-                  Button(action: {
-                      showChatsMenu.toggle()
-                  }) {
-                      Image(systemName: "plus")
-                          .font(.system(size: 20))
-                          .foregroundColor(themeState.colors.buttonColorPrimaryDefault)
-                          .frame(width: 28, height: 28)
-                          .cornerRadius(14)
-                  }
-                  .padding(.trailing, 16)
-              }
-          }
-          .padding(.top, 12)
-          .padding(.bottom, 16)
-      }
-      ```
-
-### 步骤4：构建聊天界面
+### 步骤3：构建聊天界面
 
 您可以基于 TUIKit SwiftUI 中的 MessageList、MessageInput 组件，构建一个聊天页面。
 - MessageList 内建的功能是：
@@ -373,184 +283,7 @@ LoginStore.shared.login(sdkAppID: sdkAppID, userID: userID, userSig: userSig, co
    }
    ```
 
-### 步骤5：构建联系人界面
-
-您可以基于 TUIKit SwiftUI 中的 ContactList 组件，构建一个联系人页面。ContactList 内建的功能是：
-- 查看好友申请列表。
-
-- 查看已加入的群列表。
-
-- 处理群组邀请和申请。
-
-- 管理黑名单列表。
-
-- 查看好友。
-
-   将 ContactList 封装为联系人列表页，可参考 `chat/uikit/ContactsPage.swift` 文件里的实现，`ContactsPage` 主要做了以下工作：
-
-1. 在 ContactList 上方添加了 headerView。
-
-2. 实现点击联系人列表 cell 事件。
-
-3. 支持添加联系人和添加群组：
-
-  1. 点击右上角 "+" 按钮可以添加联系人或群组。
-
-  2. 支持根据 UserID 搜索目标联系人。
-
-  3. 支持根据 GroupID 搜索目标群组。
-
-      核心示例代码如下所示：
-
-      ``` swift
-      import AtomicX
-      import AtomicXCore
-      import SwiftUI
-
-      public struct ContactsPage: View {
-          ...
-
-          public var body: some View {
-              VStack(spacing: 0) {
-                  headerView
-                  ContactList(
-                      contactStore: contactStore,
-                      onShowMessage: onShowMessage,
-                      onContactClick: onContactClick,
-                      onGroupClick: onGroupClick,
-                      onNewFriendsClick: onNewFriendsClick,
-                      onGroupApplicationsClick: onGroupApplicationsClick,
-                      onGroupListClick: onGroupListClick,
-                      onBlackListClick: onBlackListClick
-                  )
-              }
-              .overlay(
-                  Group {
-                      if showAddContactMenu {
-                          VStack {
-                              HStack {
-                                  Spacer()
-                                  AddContactPopView(
-                                      onDismiss: {
-                                          showAddContactMenu = false
-                                      },
-                                      onShowAddFriend: {
-                                          showAddFriend = true
-                                      },
-                                      onShowJoinGroup: {
-                                          showJoinGroup = true
-                                      }
-                                  )
-                                  .padding(.trailing, 16)
-                                  .padding(.top, 50)
-                              }
-                              Spacer()
-                          }
-                          .background(
-                              Color.clear
-                                  .contentShape(Rectangle())
-                                  .onTapGesture {
-                                      showAddContactMenu = false
-                                  }
-                          )
-                          .animation(.easeInOut(duration: 0.2), value: showAddContactMenu)
-                      }
-                  }
-              )
-              .sheet(isPresented: $showAddFriend) {
-                  AddFriendView(contactStore: contactStore)
-              }
-              .sheet(isPresented: $showJoinGroup) {
-                  JoinGroupView(contactStore: contactStore)
-              }
-          }
-
-          private var headerView: some View {
-              HStack {
-                  Text(LocalizedChatString("TabContacts"))
-                      .font(.system(size: 34, weight: .semibold))
-                      .tracking(0.3)
-                      .foregroundColor(themeState.colors.textColorPrimary)
-                      .padding(.leading, 16)
-                  Spacer()
-                  Button(action: {
-                      showAddContactMenu = true
-                  }) {
-                      Image(systemName: "plus")
-                          .font(.system(size: 20))
-                          .foregroundColor(themeState.colors.buttonColorPrimaryDefault)
-                          .frame(width: 28, height: 28)
-                          .cornerRadius(14)
-                  }
-                  .padding(.trailing, 16)
-              }
-              .padding(.top, 12)
-              .padding(.bottom, 16)
-          }
-
-          ...
-      }
-      ```
-
-### 步骤6：完善界面间的跳转逻辑
-
-ConversationsPage、ChatPage、ContactsPage 中暴露了一些用户点击事件，您可以自定义事件来实现页面间的交互：
-| Page | 回调 | 建议跳转逻辑 |
-| --- | --- | --- |
-| <strong>ConversationsPage</strong> | <code>onConversationClick: ((NavigationInfo) -> Void)?</code> | 点击会话列表中的会话时触发，建议跳转到聊天页面（ChatPage）。 |
-| <strong>ContactPage</strong> | <code>onContactClick: ((AZOrderedListItem) -> Void)?</code> | 点击联系人 cell 时触发，建议跳转联系人详情页面（C2CChatSetting）。 |
-| <code>onGroupClick: ((AZOrderedListItem) -> Void)?</code> | 点击群组 cell 时触发，建议跳转群聊页面（ChatPage）。 |  |
-| <strong>ChatPage</strong> | <code>onBack: (() -> Void)?</code> | 点击返回按钮时触发，建议返回上一级页面。 |
-| <code>onUserAvatarClick: ((String) -> Void)?</code> | 点击消息中的用户头像时触发，建议跳转用户信息页（C2CChatSetting）。 |  |
-| <code>onNavigationAvatarClick: (() -> Void)?</code> | 点击导航栏中的头像时触发，建议跳转用户信息页（C2CChatSetting）或群聊信息页（GroupChatSetting）。 |  |
-
-**chat/demo/ChatDemo/Pages/HomePage.swift** 作为上述 Page 的粘合层，实现了各个 Page 的回调事件，核心示例代码如下：
-``` swift
-// 点击会话列表 cell 跳转
-ConversationsPage(
-    onConversationClick: { navigationInfo in
-        showChatPage(conversation: navigationInfo.conversation, locateMessage: navigationInfo.locateMessage)
-    }
-)
-
-// 点击联系人页面跳转
-ContactsPage(
-    onContactClick: { user in
-        showContactDetail(user)
-    },
-    onGroupClick: { group in
-        let conversation = createConversationFromGroup(group)
-        showChatPage(conversation: conversation)
-    }
-)
-
-// ChatNavPage 是在 ChatPage 外层封装了导航栏的页面，位于 Demo 层，用于演示跳转
-// 开发者可按需参考 ChatNavPage 封装 ChatPage。
-ChatNavPage(
-    conversation: conversation,
-    locateMessage: currentLocateMessage,
-    onBack: {
-        dismissChatPage()
-    },
-    onContactDelete: {
-        dismissChatPage()
-    },
-    onGroupDelete: {
-        dismissChatPage()
-    },
-    onNavigateToChat: { newConversation in
-        // First dismiss current chat page, then navigate to the new chat
-        dismissChatPage()
-        DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
-            showChatPage(conversation: newConversation)
-        }
-    }
-)
-```
-
-您可以参考上述回调说明及参考代码，实现 Page 之间交互逻辑。
-
-### 步骤7：接入智能客服 Desk 用户端（可选）
+### 步骤4：接入智能客服 Desk 用户端
 
 若需同时集成智能客服 Desk 用户端，请先 [开通智能客服 Desk 服务](https://cloud.tencent.com/document/product/269/96059)，并根据 [iOS 接入智能客服用户端](https://cloud.tencent.com/document/product/269/110808) 文档完成 `TencentCloudAIDeskCustomer` 包引入和配置，即可在您的应用中引入客服会话能力。
 ``` objectivec

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

@@ -188,13 +188,39 @@ function ChatLayout({ texts }: { texts: { emptyTitle: string; emptySub: string }
   const { theme } = useUIKit();
   const isDark = theme === 'dark';
 
-  const { activeConversation } = useChatContext();
+  const { activeConversation, sendMessage } = useChatContext();
+
+  const defaultOpenConversationID = 'C2Cadministrator';
+
+  // 仅发送一次欢迎语
+  const sendWelcomeMessageOnce = useRef(false);
 
   useEffect(() => {
     setIsChatSettingShow(false);
     setIsSearchInChatShow(false);
   }, [activeConversation?.conversationID]);
 
+  // 应用创建（组件挂载）时仅发送一次欢迎语；切换会话不会重复发送。
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (activeConversation?.conversationID === defaultOpenConversationID && !sendWelcomeMessageOnce.current) {
+        sendMessage({
+          type: 'textMessage',
+          text: `欢迎体验 Chat React 桌面端WEB应用 Demo～
+
+您可以按照以下顺序体验 IM 的核心功能：
+1. 在输入框内发送一条文本消息。
+2. 输入框上的工具栏支持，语音通话、视频通话、图片、视频、文件发送等扩展功能。
+3. 如果您想添加好友，可以前往联系人页面点击"添加好友/群聊"。
+`,
+        });
+        sendWelcomeMessageOnce.current = true;
+      }
+    }, 1000);
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeConversation?.conversationID]);
+
   return (
     <div className={`chat-layout ${isDark ? 'dark' : ''}`}>
       <SideTab activeTab={activeTab} onTabChange={setActiveTab} />

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

@@ -21,7 +21,7 @@ TUIKit 是一款基于腾讯云 IM SDK 和 UTS 原生渲染技术的 uni-app UI
    > H5 和小程序项目，如有需要请参考以下替代方案：
    >
    > - 打包 Web H5，可参考：Web H5（Vue3）。
-   > - 打包小程序，可参考：uni-app 完整版（Vue3/Vue2）。
+   > - 打包小程序，可参考：uni-app 标准版（Vue3/Vue2）。
    > - 接入过程中遇到任何卡点或有改进建议，欢迎通过 [UniApp Atomicx 接入体验反馈](https://wj.qq.com/s2/26120470/621d/) 反馈，官方会及时跟进处理。
 
 ## 集成步骤
@@ -472,6 +472,10 @@ import { initCallService } from '@/uni_modules/tuikit-atomic-x/server/callServic
 initCallService();
 ```
 
+## AI 助手：知识咨询与代码集成
+
+在接入 IM SDK 过程中，您可以通过 MCP 使用 AI 助手，快速完成知识咨询、报错排查和 UIKit 集成代码生成。支持 Web/Android/iOS/Flutter/uni-app 等平台，答案基于官方文档。适用于查询 SDK API、UI 组件用法、服务端 API 与 IM 产品配置等场景，[立即体验，提出您的第一个问题](https://cloud.tencent.com/document/product/269/126983)。
+
 ## 常见问题
 
 ### 技术兼容性类

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

@@ -135,11 +135,6 @@ login({
 });
 </script>
 
-<style>
-body { margin: 0; padding: 0; font-family: Inter, Avenir, Helvetica, Arial, sans-serif; }
-#app { width: 100vw; height: 100vh; }
-#app > div { display: flex; align-items: center; justify-content: center; }
-</style>
 ```
 
 #### 2.2 搭建聊天页面
@@ -156,7 +151,7 @@ body { margin: 0; padding: 0; font-family: Inter, Avenir, Helvetica, Arial, sans
     </div>
 
     <div v-show="activeTab === 'conversations'" class="chat-panel">
-      <Chat :PlaceholderEmpty="EmptyChatTpl">
+      <Chat :conversationID="defaultOpenConversationID" :PlaceholderEmpty="EmptyChatTpl">
         <ChatHeader>
           <template #ChatHeaderRight>
             <button class="icon-btn" @click="settingOpen = !settingOpen">
@@ -207,7 +202,7 @@ body { margin: 0; padding: 0; font-family: Inter, Avenir, Helvetica, Arial, sans
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted } from 'vue';
 import {
   Chat, Search, ChatHeader, MessageList, MessageInput,
   ConversationList, ContactList, ContactInfo, ChatSetting,
@@ -218,11 +213,29 @@ import {
 import { IconMenu, IconSearch } from '@tencentcloud/uikit-base-component-vue3';
 import SideTab from './SideTab.vue';
 
-const { activeConversation } = useChatContext();
+const { activeConversation, sendMessage } = useChatContext();
 
 const activeTab = ref<'conversations' | 'contacts'>('conversations');
 const settingOpen = ref(false);
 const searchOpen = ref(false);
+const defaultOpenConversationID = ref('C2Cadministrator');
+
+onMounted(() => {
+  setTimeout(() => {
+    if (activeConversation.value?.conversationID === defaultOpenConversationID.value) {
+      sendMessage({
+        type: 'textMessage',
+        text: `欢迎体验 Chat Vue3 桌面端WEB应用 Demo～
+
+您可以按照以下顺序体验 IM 的核心功能：
+1. 在输入框内发送一条文本消息。
+2. 输入框上的工具栏支持，语音通话、视频通话、快速会议、图片、视频、文件发送等扩展功能。
+3. 如果您想添加好友，可以前往联系人页面点击"添加好友/群聊"。
+`
+      });
+    }
+  }, 1000);
+});
 
 watch(() => activeConversation.value?.conversationID, () => {
   settingOpen.value = false;
@@ -243,26 +256,6 @@ const EmptyChatTpl = { template: `
 `};
 </script>
 
-<style scoped>
-.chat-layout { height: 60vh; aspect-ratio: 16/9; display: flex; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; }
-@media (max-width: 1920px) { .chat-layout { height: 80vh; } }
-.list-panel { width: 300px; display: flex; flex-direction: column; border-right: 1px solid var(--stroke-color-primary); overflow: hidden; }
-.detail-panel { flex: 1; }
-.icon-btn { padding: 4px 6px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 4px; font-size: 20px; color: var(--text-color-primary); cursor: pointer; outline: none; }
-.icon-btn:hover { background-color: var(--button-color-secondary-hover); }
-.toolbar { display: flex; justify-content: space-between; align-items: center; }
-.toolbar-left { display: flex; align-items: center; gap: 4px; }
-.search-sidebar { border-left: 1px solid var(--stroke-color-primary); display: flex; flex-direction: column; flex: 0 0 300px; }
-.search-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--stroke-color-primary); }
-.search-sidebar-title { font-size: 16px; font-weight: 500; color: var(--text-color-primary); }
-.chat-panel { flex: 1; position: relative; display: flex; }
-.float-sidebar { position: absolute; right: 0; top: 0; bottom: 0; min-width: 300px; max-width: 400px; display: flex; flex-direction: column; background-color: var(--bg-color-operate); box-shadow: -2px 0 8px rgba(0,0,0,.04), -4px 0 16px rgba(0,0,0,.06); overflow: auto; z-index: 1000; }
-.empty-chat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background-color: var(--bg-color-operate); border-left: 1px solid rgba(0,0,0,.08); }
-</style>
-
-<style>
-#app { text-align: start; }
-</style>
 ```
 
 #### 2.3 引入侧边导航
@@ -328,9 +321,6 @@ const handleTabChange = (tab: 'conversations' | 'contacts') => {
 };
 </script>
 
-<style scoped>
-.side-tab{width:72px;height:100vh;background:var(--bg-color-function);display:flex;flex-direction:column;align-items:center;padding:20px 0;transition:background 0.3s;}.avatar-wrapper{position:relative;margin-bottom:24px;cursor:pointer;}.avatar-wrapper:hover:deep(.avatar){transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,0.15);}.tooltip{position:absolute;left:60px;top:50%;transform:translateY(-50%);padding:8px 12px;background:rgba(0,0,0,0.85);color:#fff;border-radius:6px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:all 0.3s;z-index:1000;}.tooltip::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:rgba(0,0,0,0.85);}.avatar-wrapper:hover .tooltip{opacity:1;visibility:visible;}.tooltip-name{font-size:14px;font-weight:500;margin-bottom:4px;}.tooltip-id{font-size:12px;opacity:0.8;}.tabs{display:flex;flex-direction:column;gap:16px;}.tab-item{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;cursor:pointer;transition:all 0.3s;color:var(--text-color-primary);}.tab-item:hover{background:rgba(0,0,0,0.05);}.tab-item.active{background:var(--button-color-primary-default);color:var(--text-color-button);}.side-tab.dark{background:#1a1a1a;}.side-tab.dark .avatar-wrapper:hover:deep(.avatar){box-shadow:0 4px 12px rgba(255,255,255,0.2);}.side-tab.dark .tooltip{background:rgba(255,255,255,0.95);color:#1a1a1a;}.side-tab.dark .tooltip::before{border-right-color:rgba(255,255,255,0.95);}.side-tab.dark .tab-item:hover{background:rgba(255,255,255,0.1);}.side-tab.dark .tab-item.active{background:#1890ff;color:#fff;}
-</style>
 ```
 
 ### 步骤3：获取 SDKAppID、userID 和 userSig

package/resource/integration/livekit/preset/live/android/live-host-integration.md

@@ -142,6 +142,10 @@ class AnchorActivity : AppCompatActivity() {
 }
 ```
 
+## AI 助手：知识咨询与代码集成
+
+您在接入直播与语聊 SDK 过程中，可以通过 MCP 使用 AI 助手，快速完成知识咨询、报错排查和集成代码生成。支持 Web/Android/iOS/Flutter/uni-app/HarmonyOS 等平台，答案基于官方文档。适用于查询 AtomicXCore SDK 和 UI 组件用法以及集成文档等场景，[立即体验，提出您的第一个问题](https://cloud.tencent.com/document/product/647/129285)。
+
 ## 自定义您的界面布局
 
 `TUILiveKit` 支持灵活定制开播页与直播页的功能和样式，您可根据业务需求调整布局、隐藏 / 显示功能模块。

package/resource/integration/livekit/preset/live/ios/live-host-integration.md

@@ -263,6 +263,10 @@ extension YourAnchorPrepareViewController : AnchorPrepareViewDelegate {
 
 ###
 
+## AI 助手：知识咨询与代码集成
+
+您在接入直播与语聊 SDK 过程中，可以通过 MCP 使用 AI 助手，快速完成知识咨询、报错排查和集成代码生成。支持 Web/Android/iOS/Flutter/uni-app/HarmonyOS 等平台，答案基于官方文档。适用于查询 AtomicXCore SDK 和 UI 组件用法以及集成文档等场景，[立即体验，提出您的第一个问题](https://cloud.tencent.com/document/product/647/129285)。
+
 ## 自定义您的界面布局
 
 `TUILiveKit` 支持灵活定制开播页与直播页的功能和样式，您可根据业务需求调整布局、隐藏 / 显示功能模块。

package/resource/integration/livekit/preset/live/vue/live-list-integration.md

@@ -77,11 +77,10 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped>:global(*),:global(::after),:global(::before){box-sizing:border-box;margin:0}.container{display:flex;flex-direction:column;height:100vh;width:100vw;background:var(--bg-color-default)}.header{display:flex;align-items:center;flex-shrink:0}.title{margin:0;font-size:16px;font-weight:600;color:var(--text-color-primary);letter-spacing:-.5px}.main{flex:1;padding:24px;overflow-y:auto;min-height:0}</style>
 ```
 
 > **注意：**
-> 若您需要实现直播列表到进入直播间的跳转逻辑，可参考本文中 指定直播间 部分内容。
+> 若您需要实现直播列表到进入直播间的跳转逻辑，可参考本文中 [指定直播间](#61f1bbc9-1f23-4b69-aceb-7ab3f35a0ec2) 部分内容。
 >
 
 ## 启动项目
@@ -151,7 +150,7 @@ app.mount('#app');
 
 #### 步骤3：配置 live-list 文件
 
-您需要将以下内容合并到上文中的 步骤3 内容中，进行直播列表到观看页面的跳转。
+您需要将以下内容合并到上文中的 [步骤3](#c1b852bc-da02-4c9f-bb11-2a63582ce978) 内容中，进行直播列表到观看页面的跳转。
 ``` typescript
 // live-list.vue 可增量添加至您的代码中
 <template>
@@ -213,7 +212,7 @@ import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
 
 ### 设置昵称及头像
 
-如果您需要自定义昵称或头像，可以在 步骤 3 中的示例代码中通过 [setSelfInfo](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setSelfInfo) 进行设置，具体示例如下：
+如果您需要自定义昵称或头像，可以在 [步骤 3](#c1b852bc-da02-4c9f-bb11-2a63582ce978) 中的示例代码中通过 [setSelfInfo](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setSelfInfo) 进行设置，具体示例如下：
 ``` typescript
 import { useLoginState } from 'tuikit-atomicx-vue3';
 

package/resource/integration/livekit/preset/live/vue/live-player-desk-integration.md

@@ -87,7 +87,6 @@ onMounted(async () => {
 
 </script>
 
-<style>html,body,#app{height:100%;width:100%;margin:0;padding:0;overflow:hidden}:global(body){font-size:15px;line-height:1.6;text-rendering:optimizeLegibility;}:global(*),:global(*::before),:global(*::after){box-sizing:border-box;margin:0;}.container{display:grid;grid-template-columns:1fr 320px;height:100%;width:100%;gap:16px;padding:16px;background:var(--bg-color-default);box-sizing:border-box;overflow:hidden;}.live{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);}.header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--stroke-color-primary);}.back-btn{cursor:pointer;color:var(--text-color-tertiary);transition:color 0.2s;}.back-btn:hover{color:var(--text-color-link-hover);}.avatar{border:1px solid var(--uikit-color-white-7);}.user-name{color:var(--text-color-primary);font-weight:500;}.player{flex:1;background:var(--uikit-color-black-1);min-height:0;}.sidebar{display:flex;flex-direction:column;gap:16px;height:100%;overflow:hidden;}.audience{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);flex:1;min-height:0;}.barrage{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);flex:1;min-height:0;}.section-header{padding:16px;border-bottom:1px solid var(--stroke-color-primary);background:var(--bg-color-operate);}.section-header h3{margin:0;font-size:16px;font-weight:600;color:var(--text-color-primary);}.section-header span{font-weight:400;color:var(--text-color-secondary);font-size:14px;}.list{flex:1;min-height:0;overflow-y:auto;}.input{border-top:1px solid var(--stroke-color-primary);flex-shrink:0;height:48px;}@media (max-width:1200px){.container{grid-template-columns:1fr;grid-template-rows:60% 20% 20%;gap:12px;}.sidebar{gap:12px;}.audience,.barrage{min-height:200px;}}@media (max-width:768px){.container{padding:8px;gap:8px;grid-template-rows:50% 25% 25%;}.header,.section-header{padding:12px;}.sidebar{gap:8px;}}</style>
 ```
 
 ### 启动并运行示例

package/resource/integration/livekit/preset/live/vue/live-player-h5-integration.md

@@ -121,7 +121,6 @@ onMounted(async () => {
 
 </script>
 
-<style>html,body,#app{height:100%;width:100%;margin:0;padding:0;overflow:hidden}:global(body){font-size:15px;line-height:1.6;text-rendering:optimizeLegibility;}:global(*),:global(*::before),:global(*::after){box-sizing:border-box;margin:0;}.container{display:grid;grid-template-columns:1fr 320px;height:100%;width:100%;gap:16px;padding:16px;background:var(--bg-color-default);box-sizing:border-box;overflow:hidden;}.live{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);}.header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--stroke-color-primary);}.back-btn{cursor:pointer;color:var(--text-color-tertiary);transition:color 0.2s;}.back-btn:hover{color:var(--text-color-link-hover);}.avatar{border:1px solid var(--uikit-color-white-7);}.user-name{color:var(--text-color-primary);font-weight:500;}.player{flex:1;background:var(--uikit-color-black-1);min-height:0;}.sidebar{display:flex;flex-direction:column;gap:16px;height:100%;overflow:hidden;}.audience{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);flex:1;min-height:0;}.barrage{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);flex:1;min-height:0;}.section-header{padding:16px;border-bottom:1px solid var(--stroke-color-primary);background:var(--bg-color-operate);}.section-header h3{margin:0;font-size:16px;font-weight:600;color:var(--text-color-primary);}.section-header span{font-weight:400;color:var(--text-color-secondary);font-size:14px;}.list{flex:1;min-height:0;overflow-y:auto;}.input{border-top:1px solid var(--stroke-color-primary);flex-shrink:0;height:48px;}@media (max-width:1200px){.container{grid-template-columns:1fr;grid-template-rows:60% 20% 20%;gap:12px;}.sidebar{gap:12px;}.audience,.barrage{min-height:200px;}}@media (max-width:768px){.container{padding:8px;gap:8px;grid-template-rows:50% 25% 25%;}.header,.section-header{padding:12px;}.sidebar{gap:8px;}}</style>
 ```
 
 #### 核心 API 参数说明

package/resource/integration/livekit/preset/live/vue/live-pusher-integration.md

@@ -122,8 +122,6 @@ onMounted(async () => {
 
 </script>
 
-<style>html,body,#app{height:100%;width:100%;margin:0;padding:0}</style>
-<style scoped>.custom-live-pusher,.left-panel{flex-direction:column;display:flex}.custom-live-pusher,.live-title{color:var(--text-color-primary)}.live-controls,.tools-section,.top-controls{backdrop-filter:blur(10px)}*{box-sizing:border-box;margin:0;padding:0}:global(::before){box-sizing:border-box;margin:0;padding:0}.layout-label,.template-options{margin-bottom:16px}:global(body){line-height:1.6;color:var(--text-color-primary);background:var(--bg-color-default)}.custom-live-pusher{height:100vh;width:100vw;background:linear-gradient(135deg,var(--bg-color-default) 0,var(--bg-color-function) 100%);overflow:hidden}.top-controls{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--bg-color-operate);border-bottom:1px solid var(--stroke-color-primary);z-index:100;min-height:60px}.live-title{font-size:18px;font-weight:600;text-shadow:0 2px 4px var(--shadow-color)}.audience-count{font-size:14px;color:var(--text-color-error);background:var(--uikit-color-red-1);padding:6px 12px;border-radius:20px;border:1px solid var(--uikit-color-red-3)}.live-controls,.tools-section{background:var(--bg-color-operate)}.main-content{display:flex;flex:1;height:calc(100vh - 60px);gap:16px;padding:16px;overflow:hidden}.left-panel{width:320px;gap:16px;flex-shrink:0}.panel-title{font-size:16px;font-weight:600;color:var(--text-color-primary);margin-bottom:12px;text-align:left}.audience-section,.message-section,.scene-section{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;border:1px solid var(--stroke-color-primary);padding:16px;overflow:hidden}.scene-section{flex:1;min-height:0}.message-section{flex:1;min-height:0}.message-section :deep(input),.message-section :deep(textarea){text-align:left}.tools-section{border-radius:12px;padding:16px;border:1px solid var(--stroke-color-primary)}.center-panel{display:flex;flex-direction:column;flex:1;gap:16px;min-width:0}.stream-section{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--bg-color-operate);border-radius:12px;border:1px solid var(--stroke-color-primary);overflow:hidden}.stream-header{display:flex;justify-content:space-between;align-items:center;padding:22px;border-bottom:1px solid var(--stroke-color-primary)}.stream-title{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:500;color:var(--text-color-primary)}.stream-audience{font-size:14px;color:var(--text-color-primary)}.live-controls{display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius:12px;border:1px solid var(--stroke-color-primary);gap:16px}.live-controls button{padding:18px 20px}.right-panel{display:flex;flex-direction:column;width:320px;gap:16px;flex-shrink:0}.center-panel>.live-controls,.left-panel>*,.right-panel>*{background:var(--bg-color-operate);border-radius:12px;border:1px solid var(--stroke-color-primary);overflow:hidden}.left-panel>*{padding:16px}.left-panel>.panel-title,.scene-section>.panel-title,.audience-section>.panel-title,.message-section>.panel-title{padding:0;background:transparent;border:none;border-radius:0}.custom-icon-container,.device-setting{padding:8px 12px;background:var(--bg-color-function)}.stream-section :deep(>*:last-child){flex:1;min-height:300px}.bottom-panel,.device-setting{align-items:center;display:flex}.custom-icon-container:hover,.option-card:hover{border-color:var(--stroke-color-primary);background:var(--list-color-hover)}.bottom-panel{gap:16px;flex:1}.device-setting{gap:8px;border-radius:8px;border:1px solid var(--stroke-color-secondary)}.device-icon{cursor:pointer;color:var(--text-color-primary);transition:color .2s}.device-icon:hover{color:var(--text-color-link)}.device-slider{width:80px}.custom-icon-container{display:flex;align-items:center;gap:6px;border-radius:8px;border:1px solid var(--stroke-color-secondary);cursor:pointer;transition:.2s;position:relative}.custom-icon-container.disabled{opacity:.5;cursor:not-allowed}.custom-icon-container.disabled:hover{background:var(--bg-color-function);border-color:var(--stroke-color-secondary)}.custom-icon{width:16px;height:16px;display:inline-block;background-size:contain;background-repeat:no-repeat;background-position:center}.custom-text{font-size:12px;color:var(--text-color-secondary);white-space:nowrap}.unread-count{position:absolute;top:-4px;right:-4px;background:var(--text-color-error);color:var(--text-color-button);border-radius:10px;padding:2px 6px;font-size:10px;font-weight:600;min-width:16px;text-align:center;line-height:1}.layout-label,.option-info h4{color:var(--text-color-primary)}.layout-dialog{max-width:600px}.layout-label{font-size:16px;font-weight:600}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}.option-card{padding:16px;background:var(--bg-color-function);border:2px solid var(--stroke-color-secondary);border-radius:8px;cursor:pointer;transition:.2s;text-align:center}.option-card.active{border-color:var(--text-color-link);background:var(--bg-color-operate)}.option-info h4{margin:8px 0 0;font-size:12px}.option-icon{width:32px;height:32px;margin:0 auto;color:var(--text-color-secondary)}.co-guest-dialog{max-width:500px}.co-guest-panel{min-height:300px}</style>
 ```
 
 ### 启动并运行示例
@@ -144,6 +142,10 @@ npm run dev
 > 观看请使用与开播端不同的用户 ID，否则先登录的设备会被强制下线。
 >
 
+## AI 助手：知识咨询与代码集成
+
+您在接入直播与语聊 SDK 过程中，可以通过 MCP 使用 AI 助手，快速完成知识咨询、报错排查和集成代码生成。支持 Web/Android/iOS/Flutter/uni-app/HarmonyOS 等平台，答案基于官方文档。适用于查询  AtomicXCore SDK、UI 组件用法、集成文档等场景，[立即体验，提出您的第一个问题](https://cloud.tencent.com/document/product/647/129285)。
+
 ## 功能模块
 
 以下模块均为可独立复制的组件，需要先通过 集成主播开播页面，然后根据您的业务需求将下列各个模块的代码直接粘贴进对应的注释部分去即可。
@@ -228,8 +230,6 @@ watch(outputVolume, (newVal) => {
 });
 </script>
 
-<style scoped>.media-device-container{display:flex;align-items:center;gap:12px}.device-setting{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--bg-color-function);border-radius:8px;border:1px solid var(--stroke-color-secondary)}.device-slider{width:100px}.device-icon{cursor:pointer;color:var(--text-color-primary);transition:color .2s}.device-icon:hover{color:var(--text-color-link)}</style>
-
 ```
 
 ### 支持横竖屏推流能力
@@ -303,7 +303,6 @@ const handleOrientationSwitch = () => {
 };
 </script>
 
-<style scoped>.custom-icon-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:56px;height:56px;cursor:pointer;color:var(--text-color-primary);border-radius:12px;position:relative}.custom-icon{width:24px;height:24px;background:transparent}.custom-text{font-size:12px}.custom-icon-container:not(.disabled):hover{box-shadow:0 0 10px 0 var(--bg-color-mask)}.custom-icon-container:not(.disabled):hover .custom-icon,.custom-icon-container:not(.disabled):hover .custom-text{color:var(--text-color-link)}.custom-icon-container.disabled{cursor:not-allowed;opacity:.5;color:var(--text-color-secondary)}.custom-icon-container.disabled .custom-icon,.custom-icon-container.disabled .custom-text{color:var(--text-color-secondary);cursor:not-allowed}</style>
 ```
 
 TUILiveKit 支持横屏和竖屏两种推流模式，您可根据直播场景选择合适的推流方向：
@@ -528,9 +527,6 @@ function handleCancel() {
 }
 </script>
 
-<style scoped>
-.custom-icon-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 56px; height: 56px; cursor: pointer; color: var(--text-color-primary); border-radius: 12px; position: relative; } .custom-icon-container .custom-icon { display: inline-block; width: 24px; height: 24px; background: transparent; } .custom-icon-container .custom-text { font-size: 12px; font-weight: 400; } .custom-icon-container:not(.disabled):hover { box-shadow: 0 0 10px 0 var(--bg-color-mask); } .custom-icon-container:not(.disabled):hover .custom-icon { color: var(--text-color-link); } .custom-icon-container:not(.disabled):hover .custom-text { color: var(--text-color-link); } .custom-icon-container.disabled { cursor: not-allowed; opacity: 0.5; color: var(--text-color-tertiary); } .custom-icon-container.disabled .custom-icon { color: var(--text-color-tertiary); cursor: not-allowed; } .custom-icon-container.disabled .custom-text { color: var(--text-color-tertiary); } :deep(.layout-dialog) { padding: 24px; width: 480px; } :deep(.layout-dialog) .dialog-body { flex-wrap: wrap; } :deep(.layout-dialog) .dialog-footer { padding-top: 32px; } .layout-label { font-size: 14px; font-weight: 400; color: var(--text-color-primary, #ffffff); margin: 4px 0px 16px 0px; } .template-options { width: 100%; height: 100%; overflow: auto; } .template-options .options-grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start; } .template-options .options-grid .option-card { box-sizing: border-box; padding: 12px 13px; width: 208px; background: #3a3a3a; border: 2px solid transparent; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; text-align: center; } .template-options .options-grid .option-card:hover { background: #4a4a4a; border-color: #5a5a5a; } .template-options .options-grid .option-card.active { border: 2px solid var(--text-color-link-hover, #2B6AD6); background: var(--list-color-focused, #243047); } .template-options .options-grid .option-card.active .option-info h4 { color: #ffffff; } .template-options .options-grid .option-card .option-info { display: flex; align-items: center; justify-content: flex-start; gap: 8px; } .template-options .options-grid .option-card .option-info .option-icon { width: 24px; height: 24px; } .template-options .options-grid .option-card .option-info h4 { margin: 0; font-size: 14px; font-weight: 600; color: #ffffff; transition: color 0.2s ease; }
-</style>
 ```
 
 #### 直播布局模板介绍
@@ -634,7 +630,6 @@ watch(disabled, () => {
 });
 </script>
 
-<style scoped>.custom-icon-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:56px;height:56px;cursor:pointer;color:var(--text-color-primary);border-radius:12px;position:relative}.unread-count{position:absolute;top:0;right:0;background-color:var(--text-color-error);border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:12px}.custom-icon{width:24px;height:24px;background:transparent}.custom-text{font-size:12px}.custom-icon-container:not(.disabled):hover{box-shadow:0 0 10px 0 var(--bg-color-mask)}.custom-icon-container:not(.disabled):hover .custom-icon,.custom-icon-container:not(.disabled):hover .custom-text{color:var(--text-color-link)}.custom-icon-container.disabled{cursor:not-allowed;opacity:.5;color:var(--text-color-secondary)}.custom-icon-container.disabled .custom-icon{cursor:not-allowed}.custom-icon-container.disabled .custom-text{color:var(--text-color-secondary)}.co-guest-panel{height:560px}:deep(.co-guest-dialog){width:520px}</style>
 ```
 
 ## 自由定制