@tencent-rtc/mcp 1.3.8 → 1.3.9

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

@@ -2,48 +2,58 @@
 
 ## 📋 Instruction Purpose
 
-Provide Agents with a **code generation blueprint for implementing Vue TUIRoomKit (Atomicx version) core features**, and guide Agents to **prioritize using real-time documentation content obtained from tools**, specifically for PC-side Vue3 audio/video meeting application scenarios.
+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)
 
-Agents must strictly follow these instructions when generating code:
+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 the tool return results
-- **Must strictly generate code according to example code in integration documentation**, do not modify code structure and implementation methods without authorization
-- Code generation should fully follow best practices and examples provided in integration documentation to ensure code correctness and runnability
+- 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. Source Code Integration Method
-- TUIRoomKit (Atomicx version) uses **source code integration method**, requires cloning from GitHub and copying core source code files
-- Must follow documentation guidance to copy specified source code folders (assets, components, hooks, i18n, utils, config, views) to user project
-- When copying, must ensure merging with existing folders in user project, avoid direct overwriting
+### 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
-- After all code is written, automatically install dependencies and start project in the final step
-- After successful startup, prompt user to access local development server address in browser
+- 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 automatically creating any `.env` files for production environment configuration
-- Critical credentials such as SDKAppID and SDKSecretKey must be read from MCP environment variables and directly configured in `src/config/basic-info-config.js`
+- 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
-- Read `SDKAppID` and `SDKSecretKey` from MCP environment variables, prohibit requiring user manual input
-- UserID generation should be kept simple (can use random number generation, such as `user_${Math.ceil(Math.random()*999)}`)
-- **⚠️ Important Security Warning**: Must inform users that client-side UserSig generation is only suitable for local testing, production environment must generate UserSig on server side
+- 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 enabling TypeScript)
+- 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 Atomicx components
+- Correctly import and use TUIRoomKit components
 
-### 7. Route Configuration
-- Must configure Vue Router, map `home.vue` to homepage (path: `/home`), map `room.vue` to meeting room page (path: `/room`)
-- Default root path redirects to `/home`
+### 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. Environment Dependency Preparation
-- Ensure user project supports TypeScript and SCSS, if not installed need to automatically install `typescript` and `sass` development dependencies
+### 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
 
 ---
 
