@tencent-rtc/mcp 1.2.9 → 1.3.1

package/resource/doc/chatuikit/vue/workflow.md

@@ -0,0 +1,395 @@
+# Vue Chat TUIKit Code Generation Workflow Instructions
+
+## 📋 Instruction Purpose
+
+Provide Agents with a **code generation blueprint for implementing Vue Chat TUIKit core features** and guide Agents to **prioritize using real-time documentation content obtained from tools**, specifically targeting Vue3 Web application scenarios.
+
+---
+
+## 🛑 Agent Execution Hard Constraints (Guardrails)
+
+Agents must strictly follow these instructions when generating code:
+
+### 1. Documentation-Driven Integration
+- Must strictly follow the steps in `llm_code_generation_instructions_md` from tool return results
+- **Must strictly generate code according to example code in integration documentation**, do not modify code structure and implementation methods arbitrarily
+- Code generation should completely follow best practices and examples provided by integration documentation to ensure code correctness and runnability
+
+### 2. CSS Style Mandatory Standards 🔴
+- **Must strictly generate according to complete CSS style code in integration documentation**, including:
+  - Official CSS class names (such as `.chat-layout`, `.chat-content-panel`, etc.)
+  - Official CSS variable definitions (such as `--bg-color-operate`, `--stroke-color-primary`, etc.)
+  - Official layout structure and style properties
+  - Official `#app` style configuration
+- **Prohibit creating any custom style class names or modifying official styles**
+- All style code must be completely copied from integration documentation without modification
+
+### 3. Silent Integration Execution 🔥
+**CRITICAL**: After all code writing is completed, dependencies must be automatically installed and the project started in the final step without waiting for user confirmation.
+
+**Mandatory Execution Requirements**:
+- **No Asking**: Do not ask users whether they need to start the project
+- **No Waiting**: Do not wait for users to manually execute startup commands
+- **Must Automate**: Must immediately execute integration steps after code completion
+- **Batch Execution**: Dependency installation and startup commands must be completed in the same execute_command call
+
+**Standard Execution Command**:
+```bash
+cd [project_path] && npm install && npm run dev
+```
+
+### 4. Zero External Configuration
+- Prohibit automatically creating any `config.js` or `.env` files
+- Key credentials like SDKAppID, UserID, and UserSig must be directly injected into code variables
+
+### 5. Automatic Authentication Credential Acquisition
+- Must call `get_usersig` tool to obtain test credentials, prohibit requiring users to manually input
+- UserID generation should remain simple (prohibit concatenating dynamic timestamps to prevent logic errors)
+
+### 6. Default Active Conversation
+- Integration logic must include `setActiveConversation` call
+- Default to open `C2Cadministrator` conversation
+
+### 7. Vue3 Composition API
+- Prioritize using `<script setup>` syntax
+- Use Vue3 Composition API (ref, reactive, computed, etc.)
+- Correctly import and use TUIKit components
+
+### 8. chat-only Mode Feature Restrictions (⚠️ Default Constraints + Exceptions When Users Actively Request)
+
+**Default Behavior**:
+When users choose chat-only mode, Agents **default exclude** the following extended features:
+- **Default no Sidebar integration** (sidebar)
+- **Default no ChatSetting integration** (chat settings)
+- **Default no in-conversation search functionality integration**
+- **Default no ConversationList integration** (conversation list)
+- **Default only retain core chat components**: `Chat`, `MessageList`, `ChatHeader`, `MessageInput`
+
+**Exception Handling**:
+If users **explicitly request** adding certain extended features (such as "need ChatSetting", "want to integrate search", etc.), Agents **should allow and execute**:
+- ✅ On the basis of core chat components, additionally integrate features explicitly requested by users
+- ✅ Only add features explicitly requested by users, do not arbitrarily expand other features
+- ✅ Correctly integrate required components according to integration documentation specifications
+
+**Judgment Criteria**:
+- User requirements contain explicit feature keywords (such as "ChatSetting", "search", "settings", "sidebar", etc.)
+- Users explicitly state they need a certain extended feature
+
+---
+
+## 📦 TUIKit Version and Dependency Automation
+
+After Agents generate code, they must automatically execute the following dependency chain:
+
+### 1. Core Dependency Version Recommendations
+
+```json
+{
+  "@tencentcloud/chat-uikit-vue3": "latest",
+  "@tencentcloud/call-uikit-vue": "latest"
+}
+```
+
+### 2. Build Environment Patches (Vite/esbuild)
+
+If a Vite project is detected, Agents must automatically add patch configuration in `package.json` to be compatible with esbuild-wasm:
+
+```json
+{
+  "overrides": { 
+    "esbuild": "npm:esbuild-wasm@latest" 
+  },
+  "resolutions": { 
+    "esbuild": "npm:esbuild-wasm@latest" 
+  }
+}
+```
+
+---
+
+## 📦 Vue3 TUIKit Component Description
+
+When generating code, Agents must understand and correctly use the following Vue3 components:
+
+| Component Name | Description | Use Case |
+|----------------|-------------|----------|
+| `ConversationList` | Conversation list component | full-featured mode, display all conversations |
+| `Chat` | Conversation container component | All modes, main chat container |
+| `MessageList` | Conversation message list component | Display chat message history |
+| `ChatHeader` | Conversation header information component | Display conversation title, member information, etc. |
+| `MessageInput` | Input box component | Message input and sending |
+| `ChatSetting` | Single chat and group chat management component | Conversation settings, group management, etc. |
+| `Search` | Cloud search component | Search messages, contacts, etc. |
+| `ContactList` | Contact component | full-featured mode, address book functionality |
+
+**Important Notes**:
+- Agents must strictly generate code according to component names and usage in integration documentation
+- Do not create or modify component names arbitrarily
+- Specific component usage methods are subject to integration documentation returned by tools
+
+---
+
+## 🛠️ Integration Mode Distribution (Goals)
+
+According to user requirements, Agents must choose corresponding execution paths:
+
+### 1. Full-Featured Integration (full-featured)
+
+**Objective**: Implement complete IM application similar to WeChat
+
+**Core Components**: 
+- `ConversationList` (conversation list)
+- `Chat` (chat container)
+- `ContactList` (address book)
+- `Search` (cloud search)
+
+**Execution Reference**: 
+- Refer to real-time acquired `integration.md` instructions in tool return results
+
+**Applicable Scenarios**:
+- Build independent chat applications
+- Need complete conversation management, address book, group management functionality
+- As core functional module of Web applications
+
+---
+
+### 2. Chat Window Only Integration (chat-only)
+
+**Objective**: Suitable for pure dialogue scenarios like customer service, consultation, detail page private chat
+
+**Core Components**: 
+- `Chat` (chat container)
+- `MessageList` (message list)
+- `ChatHeader` (chat header)
+- `MessageInput` (input box)
+
+**Execution Reference**: 
+- Refer to real-time acquired `integration.md` instructions in tool return results
+
+**Applicable Scenarios**:
+- Customer service consultation scenarios (users click consultation button to enter chat page)
+- Medical online consultation (patient-doctor one-on-one communication)
+- Order detail page private chat (buyer-seller communication)
+- Private messaging functionality in social applications
+
+**🔴 Default Excluded Features (Agents Must Comply)**:
+
+When generating chat-only mode code, Agents **default exclude** the following features and components:
+
+1. **Default no Sidebar integration (sidebar)**
+   - Default no generation of any sidebar-related code
+   - Default no import of conversation list, address book and other sidebar components
+   - Chat window should default to independent, sidebar-free pure chat interface
+
+2. **Default no ChatSetting integration (chat settings)**
+   - Default no generation of conversation settings, group management and other functionality
+   - Default no addition of settings button on the right side of ChatHeader
+   - Default no import of ChatSetting component
+
+3. **Default no in-conversation search functionality integration**
+   - Default no addition of message search functionality
+   - Default no addition of search entry in chat interface
+   - Default no import of Search component
+
+4. **Default no ConversationList integration (conversation list)**
+   - In chat-only mode, users specify conversation ID through external routing/parameters
+   - Default no need for conversation switching functionality
+
+---
+
+**⚠️ Exception Handling When Users Actively Request**:
+
+If users **explicitly request** adding certain extended features in chat-only mode, Agents **should allow and execute**:
+
+**Trigger Conditions** (any one satisfied):
+- Users explicitly state: "need ChatSetting", "want to integrate chat settings", "add conversation settings functionality"
+- Users explicitly state: "need Search", "want to add search functionality", "integrate in-conversation search"
+- Users explicitly state: "need Sidebar", "want to add sidebar"
+- Users explicitly propose other extended feature requirements
+
+**Agent Execution Process**:
+1. ✅ **Confirm User Requirements**: Recognize that users actively request adding extended features
+2. ✅ **Allow Integration**: On the basis of chat-only mode, additionally integrate components requested by users
+3. ✅ **Maintain Restraint**: Only add features explicitly requested by users, do not arbitrarily expand other features
+4. ✅ **Follow Documentation**: Correctly integrate required components according to integration documentation specifications
+
+---
+
+## 📞 Extended Features: Audio/Video Calling (TUICallKit)
+
+If requirements contain "calling" or "video" functionality, Agents must execute:
+
+### Component Mounting
+- Use `Teleport` to mount TUICallKit component to body
+
+### Interaction Injection
+
+**Inject calling buttons in the right slot of ChatHeader component**:
+- Icons: phone, camera, etc.
+- Component usage methods refer to integration documentation
+
+**Single Chat Logic**:
+- Initiate calls through `TUICallKitServer.call`
+- UserID automatically taken from currently active conversation
+
+**Group Chat Logic**:
+- Need to integrate member selection component
+- Guide users to select group members before initiating calls
+
+---
+
+## ✍️ Agent Code Generation Example Instructions (Prompts)
+
+When Agents start writing code, they should follow these semantic logics:
+
+**Full-Featured Integration (full-featured)**:
+> "According to `full-featured` mode, generate a Vue3 TUIKit integration page for me. Please automatically configure `C2Cadministrator` default active conversation and inject credentials obtained by `get_usersig` tool. Prohibit creating config files. **🔴 Important: Must strictly generate according to complete CSS style code in integration documentation, prohibit any customization or modification.**"
+
+**Chat Window Only Integration (chat-only)**:
+> "According to `chat-only` mode, generate a Vue3 TUIKit chat window for me. Please automatically configure `C2Cadministrator` default active conversation and inject credentials obtained by `get_usersig` tool. Prohibit creating config files. **Strictly exclude Sidebar, ChatSetting, in-conversation search and other features, only retain core chat components. 🔴 Important: Must strictly generate according to complete CSS style code in integration documentation, prohibit any custom styles.**"
+
+---
+
+## 📝 Key Points Summary
+
+| Category | Requirement |
+|----------|-------------|
+| **Framework Version** | Specifically for Vue3 projects |
+| **Documentation Priority** | Strictly follow latest documentation instructions returned by tools |
+| **🔴 CSS Styles** | **Strictly follow integration documentation CSS, prohibit any customization or modification** |
+| **Silent Integration** | Automatically install dependencies and start development server after code writing completion |
+| **Credential Injection** | Automatically call `get_usersig`, directly inject into code |
+| **Default Conversation** | Automatically activate `C2Cadministrator` conversation |
+| **Dependency Management** | Automatically detect and install required dependency packages |
+| **Build Tools** | Vite projects need to add esbuild-wasm patch configuration |
+| **Integration Modes** | Support full-featured (complete) and chat-only (chat only) two modes |
+| **chat-only Restrictions** | ⚠️ Default exclude Sidebar, ChatSetting, search functionality; allow integration when users actively request |
+
+---
+
+## 🎯 Agent Execution Checklist
+
+After completing code generation, Agents must confirm all the following items:
+
+### Project Initialization
+- [ ] Created Vue3 project or integrated into existing project
+- [ ] Installed `@tencentcloud/chat-uikit-vue3` dependency
+- [ ] If audio/video calling is needed, installed `@tencentcloud/call-uikit-vue`
+- [ ] If Vite project, added esbuild-wasm patch configuration
+
+### Code Generation
+- [ ] Correctly registered TUIKit components in main.js
+- [ ] Created main chat container component (ChatContainer.vue or similar)
+- [ ] Components use `<script setup>` syntax
+- [ ] 🔴 **CSS Styles Strictly Compliant**:
+  - [ ] Completely obtained all CSS style code from integration documentation
+  - [ ] Used official class names from integration documentation
+  - [ ] Completely copied CSS variable definitions from integration documentation
+  - [ ] Used layout style configuration from integration documentation
+  - [ ] Prohibited creating any custom style class names
+  - [ ] Prohibited modifying any style properties from integration documentation
+  - [ ] Style code completely consistent with integration documentation
+
+### Credentials and Login
+- [ ] 🔴 Called `get_usersig` tool to obtain test credentials
+- [ ] Directly injected SDKAppID, UserID, UserSig into code
+- [ ] Prohibited creating config.js or .env files
+- [ ] Implemented TUILogin.login() login logic
+
+### Conversation Activation
+- [ ] Added logic to default activate `C2Cadministrator` conversation
+- [ ] Used correct API (setActiveConversation)
+
+### Integration Mode
+- [ ] Selected correct integration mode according to user requirements (full-featured or chat-only)
+- [ ] full-featured mode: Integrated ConversationList, Chat, Contact and other components
+- [ ] chat-only mode: Integrated core components (Chat, MessageList, ChatHeader, MessageInput)
+- [ ] chat-only mode: Judged whether extended features need integration according to user requirements
+  - [ ] If users did not actively request, confirmed not including Sidebar, ChatSetting, Search and other components
+  - [ ] If users actively requested (such as "need ChatSetting"), additionally integrated features explicitly requested by users
+
+### Audio/Video Calling (Optional)
+- [ ] If calling functionality is needed, used Teleport to mount TUICallKit
+- [ ] Added calling buttons in right slot of ChatHeader component
+- [ ] Implemented single chat and group chat calling logic
+
+### Final Check
+- [ ] Called `record_result` to record integration results
+- [ ] Automatically installed dependencies (npm install)
+- [ ] Automatically started development server (npm run dev)
+- [ ] Project can run normally without errors
+
+---
+
+## 💡 Common Issue Handling
+
+### 1. Vite Build Errors
+
+**Problem Symptoms**: Vite project reports esbuild-related errors when running
+
+**Cause**: Some dependency packages are incompatible with esbuild
+
+**Solution**:
+Add patch configuration in `package.json`:
+```json
+{
+  "overrides": { 
+    "esbuild": "npm:esbuild-wasm@latest" 
+  },
+  "resolutions": { 
+    "esbuild": "npm:esbuild-wasm@latest" 
+  }
+}
+```
+
+### 2. chat-only Mode Contains Unwanted Features
+
+**Problem Symptoms**: chat-only mode generated code contains Sidebar, ChatSetting or in-conversation search functionality not requested by users
+
+**Cause**: Agent did not correctly judge user requirements and arbitrarily added extended features
+
+**Judgment Criteria**:
+- ✅ **Should Add**: Users explicitly state "need ChatSetting", "want to integrate search", "add settings functionality", etc.
+- ❌ **Should Not Add**: Users only say "build chat-only chat window" without mentioning extended features
+
+**Solution**: Regenerate code, ensure default does not include extended features
+
+### 3. CSS Styles Do Not Conform to Integration Documentation
+
+**Problem Symptoms**: Generated code uses custom style class names or modified official styles
+
+**Cause**: Agent did not strictly generate code according to CSS styles in integration documentation
+
+**Solution**:
+1. Re-call `get_web_chat_uikit_integration` to obtain latest integration documentation
+2. Completely copy all CSS style code from integration documentation
+3. Strictly use class names, variable names, style properties according to integration documentation
+4. Prohibit any form of modification or customization
+
+---
+
+## 🔗 Related Tool References
+
+### Must-Use Tools
+
+#### `get_usersig` - Obtain Complete Test Credentials (Mandatory Call)
+**Purpose**: Generate complete test account and authentication credentials, including:
+- `SDKAppID`: Application identifier
+- `userID`: Test user ID
+- `userSig`: User signature (valid for 7 days)
+
+**Call Timing**: Must call before generating login code
+
+**Usage Constraints**:
+- ✅ Must use complete credentials returned by tool
+- ❌ Prohibit requiring users to manually fill in SDKAppID and secretKey
+- ❌ Prohibit creating configuration files to store credentials
+
+#### `record_result` - Record Integration Results
+**Purpose**: Record integration process and results for statistics and analysis
+
+---
+
+**Applicable Framework**: Vue3  
+**TUIKit Version**: @tencentcloud/chat-uikit-vue3 > 4.0.0  
+**Build Tools**: Vite (Recommended) / Webpack

