@tencent-rtc/mcp 1.3.9 → 1.4.0

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

@@ -1,733 +0,0 @@
-# Vue TUIRoomKit (Atomicx Version) Code Generation Workflow Instructions
-
-## 📋 Instruction Purpose
-
-Provide Agent with a **code generation blueprint for implementing Vue TUIRoomKit (Atomicx version) core functionality**, and guide Agent to **prioritize using real-time latest documentation content obtained from tools**, supporting PC and H5 mobile Vue3 audio/video conference application scenarios.
-
----
-
-## 🛑 Agent Execution Hard Constraints (Guardrails)
-
-Agent 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 in integration documentation to ensure code correctness and runnability
-
-### 2. npm Package Integration Method (Recommended)
-- TUIRoomKit (Atomicx version) uses **direct npm package installation method**, no need to clone GitHub repository
-- Quick integration through npm/pnpm/yarn dependency installation
-- Source code export functionality available for deep UI customization
-
-### 3. Silent Integration Execution
-- Automatically install dependencies and start project after all code writing is completed
-- Prompt user to access local development server address in browser after successful startup
-
-### 4. Zero External Configuration (Testing Phase)
-- Prohibit automatic creation of any `.env` files for production environment configuration
-- Key credentials like SDKAppID and UserSig must be obtained from MCP tools or manually configured by users
-
-### 5. Authentication Credential Configuration
-- Use `get_usersig` MCP tool to obtain `SDKAppID`, `userId` and `userSig`
-- **⚠️ Important Security Notice**: Must inform users that client-side UserSig generation is only suitable for local testing, production environment must generate UserSig on server side
-
-### 6. Vue 3 Composition API
-- Prioritize using `<script setup lang="ts">` syntax (note TypeScript enabled)
-- Use Vue 3 Composition API (ref, reactive, computed, onMounted, etc.)
-- Correctly import and use TUIRoomKit components
-
-### 7. Platform Adaptation
-- Use `getPlatform()` to detect current platform, PC uses `ConferenceMainView`, H5 mobile uses `ConferenceMainViewH5`
-- Both component sets are already UI-adapted for PC and H5 respectively, ready to use out of the box
-
-### 8. Conference Component Loading Prerequisites (⚠️ Critical Constraint)
-- **Pages calling `conference.start()` or `conference.join()` must ensure conference main view components are already loaded in template**
-- Before calling start/join conference APIs, page template must include the following component structure:
-
-```vue
-<template>
-  <ConferenceMainView v-if="isPC"></ConferenceMainView>
-  <ConferenceMainViewH5 v-else></ConferenceMainViewH5>
-</template>
-```
-
-- If conference main view components are missing, `conference.start()` and `conference.join()` will not be able to render conference interface properly
-- When Agent generates conference room page code, must first import and render above components, then execute start/join conference logic
-
----
-
-## 📦 TUIRoomKit Version & Dependency Automation
-
-After Agent generates code, must automatically execute the following dependency chain:
-
-### 1. Core Dependency Version Recommendations
-
-```json
-{
-  "@tencentcloud/roomkit-web-vue3": "latest",              // TUIRoomKit main component package (includes ConferenceMainView, ConferenceMainViewH5, conference, etc.)
-  "tuikit-atomicx-vue3": "latest",                         // TUIRoomKit atomic component library (includes all Hooks and atomic UI components)
-  "@tencentcloud/uikit-base-component-vue3": "latest",     // Base UI component library (UIKitProvider, etc.)
-  "@tencentcloud/universal-api": "latest"                  // Cross-platform API utility library (getPlatform, etc.)
-}
-```
-
-**Dependency Description**:
-
-| Dependency Package | Purpose | Required | Description |
-|-------|------|---------|------|
-| **@tencentcloud/roomkit-web-vue3** | TUIRoomKit main component package | ✅ Required | Provides `ConferenceMainView` (PC), `ConferenceMainViewH5` (H5) and `conference` object (start/join meetings) |
-| **tuikit-atomicx-vue3** | Atomic component library | ✅ Required | Provides `useLoginState`, `useRoomState` and other Hooks, as well as `RoomLayoutTemplate` and other enum types |
-| **@tencentcloud/uikit-base-component-vue3** | Base UI component library | ✅ Required | Provides `UIKitProvider` component for configuring global theme and language |
-| **@tencentcloud/universal-api** | Cross-platform API utility library | ✅ Required | Provides `getPlatform()` method for detecting current running platform (pc/mobile) |
-
-**Installation Commands**:
-
-```bash
-# npm
-npm install @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
-
-# pnpm
-pnpm install @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
-
-# yarn
-yarn add @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
-```
-
-### 2. Development Environment Dependencies (TypeScript and SCSS)
-
-If user project does not yet support TypeScript and SCSS, Agent must automatically install:
-
-```json
-{
-  "typescript": "latest",  // TypeScript compiler
-  "sass": "latest"         // SCSS preprocessor
-}
-```
-
-### 3. Build Environment Patch (Vite/esbuild)
-
-If Vite project is detected, Agent 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"
-  }
-}
-```
-
----
-
-## 🎯 TUIRoomKit (Atomicx Version) Core Component Description
-
-### Main Components
-
-| Component Name | Description | Use Case |
-|---------|------|---------|
-| `ConferenceMainView` | PC conference main interface component | Desktop multi-person meetings |
-| `ConferenceMainViewH5` | H5 mobile conference main interface component | Mobile multi-person meetings |
-| `conference` | Conference control object | Start meeting (start) and join meeting (join) |
-| `UIKitProvider` | Global UI configuration component | Configure theme and language |
-
-### Core Hooks
-
-| Hook Name | Source | Description |
-|---------|------|------|
-| `useLoginState` | `tuikit-atomicx-vue3/room` | Provides `login`, `setSelfInfo` and other login methods |
-| `useRoomState` | `tuikit-atomicx-vue3/room` | Provides room state management |
-| `useDeviceState` | `tuikit-atomicx-vue3/room` | Provides device state management |
-| `useRoomEngine` | `tuikit-atomicx-vue3/room` | Get roomEngine instance |
-
-### Platform Detection
-
-```typescript
-import { getPlatform } from '@tencentcloud/universal-api';
-
-const isPC = getPlatform() === 'pc';
-// isPC === true  → Use ConferenceMainView
-// isPC === false → Use ConferenceMainViewH5
-```
-
----
-
-## 👥 Default Test User Description
-
-For convenient development and debugging, Agent generated code **provides 3 test users by default**:
-
-| User ID | User Name | Description |
-|---------|---------|------|
-| `user001` | User 001 | Test user 1 (can be host) |
-| `user002` | User 002 | Test user 2 (can be participant) |
-| `user003` | User 003 | Test user 3 (can be participant) |
-
-### Application Login Flow
-
-Agent generated complete application includes the following pages and flow:
-
-```mermaid
-graph LR
-    A[Home - User Selection Login] --> B{Select User}
-    B --> C[user001 Login]
-    B --> D[user002 Login]
-    B --> E[user003 Login]
-    C --> F[Conference Entry Page]
-    D --> F
-    E --> F
-    F --> G[Create Meeting]
-    F --> H[Join Meeting]
-    G --> I[Enter Conference Room]
-    H --> I
-```
-
-### Home Page Feature Requirements
-
-Agent generated home page (Home page) must include the following features:
-
-1. **User Selection Interface**:
-   - Provide dropdown or button group for users to select test user to login (user001/user002/user003)
-   - Display currently selected user's ID and name
-
-2. **Login Button**:
-   - After clicking login button, call `login()` and `setSelfInfo()` to complete user login
-   - Show loading state during login process
-
-3. **Redirect After Successful Login**:
-   - Automatically redirect to conference entry page after successful login
-   - Conference entry page provides "Create Meeting" and "Join Meeting" two entrances
-
-### Conference Entry Page Feature Requirements
-
-Conference entry page after successful login must include:
-
-1. **Display Current Login User Info**: Show logged-in user ID and name
-2. **Create Meeting Feature**:
-   - Input meeting ID (optional, auto-generate if not provided)
-   - Input meeting name (optional)
-   - Click "Create Meeting" button to call `conference.start()`
-3. **Join Meeting Feature**:
-   - Input meeting ID to join (required)
-   - Click "Join Meeting" button to call `conference.join()`
-
-### Code Implementation Example
-
-#### Test User Configuration
-
-When Agent generates code, need to call `get_usersig` MCP tool for each test user to get corresponding userSig, and **pre-fill** into code:
-
-```typescript
-// ⚠️ When Agent generates code, need to call get_usersig tool 3 times, to get userSig for user001, user002, user003 respectively
-// Then fill the obtained SDKAppID and each user's userSig into the configuration below
-
-const SDKAppID = 0; // Agent fills in SDKAppID obtained from get_usersig
-
-// Test user list (including pre-generated userSig)
-const TEST_USERS = [
-  { userId: 'user001', userName: 'User 001', userSig: '' }, // Agent fills in user001's userSig
-  { userId: 'user002', userName: 'User 002', userSig: '' }, // Agent fills in user002's userSig
-  { userId: 'user003', userName: 'User 003', userSig: '' }, // Agent fills in user003's userSig
-];
-```
-
-#### Home Page User Selection Component Example
-
-```vue
-<template>
-  <div class="login-container">
-    <h1>TUIRoomKit Audio/Video Conference</h1>
-    <div class="user-select">
-      <label>Select Test User:</label>
-      <select v-model="selectedUserId">
-        <option v-for="user in TEST_USERS" :key="user.userId" :value="user.userId">
-          {{ user.userName }} ({{ user.userId }})
-        </option>
-      </select>
-    </div>
-    <button @click="handleLogin" :disabled="isLogging">
-      {{ isLogging ? 'Logging in...' : 'Login' }}
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useLoginState } from 'tuikit-atomicx-vue3/room';
-
-// ⚠️ Following credentials are obtained and filled by Agent when generating code by calling get_usersig tool
-const SDKAppID = 0; // Agent fills in actual SDKAppID
-
-const TEST_USERS = [
-  { userId: 'user001', userName: 'User 001', userSig: '' }, // Agent fills in user001's userSig
-  { userId: 'user002', userName: 'User 002', userSig: '' }, // Agent fills in user002's userSig
-  { userId: 'user003', userName: 'User 003', userSig: '' }, // Agent fills in user003's userSig
-];
-
-const router = useRouter();
-const { login, setSelfInfo } = useLoginState();
-
-const selectedUserId = ref('user001');
-const isLogging = ref(false);
-
-const handleLogin = async () => {
-  const user = TEST_USERS.find(u => u.userId === selectedUserId.value);
-  if (!user) return;
-
-  isLogging.value = true;
-  try {
-    await login({
-      userId: user.userId,
-      userSig: user.userSig, // Use pre-filled userSig
-      sdkAppId: SDKAppID,
-    });
-    await setSelfInfo({
-      userName: user.userName,
-      avatarUrl: '',
-    });
-    // Login successful, redirect to conference entry page
-    router.push('/conference-entry');
-  } catch (error) {
-    console.error('Login failed:', error);
-  } finally {
-    isLogging.value = false;
-  }
-};
-</script>
-```
-
----
-
-## 🛠️ Integration Steps Detailed
-
-### Step 1: Install Project Dependencies
-
-```bash
-# npm
-npm install @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
-
-# pnpm
-pnpm install @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
-
-# yarn
-yarn add @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
-```
-
----
-
-### Step 2: Create Conference Page Component (⚠️ Critical Step)
-
-Create conference page component, **must load conference main view components in template first**, then call `conference.start()` or `conference.join()`:
-
-```vue
-<template>
-  <!-- ⚠️ Critical: Must load conference main view components in template first -->
-  <ConferenceMainView v-if="isPC"></ConferenceMainView>
-  <ConferenceMainViewH5 v-else></ConferenceMainViewH5>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { ConferenceMainView, ConferenceMainViewH5, conference } from '@tencentcloud/roomkit-web-vue3';
-import { getPlatform } from '@tencentcloud/universal-api';
-
-const route = useRoute();
-const isPC = ref(getPlatform() === 'pc');
-
-// Get meeting info from route parameters
-const roomId = route.query.roomId as string;
-const roomName = route.query.roomName as string;
-const action = route.query.action as 'start' | 'join'; // 'start' or 'join'
-
-onMounted(async () => {
-  // ⚠️ Ensure component is mounted (template rendered) before calling conference API
-  if (action === 'start') {
-    // Start new meeting
-    await conference.start({
-      roomId: roomId,
-      options: {
-        roomName: roomName || 'My Meeting',
-      },
-    });
-  } else if (action === 'join') {
-    // Join existing meeting
-    await conference.join({
-      roomId: roomId,
-    });
-  }
-});
-</script>
-```
-
-**⚠️ Mandatory Constraint Description**:
-- `conference.start()` and `conference.join()` **must be called after conference main view components are loaded**
-- Template must include `<ConferenceMainView>` and `<ConferenceMainViewH5>` components
-- Recommend calling in `onMounted` lifecycle to ensure components are mounted
-- If conference main view components are missing from template, calling API will not render conference interface properly
-
----
-
-### Step 3: Configure App.vue File
-
-Merge the following content into project's `App.vue` file:
-
-**Key Configuration Points**:
-- Configure global `UIKitProvider` component (set theme and language)
-- Configure global styles to ensure conference interface displays fullscreen
-- **Note**: User login logic is implemented in home page component (see "Default Test User Description" section)
-
-```vue
-<template>
-  <!-- Step 1: Configure global UIKitProvider -->
-  <UIKitProvider theme="light" language="en-US">
-    <!-- Your business components (Home → Conference Entry → Conference Room) -->
-    <router-view />
-  </UIKitProvider>
-</template>
-
-<script setup lang="ts">
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-</script>
-
-<!-- Step 2: Configure global styles -->
-<style>
-html, body {
-  padding: 0 !important;
-  margin: 0 !important;
-}
-
-#app {
-  width: 100% !important;
-  height: 100% !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  max-width: 100% !important;
-  max-height: 100% !important;
-  text-align: left !important;
-  overflow: hidden;
-}
-</style>
-```
-
-**Agent Execution Requirements**:
-- ⚠️ User login logic is implemented in home page component, not in App.vue
-- Must call `get_usersig` MCP tool to get SDKAppID, userId, userSig for each test user
-
----
-
-### Step 4: Start New Meeting (Complete Example)
-
-Navigate from conference entry page to conference room page and start meeting:
-
-```typescript
-// Start meeting logic in conference entry page
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const startConference = () => {
-  // Navigate to conference room page, pass meeting parameters
-  router.push({
-    path: '/room',
-    query: {
-      action: 'start',
-      roomId: '123456',      // Meeting ID
-      roomName: 'My Temporary Meeting', // Meeting name
-    },
-  });
-};
-```
-
-**⚠️ Note**: Actual `conference.start()` call is executed in conference room page component (Step 2) `onMounted`, ensuring conference main view components are loaded.
-
----
-
-### Step 5: Join Existing Meeting (Complete Example)
-
-Navigate from conference entry page to conference room page and join meeting:
-
-```typescript
-// Join meeting logic in conference entry page
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const joinConference = () => {
-  // Navigate to conference room page, pass meeting parameters
-  router.push({
-    path: '/room',
-    query: {
-      action: 'join',
-      roomId: '123456', // Meeting ID to join
-    },
-  });
-};
-```
-
-**⚠️ Note**: Actual `conference.join()` call is executed in conference room page component (Step 2) `onMounted`, ensuring conference main view components are loaded.
-
----
-
-## 🎨 UI Customization Features
-
-### 1. Theme and Language Configuration
-
-Modify theme and language by configuring `UIKitProvider` parameters:
-
-| UIKitProvider Parameter | Available Values | Default Value |
-|-------------------|--------|--------|
-| theme | "light" \| "dark" | "light" |
-| language | "zh-CN" \| "en-US" | "en-US" |
-
-```typescript
-<UIKitProvider theme="dark" language="en-US">
-  <router-view />
-</UIKitProvider>
-```
-
----
-
-### 2. Source Code Export (Deep Customization)
-
-For deep customization of TUIRoomKit interface, use source code export feature:
-
-```bash
-# Execute source code export script, default copy path is ./src/components/RoomKit
-node ./node_modules/@tencentcloud/roomkit-web-vue3/scripts/eject.js
-```
-
-After export, modify component import paths:
-
-```typescript
-// Before: Import from npm package
-- import { ConferenceMainView, conference } from '@tencentcloud/roomkit-web-vue3';
-
-// After: Import from local source code
-+ import { ConferenceMainView, ConferenceMainViewH5, conference } from './components/RoomKit/index.ts';
-```
-
----
-
-### 3. Custom Room Stream Layout
-
-TUIRoomKit supports three stream layouts:
-
-| Layout Type | Enum Value | Description |
-|---------|--------|------|
-| Grid Layout | `RoomLayoutTemplate.GridLayout` | Default layout |
-| Sidebar Layout | `RoomLayoutTemplate.SidebarLayout` | Sidebar layout |
-| Top Bar Layout | `RoomLayoutTemplate.CinemaLayout` | Top bar layout |
-
-After exporting source code, modify in `RoomKit/views/ConferenceMainView/index.vue`:
-
-```typescript
-import { RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';
-
-// Change default layout to sidebar layout
-const participantViewLayout = ref(RoomLayoutTemplate.SidebarLayout);
-
-function handleLayoutUpdate(layout: RoomLayoutTemplate) {
-  participantViewLayout.value = layout;
-}
-```
-
----
-
-### 4. Custom Video Stream Widgets
-
-After exporting source code, modify the following component to customize video stream widgets:
-
-```
-src/components/RoomKit/components/RoomLayoutView/ParticipantViewUI/ParticipantViewUI.vue
-```
-
----
-
-### 5. Configure User Contact List
-
-TUIRoomKit scheduled meetings and in-meeting calls user selection list displays user relationship chain by default. Batch import steps:
-
-1. Use [Account Management > Import Multiple Accounts](https://cloud.tencent.com/document/product/269/4919) REST API to batch import user accounts
-2. Use [Friend Management > Import Friends](https://cloud.tencent.com/document/product/269/8301) REST API to batch import user relationship chain
-
----
-
-## 🔄 Complete Automation Process Summary
-
-```mermaid
-graph TD
-    A[Receive User Requirements] --> B[Install npm Dependencies]
-    B --> C{Detect TypeScript and SCSS Support}
-    C -->|Not Installed| D[Install typescript and sass]
-    C -->|Already Installed| E[Skip]
-    D --> F[Create Home Page - User Selection Login Interface]
-    E --> F
-    F --> G[Configure 3 Test Users: user001/user002/user003]
-    G --> H[Call get_usersig to Get Credentials for Each User]
-    H --> I[Create Conference Entry Page - Create/Join Meeting]
-    I --> J[Create Conference Room Page Component]
-    J --> K[Configure App.vue: UIKitProvider + Global Styles]
-    K --> L{User Needs Deep UI Customization?}
-    L -->|Yes| M[Execute Source Code Export Script]
-    L -->|No| N[Use Default Configuration]
-    M --> O[Provide UI Customization Solutions: Theme/Layout/Widgets]
-    N --> P[record_result Record Integration Results]
-    O --> P
-    P --> Q[Auto Start Development Server: npm run dev]
-    Q --> R[Prompt User to Access in Browser and Select User Login]
-```
-
----
-
-## ✍️ Agent Code Generation Example Instructions (Prompts)
-
-**Basic Integration**:
-> "Following TUIRoomKit (Atomicx version) npm package integration method, generate a Vue 3 audio/video conference application for me. Home page provides 3 test user (user001/user002/user003) selection interface, after user selection click login, redirect to conference entry page after successful login, provide create meeting and join meeting functions. Use get_usersig tool to get authentication credentials for each test user. After startup, prompt me to access debug address in browser. **Please be sure to inform me: The currently generated code is only suitable for local testing, production environment must generate UserSig on server side.**"
-
-**H5 Mobile Conference**:
-> "Following TUIRoomKit (Atomicx version) integration, generate a Vue 3 conference application that supports both PC and H5 mobile. Home page provides test user selection and login functionality, use getPlatform() to detect platform, PC uses ConferenceMainView, H5 uses ConferenceMainViewH5."
-
-**Deep UI Customization**:
-> "Following TUIRoomKit (Atomicx version) integration, generate a Vue 3 conference application. Include user selection login process, need to execute source code export, customize video stream layout to sidebar layout, and customize video stream widget styles."
-
----
-
-## 📝 Key Points Summary
-
-| Category | Requirements |
-|------|------|
-| **Framework Version** | Vue 3.4.21 and above |
-| **Platform Support** | PC + H5 mobile (responsive adaptation, ready to use) |
-| **Integration Method** | Direct npm package installation (recommended); source code export available for deep customization |
-| **Documentation First** | Strictly follow latest documentation instructions returned by tools |
-| **Silent Integration** | Auto install dependencies and start development server after code writing completion |
-| **Credential Acquisition** | Call `get_usersig` MCP tool to get SDKAppID, userId, userSig |
-| **Security Notice** | ⚠️ Must inform users: Client-side UserSig generation only suitable for testing, production environment must generate on server side |
-| **Multi-language** | Supports Chinese (zh-CN) and English (en-US) |
-| **UI Customization** | Supports theme, layout, video stream widget customization (requires source code export) |
-
----
-
-## 🎯 Agent Execution Checklist
-
-### Project Initialization
-- [ ] Installed core dependencies: `@tencentcloud/roomkit-web-vue3`, `tuikit-atomicx-vue3`, `@tencentcloud/uikit-base-component-vue3`, `@tencentcloud/universal-api`
-- [ ] Detected and installed TypeScript and SCSS development dependencies (if user project not installed)
-
-### Code Generation
-- [ ] Created conference page component, using `getPlatform()` to detect platform
-- [ ] Configured `App.vue`: UIKitProvider + global styles
-- [ ] Components use `<script setup lang="ts">` syntax
-
-### Test Users and Login Flow
-- [ ] 🔴 Configured 3 default test users: user001, user002, user003
-- [ ] Created home page user selection interface (dropdown or button group to select test users)
-- [ ] Implemented login button and login loading state
-- [ ] Redirect to conference entry page after successful login
-
-### Conference Entry Page
-- [ ] Display current login user information
-- [ ] Implemented "Create Meeting" functionality (call `conference.start()`)
-- [ ] Implemented "Join Meeting" functionality (call `conference.join()`)
-
-### Credentials and Login
-- [ ] 🔴 Called `get_usersig` MCP tool to get SDKAppID, userId, userSig for each test user
-- [ ] Implemented `login()` and `setSelfInfo()` login logic in home page
-- [ ] ⚠️ **Informed user**: Currently generated code only suitable for local testing, production environment must generate UserSig on server side
-
-### UI Configuration
-- [ ] Configured theme (light/dark) and language (zh-CN/en-US) according to user requirements
-- [ ] If user needs deep customization, executed source code export script
-
-### Final Check
-- [ ] Called `record_result` to record integration results
-- [ ] Auto installed dependencies (npm install)
-- [ ] Auto started development server (npm run dev)
-- [ ] Prompted user to access local development server address in browser
-- [ ] Project runs normally without errors
-
----
-
-## 🔗 Related Tool References
-
-### Must-Use Tools
-
-#### `get_usersig` - Get Authentication Credentials
-**Purpose**: Get Tencent Cloud application credentials from MCP environment variables
-- `SDKAppID`: Application identifier
-- `userId`: User ID
-- `userSig`: User signature
-
-**Usage Constraints**:
-- ✅ Must call this tool to get credentials
-- ⚠️ Must inform users: Client-side UserSig generation only suitable for testing, production environment must generate on server side
-
-#### `record_result` - Record Integration Results
-**Purpose**: Record integration process and results for statistics and analysis
-
-**Call Timing**: Call after completing all integration steps and successfully starting project
-
----
-
-## 📚 Related Resource Links
-
-- **TUIRoomKit GitHub Repository**: https://github.com/Tencent-RTC/TUIRoomKit
-- **Tencent Cloud TRTC Console**: https://console.cloud.tencent.com/trtc
-- **How to Calculate UserSig in Production**: https://cloud.tencent.com/document/product/647/17275#formal
-- **URL Domain and Protocol Restrictions**: https://cloud.tencent.com/document/product/647/17249
-- **Dealing with Firewall Restrictions (Internal Proxy)**: https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-34-advanced-proxy.html
-
----
-
-## ❓ Frequently Asked Questions
-
-### TUIRoomKit works normally in local development, but cannot capture camera/microphone after deploying online?
-
-**Root Cause**: Browsers have strict restrictions on audio/video device capture for security and privacy protection. Capture is only allowed in secure environments (https://, localhost, file://).
-
-**Solution**: Must deploy web pages using HTTPS protocol and ensure valid security certificates.
-
-### Does TUIRoomKit support iframe integration?
-
-Yes. When using iframe integration, need to configure allow attribute to grant necessary permissions:
-
-```html
-<iframe allow="microphone; camera; display-capture; display; fullscreen;">
-```
-
-### Does TUIRoomKit support setting internal network proxy?
-
-Yes. Please set internal network proxy parameters before entering room:
-
-```typescript
-import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
-import { useRoomEngine } from 'tuikit-atomicx-vue3/room';
-
-const { roomEngine } = useRoomEngine();
-
-TUIRoomEngine.once('ready', () => {
-  const trtcCloud = roomEngine.instance?.getTRTCCloud();
-  trtcCloud.callExperimentalAPI(JSON.stringify({
-    api: 'setNetworkProxy',
-    params: {
-      websocketProxy: "wss://proxy.example.com/ws/",
-      turnServer: [{
-        url: '14.3.3.3:3478',
-        username: 'turn',
-        credential: 'turn',
-      }],
-      iceTransportPolicy: 'relay',
-    },
-  }));
-});
-```
-
----
-
-**Supported Framework**: Vue 3.4.21+  
-**Platform Support**: PC + H5 Mobile  
-**TUIRoomKit Version**: @tencentcloud/roomkit-web-vue3 (Atomicx Version)  
-**Build Tool**: Vite (Recommended)