@@ -55,35 +65,34 @@ After Agent generates code, must automatically execute the following dependency
 
 ```json
 {
-  "tuikit-atomicx-vue3": "latest",                        // TUIRoomKit atomized component library (includes all Hooks and UI components, will automatically install tuiroom-engine-js)
-  "@tencentcloud/uikit-base-component-vue3": "latest",    // Base UI component library (buttons, input boxes and other common components)
-  "@tencentcloud/tuiroom-engine-js": "latest",            // TRTC audio/video engine SDK (underlying capabilities)
-  "vue-router": "^4.0.0"                                   // Vue Router (for page navigation)
+  "@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 | Manual Installation Required | Description |
-|-------|------|----------------|------|
-| **tuikit-atomicx-vue3** | TUIRoomKit core package | ✅ Required | Contains all atomized Hooks (useLoginState, useRoomState, useDeviceState, etc.) and atomized UI components (RoomLayoutView, ParticipantViewUI, etc.). Will automatically install `@tencentcloud/tuiroom-engine-js` as dependency |
-| **@tencentcloud/uikit-base-component-vue3** | Base UI component library | ✅ Required | Provides common buttons, input boxes, dialogs and other base components, used internally by TUIRoomKit atomized components |
-| **@tencentcloud/tuiroom-engine-js** | TRTC audio/video engine SDK | ⚠️ Optional | Provides underlying audio/video capabilities (device management, audio/video capture, push/pull stream, etc.). Since `tuikit-atomicx-vue3` will automatically install this dependency, usually no manual installation needed. But if version consistency is required, can manually specify version |
-| **vue-router** | Vue official routing library | ✅ Required | Used to implement route navigation between meeting entry page (`/home`) and meeting room page (`/room`) |
+| 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) |
 
-**Dependency Relationships**:
-```
-User Project
-  ├── tuikit-atomicx-vue3 (manual install)
-  │   └── @tencentcloud/tuiroom-engine-js (auto install)
-  ├── @tencentcloud/uikit-base-component-vue3 (manual install)
-  └── vue-router (manual install)
-```
+**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
 
-**Best Practices**:
-- ✅ **Recommended**: Only manually install `tuikit-atomicx-vue3`, `@tencentcloud/uikit-base-component-vue3`, `vue-router`, let `@tencentcloud/tuiroom-engine-js` auto-install
-- ⚠️ **Optional**: If precise control of `@tencentcloud/tuiroom-engine-js` version is needed, can manually install and specify version number
-- ❌ **Not Recommended**: Specifying different versions of `@tencentcloud/tuiroom-engine-js` in both `dependencies` and manual installation may cause version conflicts
+# 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)
 
@@ -91,212 +100,382 @@ If user project does not yet support TypeScript and SCSS, Agent must automatical
 
 ```json
 {
-  "typescript": "latest",  // TypeScript compiler (for type checking and compilation)
-  "sass": "latest"         // SCSS preprocessor (for compiling .scss style files)
+  "typescript": "latest",  // TypeScript compiler
+  "sass": "latest"         // SCSS preprocessor
 }
 ```
 
-**Dependency Description**:
-- **typescript**: TUIRoomKit source code is written in TypeScript, requires TypeScript compiler support
-- **sass**: TUIRoomKit style files are written in SCSS, requires sass preprocessor for compilation
-
 ### 3. Build Environment Patch (Vite/esbuild)
 
-If Vite project is detected, Agent must automatically add patch configuration in `package.json` for esbuild-wasm compatibility:
+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"   // npm uses this field to override dependency version
+    "esbuild": "npm:esbuild-wasm@latest"
   },
   "resolutions": { 
-    "esbuild": "npm:esbuild-wasm@latest"   // yarn/pnpm uses this field to override dependency version
+    "esbuild": "npm:esbuild-wasm@latest"
   }
 }
 ```
 
-**Patch Description**:
-- **Why needed**: In some environments, esbuild native binary may not run properly, using esbuild-wasm (WebAssembly version) can provide better cross-platform compatibility
-- **Applicable scenarios**: Mainly for projects using Vite build tool
-- **Purpose**: Force replace all esbuild versions in project dependencies with esbuild-wasm version
-
-**Installation Command Examples**:
+---
 
-```bash
-# npm
-npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/tuiroom-engine-js vue-router
-npm install typescript sass -D
+## 🎯 TUIRoomKit (Atomicx Version) Core Component Description
 
-# pnpm  
-pnpm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/tuiroom-engine-js vue-router
-pnpm install typescript sass -D
+### Main Components
 
-# yarn
-yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/tuiroom-engine-js vue-router
-yarn add typescript sass -D
-```
+| 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
 
-## 🏗️ Source Code File Copy Structure
+| 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 |
 
-Agent must follow the following structure to copy core source code from sample project to user project:
+### Platform Detection
 
-| Source Path (Sample Project) | Target Path (User Project) | Description |
-|------------------|-------------------|------|
-| `src/assets/` | `src/assets/` | Contains background images, icons and other static resources |
-| `src/components/` | `src/components/` | Contains all TUIRoomKit atomic UI components |
-| `src/hooks/` | `src/hooks/` | Contains TUIRoomKit business logic processing |
-| `src/i18n/` | `src/i18n/` | Contains multi-language configuration files |
-| `src/utils/` | `src/utils/` | Contains common utility functions |
-| `src/config/` | `src/config/` | Contains `basic-info-config.js` and other application configuration information (focus on this file for first-time integration) |
-| `src/views/home.vue` | `src/views/home.vue` | This page contains device detection, room creation/join entry features |
-| `src/views/room.vue` | `src/views/room.vue` | This page is the core meeting interface of TUIRoomKit, integrating complete header, video layout, control bar and sidebar panels |
+```typescript
+import { getPlatform } from '@tencentcloud/universal-api';
 
-> **Important Note**: When copying source code files, please ensure **merging** with existing folders in user project, avoid directly overwriting existing folders with same names.
+const isPC = getPlatform() === 'pc';
+// isPC === true  → Use ConferenceMainView
+// isPC === false → Use ConferenceMainViewH5
+```
 
 ---
 