package/resource/doc/livekit/vue/components/co-guest-panel.md

@@ -44,19 +44,19 @@ Before performing quick integration, you need to refer to [preparations](https:/
 
 【npm】
 ``` bash
-npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
+npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
 ```
 
 
 【pnpm】
 ``` bash
-pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 
 【yarn】
 ``` bash
-yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 ### Step 3: Integrating the Link Management Panel

package/resource/doc/livekit/vue/components/live-view.md

@@ -38,19 +38,19 @@ Before quick integration, you need to refer to [preparations](https://write.woa.
 
 【npm】
 ``` bash
-npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
+npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
 ```
 
 
 【pnpm】
 ``` bash
-pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 
 【yarn】
 ``` bash
-yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 ### Step 3: Joining the Live Room and Performing Voice Chat
@@ -395,4 +395,4 @@ const isAnchor = (userInfo: SeatUserInfo) => {
 </script>
 
 <style scoped>.live-stream-view{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden}.live-stream-view.is-anchor{border:3px solid #ff6b35;box-shadow:0 0 20px rgba(255,107,53,.3)}.live-stream-view.is-guest{border:1px solid #ddd}.video-area{width:100%;height:100%;background:#000}.user-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));padding:10px;color:#fff}.user-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;margin-bottom:5px;background:#666}.anchor-badge{background:#ff6b35;color:#fff}.user-name{font-weight:700;margin-bottom:5px}.device-status span{margin-right:5px;opacity:.8}.device-status .camera.Off,.device-status .mic.Off{opacity:.3}</style>
-```
+```

package/resource/doc/livekit/vue/{components/live-list.md → live-list-integration.md}

@@ -9,7 +9,7 @@ This document provides a detailed introduction to the **Live Stream List Page**
 
 ### Step 1: Configuring the Environment and Activating the Service
 
-Before performing quick connection, you need to refer to [Preparations](https://write.woa.com/document/189228990450999296) to meet the required environment configuration and activate the corresponding service.
+Before performing quick connection, you need to refer to [Preparations](https://write.woa.com/document/163673134112337920) to meet the required environment configuration and activate the corresponding service.
 
 ### Step 2: Dependency Installation
 
@@ -20,19 +20,19 @@ You can choose any method below to install dependencies:
 
 【npm】
 ``` bash
-npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
+npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
 ```
 
 
 【pnpm】
 ``` bash
-pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 
 【yarn】
 ``` bash
-yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 ### Step 3: Live Stream List Page Integration
@@ -118,7 +118,7 @@ As shown in the above feature diagram, we also support you to customize the live
 
 ## Designate a Live Streaming Room
 
-To handle the redirect logic from the live list (or homepage) to the live streaming room, you need to configure Vue Router. In the `src` directory of your project, create a new `router` folder and create the `index.ts` file. Then, in your main file (such as **main.ts** or **index.ts**), import and use the router. See the [GitHub sample code](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/main.ts). If you need the live list, see the documentation for the [Live Stream List Page](https://write.woa.com/document/189228992611065856).
+To handle the redirect logic from the live list (or homepage) to the live streaming room, you need to configure Vue Router. In the `src` directory of your project, create a new `router` folder and create the `index.ts` file. Then, in your main file (such as **main.ts** or **index.ts**), import and use the router. See the [GitHub sample code](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/main.ts). If you need the live list, see the documentation for the [Live Stream List Page](https://write.woa.com/#).
 ``` typescript
 // live-list.vue can be incrementally added to your code
 <template>
@@ -186,7 +186,7 @@ Congratulations! You have successfully integrated the live broadcast list page.
 
 <td rowspan="1" colSpan="1" >The live streamer's entire live streaming process is supported, including pre-streaming preparation and post-streaming interactions.</td>
 
-<td rowspan="1" colSpan="1" >[Host Streaming](https://write.woa.com/document/189497714561167360)</td>
+<td rowspan="1" colSpan="1" >[Host Streaming](https://write.woa.com/document/194114399449153536)</td>
 </tr>
 
 <tr>
@@ -194,7 +194,7 @@ Congratulations! You have successfully integrated the live broadcast list page.
 
 <td rowspan="1" colSpan="1" >Viewers can enter the live streamer's room to watch the live stream, connect to the microphone, view live stream room information, view online viewers, and display comments.</td>
 
-<td rowspan="1" colSpan="1" >[Audience Viewing](https://write.woa.com/document/189571398058663936)</td>
+<td rowspan="1" colSpan="1" >[Audience Viewing](https://write.woa.com/document/194114585866043392)</td>
 </tr>
 </table>
 

package/resource/doc/livekit/vue/{components/live-player.md → live-player-desk-integration.md}

@@ -51,32 +51,32 @@ The watch page provides default behavior and style, but if the default behavior
 
 ### Step 1: Environment Configuration and Service Activation
 
-Before using Quick Access, you need to refer to [Preparations](https://write.woa.com/document/189231573727113216) configuration requirements and activate the corresponding services.
+Before using Quick Access, you need to refer to [Preparations](https://write.woa.com/document/163673134112337920) configuration requirements and activate the corresponding services.
 
 
 
 
 【npm】
 ``` bash
-npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
+npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
 ```
 
 
 【pnpm】
 ``` bash
-pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 
 【yarn】
 ``` bash
-yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
+yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
 ```
 
 ### Step 2: Access the viewing page
 
 Create a live-player.vue file in your project and copy the following code to integrate the watch page into your project.
-``` vue
+``` java
 <template>
   <UIKitProvider language="zh-CN">
     <div class="container">
@@ -190,7 +190,7 @@ As shown in the functional diagram above, we also support customizing the UI of
 #### Method 1: Playing by Specifying a LiveId
 
 If you need to specify a LiveId for playback, you need to add the following code based on the code in [step 3](https://write.woa.com/#c1b852bc-da02-4c9f-bb11-2a63582ce978) of the Quick Access section above. The reference method is as follows:
-``` typescript
+``` java
 // live-player.vue
 import { onMounted } from 'vue';
 import { useLiveState } from 'tuikit-atomicx-vue3';
@@ -256,7 +256,7 @@ Congratulations! You've successfully integrated the watch page. Next, you can im
 
 <td rowspan="1" colSpan="1" >The complete workflow for a host to start a stream, including pre-stream setup and various in-stream interactions.</td>
 
-<td rowspan="1" colSpan="1" >[Host Streaming](https://write.woa.com/document/189497714561167360)</td>
+<td rowspan="1" colSpan="1" >[Host Streaming](https://write.woa.com/document/194114399449153536)</td>
 </tr>
 
 <tr>
@@ -264,6 +264,6 @@ Congratulations! You've successfully integrated the watch page. Next, you can im
 
 <td rowspan="1" colSpan="1" >Display the live broadcast list interface and functions, including live broadcast list and room information display function</td>
 
-<td rowspan="1" colSpan="1" >[Live Stream List](https://write.woa.com/document/189592401543360512)</td>
+<td rowspan="1" colSpan="1" >[Live Stream List](https://write.woa.com/document/194114814480777216)</td>
 </tr>
 </table>