@tencent-rtc/mcp 1.2.9 → 1.3.0

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

@@ -0,0 +1,218 @@
+# Web Live TUIKit Code Generation Workflow Instructions (Vue)
+
+**【Instruction Purpose】**: Provide Agent with a **code generation blueprint** for implementing Vue Web Live TUIKit core functionalities, and guide Agent to **prioritize using the latest documentation content fetched in real-time via tools**.
+
+**💡 Special Reminder:**
+1. **When user requirements include 【Live List】, 【Broadcaster Page】, and 【Viewer Page】, Agent MUST add a 【Host/Viewer Identity Selection】 page or logic in the generated code to allow users to test with different UserIDs**.
+2. **When users need to implement co-guest (mic connection) features, call** `get_web_live_state_detail` **to obtain liveKit client API for implementing related functions**.
+
+---
+
+## 📦 UIKit Version & Dependency Instructions
+
+### Recommended Versions
+```json
+{
+  "tuikit-atomicx-vue3": "latest",
+  "@tencentcloud/uikit-base-component-vue3": "latest",
+}
+```
+
+### Automatic Dependency Installation Workflow
+After generating code, Agent **MUST automatically execute** the following steps:
+
+1. **Detect Dependency Completeness**: Check if `package.json` contains all required dependencies
+2. **Auto-install Dependencies**: Execute `npm install` or `pnpm install`
+3. **Verify Installation**: Confirm successful installation before prompting user to run the project
+
+### esbuild Issue Resolution
+Add the following content to `package.json`. `resolutions` is compatible with `yarn`, `overrides` is compatible with `npm` and `pnpm`:
+```json
+{
+ "resolutions": {
+    "esbuild": "npm:esbuild-wasm@latest"
+  },
+   "overrides": {
+    "esbuild": "npm:esbuild-wasm@latest"
+  }
+}
+```
+
+---
+
+## 🔐 Automatic Test Credential Generation
+
+### UserSig Auto-fetch Workflow
+
+Before generating code, Agent **MUST**:
+
+1. **Call `get_usersig` MCP tool** to automatically generate test account credentials
+2. **Generate Test UserIDs**:
+   - Broadcaster UserID: Format as live001 or host001
+   - Viewer UserID: Format as user001 or viewer001
+3. **Embed in Code**: Directly write the generated SDKAppID, userID (for both host and viewer), and userSig into the code's configuration section
+4. **Security Notice**: Clearly mark in code comments that these are test credentials; production environment MUST generate on backend
+
+---
+
+## ⚙️ Core Code Generation Workflow (LLM Action Guide)
+
+Agent, this tool has **fetched in real-time** the latest documentation content corresponding to the user's required functionalities (Goals), and attached this content **below this instruction** (in the `llm_code_generation_instructions_md` field).
+
+### Strictly Execute Steps:
+
+#### Step 0: Pre-preparation (Automated)
+```
+a. Call get_usersig tool to generate test credentials
+   - Broadcaster userID: Use format `live001`
+   - Viewer userID: Use format `user001`
+   
+b. Check and prepare project environment
+   - Verify dependency versions in package.json
+   - Automatically add to dependencies if missing
+   
+c. Execute dependency installation
+   - Run npm install or pnpm install
+   - Wait for completion and check for errors
+```
+
+#### Step 1: Select Functional Modules
+Based on user's specific functional requirements, select corresponding instructions from the following function blocks.
+
+#### Step 2: Use Real-time Documentation
+**MUST prioritize and exclusively** use the real-time documentation content **provided in this tool's return results** (not external URLs) to generate Vue code snippets.
+
+---
+
+## 🎯 Feature Implementation Instructions
+
+### 1. Implement Live List Page (`liveList`)
+
+**Target Component**: `liveList`
+
+**Code Generation Instructions**:
+- Generate Vue component structure, import `liveList`
+- **Auto-inject Test Credentials**: Use auto-generated **viewer** `SDKAppID`, `userID`, `userSig` during component initialization
+- **Core Logic**: Reference real-time documentation content in this tool's return results, extract latest API calls and example code
+
+**Dependent Components**: `liveList`
+
+**Post-generation Actions**:
+```bash
+# Agent auto-executes
+npm install  # Install dependencies
+npm run dev  # Start dev server
+```
+
+---
+
+### 2. Implement PC Live Viewer Page (`livePlayer` & `barrage`)
+
+**Target Components**: `livePlayer`, `barrage`
+
+**Code Generation Instructions**:
+- Generate viewer page based on real-time documentation examples
+- **Auto-inject Test Credentials**: Configure **viewer** test account during player initialization
+- **Core Logic**: Reference real-time documentation content in this tool's return results, MUST follow documentation steps to integrate `livePlayer` and `barrage` (bullet comments), and demonstrate how to monitor video stream status
+- **Interaction Optimization**: Add loading states, error handling, reconnection mechanisms
+
+**Dependent Components**: `livePlayer`, `barrage`
+
+---
+
+### 3. Implement H5 Live Viewer Page (`livePlayer` & `barrage`)
+
+**Target Components**: `livePlayer`, `barrage`
+
+**Code Generation Instructions**:
+- Generate viewer page based on real-time documentation examples
+- **Auto-inject Test Credentials**: Configure **viewer** test account during player initialization
+- **Core Logic**: Reference real-time documentation content in this tool's return results, MUST follow documentation steps to integrate `livePlayer` and `barrage` (bullet comments), and demonstrate how to monitor video stream status
+- **Interaction Optimization**: Add loading states, error handling, reconnection mechanisms
+
+**Dependent Components**: `livePlayer`, `barrage`
+
+---
+
+### 4. Implement Live Broadcasting Page (`livePusher`)
+
+**Target Component**: `livePusher`
+
+**Code Generation Instructions**:
+- Generate broadcasting page based on real-time documentation examples
+- **Auto-inject Test Credentials**: Configure **broadcaster** test account during pusher initialization
+- **Core Logic**: Reference real-time documentation content in this tool's return results, MUST include Vue logic to handle camera and microphone **permission requests and toggle controls**
+- **Device Detection**: Auto-detect available camera and microphone devices
+- **Error Handling**: Handle permission denial, device unavailability, and other exceptions
+
+**Dependent Components**: `livePusher`
+
+---
+
+### 5. Implement Live Co-guest Feature (`CoGuestPanel`)
+
+**Target Component**: `CoGuestPanel`
+
+**Code Generation Instructions**:
+- Generate complex components or logic modules for co-guest functionality based on real-time documentation examples
+- **Auto-inject Test Credentials**: Configure test accounts separately for broadcaster and co-guest viewers
+- **Core Logic**: Reference real-time documentation content in this tool's return results, code should demonstrate how to use `CoGuestPanel` to manage co-guest requests and coordinate pusher/player logic switching
+- **State Management**: Handle state transitions for co-guest invitations, acceptance, rejection, disconnection, etc.
+- **Multi-person Co-guest**: Support scenarios with multiple simultaneous co-guests
+
+**Dependent Components**: `CoGuestPanel`, `livePusher`, `livePlayer`
+
+---
+
+## 🔄 Complete Automation Workflow Summary
+
+```mermaid
+graph TD
+    A[Receive User Requirements] --> B[Call get_web_live_uikit_integration to Fetch Latest Docs]
+    B --> C[Check package.json Dependencies]
+    C --> D[Auto-add Missing Dependencies]
+    D --> E[Execute npm install]
+    E --> F[Generate Code Based on Real-time Docs]
+    F --> G[Call get_usersig to Generate Test Credentials]
+    G --> H[Inject Test Credentials into Code]
+    H --> I[Add Security Comments and Warnings]
+    I --> J[Start Dev Server]
+    J --> K[Output Test Info to User]
+```
+
+---
+
+## 📋 Agent Checklist
+
+After completing code generation, Agent MUST confirm:
+
+- [x] Called `get_usersig` to generate test credentials
+- [x] Embedded credentials into code configuration section
+- [x] Added security warning comments in code
+- [x] Checked `package.json` dependency completeness
+- [x] Auto-executed `npm install`
+- [x] Verified successful dependency installation
+- [x] Used real-time documentation content (not external URLs)
+- [x] Added error handling and logging output
+- [x] Provided test account information to user
+- [x] Prompted user to run `npm run dev`
+
+---
+
+## 🚨 Security Warning (MUST be included in generated code comments)
+
+```javascript
+/**
+ * ⚠️ Important Security Notice
+ * 
+ * 1. The current userSig is a test credential auto-generated by development tools
+ * 2. userSig validity period is 7 days, regeneration required after expiration
+ * 3. ❌ Frontend generation of userSig is STRICTLY PROHIBITED in production
+ * 4. ✅ Before going live, userSig MUST be generated on backend services
+ * 5. Reference documentation: https://trtc.io/document/34385
+ * 
+ * SDKAppID and secretKey retrieval locations:
+ * - Chat Application: https://console.trtc.io
+ * - TRTC Application: https://console.trtc.io
+ */
+```