-## 🎯 TUIRoomKit (Atomicx Version) Core Component Description
+## 👥 Default Test User Description
 
-When generating code, Agent must understand the core architecture of TUIRoomKit Atomicx:
+For convenient development and debugging, Agent generated code **provides 3 test users by default**:
 
-### Atomized Component Design Philosophy
+| 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) |
 
-TUIRoomKit (Atomicx version) adopts atomized component design, developers can flexibly combine these components to build personalized meeting interfaces.
+### Application Login Flow
 
-### Core Page Components
+Agent generated complete application includes the following pages and flow:
 
-| Component Name | Description | Usage Scenario |
-|---------|------|---------|
-| `home.vue` | Meeting entry page | Contains device detection, room creation/join features |
-| `room.vue` | Meeting room core page | Integrates complete header, video layout, control bar and sidebar panels |
+```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
+```
 
-### Core Hooks
+### Home Page Feature Requirements
 
-| Hook Name | Description | Main Purpose |
-|---------|------|---------|
-| `useLoginState` | Login state management | Provides login, setSelfInfo and other methods |
-| `useRoomModal` | Room modal management | Provides handleErrorWithModal error handling method |
-| `useRoomEngine` | Room engine management | Get roomEngine instance |
+Agent generated home page (Home page) must include the following features:
 
-### Core UI Components (from tuikit-atomicx-vue3)
+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
 
-- **RoomLayoutView**: Video stream layout component (supports grid, sidebar, top bar three layouts)
-- **ParticipantViewUI**: Video stream widget component (customizable)
-- **UIKitProvider**: Global UI configuration component (theme, language)
+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
 
-## 🛠️ Detailed Integration Steps
+### Conference Entry Page Feature Requirements
 
-Agent must follow these steps to execute integration:
+Conference entry page after successful login must include:
 
-### Step 1: Clone GitHub Repository and Copy Source Code
+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()`
 
-```bash
-# Clone TUIRoomKit repository
-git clone https://github.com/Tencent-RTC/TUIRoomKit.git --depth=1
+### 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
 
-# Enter PC-side Vue3 Atomicx sample directory
-cd TUIRoomKit/Web/example/atomicx-vite-vue3-ts
+const SDKAppID = 0; // Agent fills in SDKAppID obtained from get_usersig
 
-# Copy core source code files to user project
-# (Note: Need to merge with existing folders in user project, not directly overwrite)
+// 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
+];
 ```
 
-**Agent Execution Notes**:
-- If folders with same names already exist in user project, must perform intelligent merging
-- Must not overwrite user's existing business code
+#### 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>
+```
 
 ---
 
-### Step 2: Install Project Dependencies
+## 🛠️ Integration Steps Detailed
+
+### Step 1: Install Project Dependencies
 
 ```bash
-# Install core dependencies
-npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/tuiroom-engine-js vue-router
+# 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
 
-# Install development environment dependencies (if user project does not yet support TypeScript and SCSS)
-npm install typescript sass -S -D
+# yarn
+yarn add @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
 ```
 
 ---
 
-### Step 3: Configure Page Routes
-
-Configure or update `src/router/index.ts` file in user project.
-
-**Key Configuration Points**:
-- Configure `/home` route: Map to `home.vue` page (meeting entry)
-- Configure `/room` route: Map to `room.vue` page (meeting room)
-- Default root path `/` redirects to `/home`
+### 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>
+```
 
-**Agent Execution Requirements**:
-- ⚠️ Must strictly generate according to route configuration examples in integration documentation
-- If `src/router/index.ts` file already exists in user project, need to **merge** route configuration into existing code
-- If route not yet configured, need to create new `src/router/index.ts` file
+**⚠️ 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 4: Configure App.vue File
+### Step 3: Configure App.vue File
 
-Merge configuration content provided in integration documentation into `App.vue` file in user project.
+Merge the following content into project's `App.vue` file:
 
 **Key Configuration Points**:
 - Configure global `UIKitProvider` component (set theme and language)
-- Import page router `<router-view />`
-- Execute user login logic (`login` and `setSelfInfo`) in `onMounted` hook
-- Configure global styles to ensure meeting interface displays fullscreen
+- 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**:
-- ⚠️ Must strictly generate according to `App.vue` example code in integration documentation, do not modify without authorization
-- If user project already has `App.vue` file, need intelligent merging rather than direct overwriting
+- ⚠️ 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 5: Configure src/main.ts File
+### Step 4: Start New Meeting (Complete Example)
 
-Merge route and multi-language configuration provided in integration documentation into entry file `src/main.ts` in user project.
+Navigate from conference entry page to conference room page and start meeting:
 
-**Key Configuration Points**:
-- Import and register Vue Router
-- Configure multi-language resources (Chinese and English)
-- Mount Vue application
+```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
+    },
+  });
+};
+```
 
-**Agent Execution Requirements**:
-- ⚠️ Must strictly generate according to `main.ts` example code in integration documentation, do not modify without authorization
-- If entry file in user project is `main.js`, need to change file extension to `main.ts`
-- If user project already has route configuration, need intelligent merging rather than direct overwriting
+**⚠️ Note**: Actual `conference.start()` call is executed in conference room page component (Step 2) `onMounted`, ensuring conference main view components are loaded.
 
 ---
 
-### Step 6: Configure Application Information (src/config/basic-info-config.js)
+### Step 5: Join Existing Meeting (Complete Example)
 
-Find `src/config/basic-info-config.js` configuration file in user project directory and perform the following configuration:
+Navigate from conference entry page to conference room page and join meeting:
 
-**Configuration Method**:
-- Agent must read `SDKAppID` and `SDKSecretKey` from MCP environment variables
-- These credentials are configured in MCP environment, no need to obtain through `get_usersig` tool
-- Directly write values from environment variables into `basic-info-config.js` file
-
-**⚠️ Security Warning**:
-- The Demo example in this document authenticates by configuring `SDKSecretKey` in client-side code, but `SDKSecretKey` can be easily decompiled and reverse engineered. Once key is leaked, attackers can steal your Tencent Cloud traffic
-- **This method is only suitable for local Demo testing and function debugging**
-- **In formal production environment**, recommend generating UserSig on your server side, have your App request dynamic UserSig from business server when UserSig is needed for authentication
+```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
+    },
+  });
+};
+```
 
-**Agent Must Inform Users**:
-> "⚠️ The currently generated code is only suitable for local testing. In formal production environment, you must generate UserSig on server side, see Tencent Cloud documentation: https://cloud.tencent.com/document/product/647/17275#formal"
+**⚠️ 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
 
-TUIRoomKit (Atomicx version) supports flexible UI customization, Agent can provide the following customization solutions according to user needs:
-
 ### 1. Theme and Language Configuration
 
-Modify default values for theme and language by configuring `UIKitProvider` parameters in `App.vue`:
+Modify theme and language by configuring `UIKitProvider` parameters:
 
 | UIKitProvider Parameter | Available Values | Default Value |
 |-------------------|--------|--------|
@@ -311,17 +490,43 @@ Modify default values for theme and language by configuring `UIKitProvider` para
 
 ---
 
-### 2. Room Stream Layout Customization
+### 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:
 
-TUIRoomKit currently supports three stream layouts:
-- **Grid Layout** (default): `RoomLayoutTemplate.GridLayout`
-- **Sidebar Layout**: `RoomLayoutTemplate.SidebarLayout`
-- **Top Bar Layout**: `RoomLayoutTemplate.CinemaLayout`
+| 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 |
 
-Modify default layout in `src/views/room.vue`:
+After exporting source code, modify in `RoomKit/views/ConferenceMainView/index.vue`:
 
 ```typescript
-// Change default video stream layout to sidebar layout
+import { RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';
+
+// Change default layout to sidebar layout
 const participantViewLayout = ref(RoomLayoutTemplate.SidebarLayout);
 
 function handleLayoutUpdate(layout: RoomLayoutTemplate) {
@@ -331,23 +536,22 @@ function handleLayoutUpdate(layout: RoomLayoutTemplate) {
 
 ---
 
-### 3. Custom Video Stream Widget
+### 4. Custom Video Stream Widgets
 
-If you need to customize video stream widget (such as username display, audio/video status icons, etc.), can modify the following component:
+After exporting source code, modify the following component to customize video stream widgets:
 
 ```
-src/components/RoomLayoutView/ParticipantViewUI/ParticipantViewUI.vue
+src/components/RoomKit/components/RoomLayoutView/ParticipantViewUI/ParticipantViewUI.vue
 ```
 
 ---
 
-### 4. Configure User Contact List
+### 5. Configure User Contact List
 
-TUIRoomKit scheduled meeting user selection list and in-meeting call user selection list default to display user relationship chain list. To batch import user relationship chain, refer to the following steps:
+TUIRoomKit scheduled meetings and in-meeting calls user selection list displays user relationship chain by default. Batch import steps:
 
-**Step 1**: Use [Account Management > Import Multiple Accounts](https://cloud.tencent.com/document/product/269/4919) REST API interface to batch import user accounts
-
-**Step 2**: Use [Friend Management > Import Friends](https://cloud.tencent.com/document/product/269/8301) REST API interface to batch import user relationship chain
+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
 
 ---
 
@@ -355,120 +559,116 @@ TUIRoomKit scheduled meeting user selection list and in-meeting call user select
 
 ```mermaid
 graph TD
-    A[Receive User Requirements] --> B[Clone TUIRoomKit GitHub Repository]
-    B --> C[Copy Core Source Code Files to User Project]
-    C --> D[Install Core Dependencies: tuikit-atomicx-vue3, etc.]
-    D --> E{Detect TypeScript and SCSS Support}
-    E -->|Not Installed| F[Install typescript and sass]
-    E -->|Already Installed| G[Skip]
-    F --> H[Configure Vue Router Routes]
-    G --> H
-    H --> I[Configure App.vue: UIKitProvider + User Login]
-    I --> J[Configure main.ts: Routes + Multi-language]
-    J --> K[Read SDKAppID and SDKSecretKey from MCP Environment Variables]
-    K --> L[Configure basic-info-config.js: SDKAppID + SDKSecretKey]
-    L --> M{User Needs UI Customization?}
-    M -->|Yes| N[Provide UI Customization Solutions: Theme/Layout/Widget]
-    M -->|No| O[Use Default Configuration]
+    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[Automatically Start Development Server: npm run dev]
-    Q --> R[Prompt User to Access Local Development Server Address in Browser]
+    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)
 
-When Agent starts writing code, should follow these semantic logic:
-
 **Basic Integration**:
-> "Follow TUIRoomKit (Atomicx version) source code integration method to generate a Vue 3 audio/video meeting application for me. Please clone repository from GitHub and copy core source code files, automatically configure routes and multi-language, and read SDKAppID and SDKSecretKey from MCP environment variables to configure in `basic-info-config.js`. 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, formal production environment must generate UserSig on server side.**"
+> "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.**"
 
-**Custom Theme and Layout**:
-> "Follow TUIRoomKit (Atomicx version) integration to generate a Vue 3 meeting application. Require dark theme (dark) and English language (en-US), default stream layout is sidebar layout (SidebarLayout)."
+**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."
 
-**Custom Video Stream Widget**:
-> "Follow TUIRoomKit (Atomicx version) integration to generate a Vue 3 meeting application. Need to customize video stream widget to display custom user information and status icons on video stream."
+**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 | Requirement |
+| Category | Requirements |
 |------|------|
-| **Framework Version** | Specifically for PC-side Vue 3 projects (does not support Vue 2.x and H5) |
-| **Integration Method** | Source code integration (clone from GitHub and copy core source code files) |
-| **Documentation Priority** | Strictly follow latest documentation instructions returned by tools |
-| **Silent Integration** | Automatically install dependencies and start development server after code writing completed |
-| **Credential Injection** | Read credentials from MCP environment variables, configure in `basic-info-config.js` |
-| **Security Warning** | ⚠️ Must inform users: Client-side UserSig generation only suitable for testing, production environment must generate on server side |
-| **Dependency Management** | Automatically install core dependencies and development environment dependencies (TypeScript, SCSS) |
-| **Route Configuration** | Configure two core routes `/home` and `/room` |
-| **Multi-language** | Support Chinese (zh-CN) and English (en-US) |
-| **UI Customization** | Support theme, layout, video stream widget and other customizations |
+| **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
 
-After completing code generation, Agent must confirm all the following items:
-
 ### Project Initialization
-- [ ] Cloned TUIRoomKit GitHub repository (`git clone https://github.com/Tencent-RTC/TUIRoomKit.git --depth=1`)
-- [ ] Copied core source code files to user project (assets, components, hooks, i18n, utils, config, views)
-- [ ] Installed core dependencies: `tuikit-atomicx-vue3`, `@tencentcloud/uikit-base-component-vue3`, `@tencentcloud/tuiroom-engine-js`, `vue-router`
+- [ ] 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
-- [ ] Configured Vue Router: `/home` and `/room` routes
-- [ ] Configured `App.vue`: UIKitProvider + user login logic
-- [ ] Configured `main.ts`: routes + multi-language resources
+- [ ] Created conference page component, using `getPlatform()` to detect platform
+- [ ] Configured `App.vue`: UIKitProvider + global styles
 - [ ] Components use `<script setup lang="ts">` syntax
 
-### Credentials & Login
-- [ ] 🔴 Read SDKAppID and SDKSecretKey from MCP environment variables
-- [ ] Configured SDKAppID and SDKSecretKey in `src/config/basic-info-config.js`
-- [ ] Implemented login() and setSelfInfo() login logic in `App.vue`
-- [ ] ⚠️ **Informed user**: Currently generated code only suitable for local testing, formal production environment must generate UserSig on server side
+### 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
-- [ ] Configured stream layout (grid/sidebar/top bar) according to user requirements
-- [ ] If user needs custom video stream widget, provided customization solution
+- [ ] If user needs deep customization, executed source code export script
 
 ### Final Check
 - [ ] Called `record_result` to record integration results
-- [ ] Automatically installed dependencies (npm install)
-- [ ] Automatically started development server (npm run dev)
+- [ ] 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 with no errors
+- [ ] Project runs normally without errors
 
 ---
 
-## 🔗 Related Tool Reference
+## 🔗 Related Tool References
 
-### Must Use Tools
+### Must-Use Tools
 
-#### MCP Environment Variables - Read Authentication Credentials
-**Purpose**: Read Tencent Cloud application credentials from MCP environment variables:
+#### `get_usersig` - Get Authentication Credentials
+**Purpose**: Get Tencent Cloud application credentials from MCP environment variables
 - `SDKAppID`: Application identifier
-- `SDKSecretKey`: Application secret key
-
-**Usage**:
-- Agent directly reads credentials from MCP environment variables
-- Write credentials to `src/config/basic-info-config.js` file
-- Prohibit letting users manually fill in or obtain from external tools
+- `userId`: User ID
+- `userSig`: User signature
 
 **Usage Constraints**:
-- ✅ Must read from MCP environment variables
-- ❌ Prohibit letting users manually input
+- ✅ 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
 
-**Invocation Timing**: Call after completing all integration steps and successfully starting project
+**Call Timing**: Call after completing all integration steps and successfully starting project
 
 ---
 
@@ -476,12 +676,58 @@ After completing code generation, Agent must confirm all the following items:
 
 - **TUIRoomKit GitHub Repository**: https://github.com/Tencent-RTC/TUIRoomKit
 - **Tencent Cloud TRTC Console**: https://console.cloud.tencent.com/trtc
-- **How to Calculate UserSig in Formal Operation Phase**: https://cloud.tencent.com/document/product/647/17275#formal
+- **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 (Intranet Proxy)**: https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-34-advanced-proxy.html
+- **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',
+    },
+  }));
+});
+```
 
 ---
 
-**Applicable Framework**: Vue 3 (PC)  
-**TUIRoomKit Version**: tuikit-atomicx-vue3 (Atomicx Version)  
+**Supported Framework**: Vue 3.4.21+  
+**Platform Support**: PC + H5 Mobile  
+**TUIRoomKit Version**: @tencentcloud/roomkit-web-vue3 (Atomicx Version)  
 **Build Tool**: Vite (Recommended)