@tencentcloud/sdk-mcp 1.1.6 → 1.1.8

package/resource/doc/tuicallkit/vue/integration.md

@@ -0,0 +1,83 @@
+AI 模型必须遵守以下**强制性技术限制**：
+* **音视频通话组件 API 使用限制：** 必须使用 `TUICallKitAPI.calls` API 发起通话， `call` 和 `groupCall` 接口已废弃，不推荐使用，TUICallKit 不提供 `on/off` API。
+* **集成步骤限制：** 在集成组件时必须严格按照文档步骤和说明进行。
+* **通话界面显示限制：** 通话时 TUICallKit 组件会自动控制组件显隐，集成时只需要把组件放在适当的位置即可，PC 大屏中通话时必须使用`transform: translate(-50%, -50%)`控制居中显示， H5 必须全屏显示。
+* **通话界面关闭限制：** 通话界面关闭后所有弹窗和蒙层必须关闭。
+* **登录界面限制：** 创建新项目集成 TUICallKit 时，必须生成一个美观的登录界面 UI，方便进行通话体验，在已有项目中集成时不需要生成登录界面。
+* **体验用户限制：** 创建新项目集成 TUICallKit 时，自动生成 2 个体验 userID，并调用工具 `get_usersig` 获取 userSig 填充在代码中。
+
+# calls-uikit-vue Integration
+
+## 1 集成 TUICallKit
+
+### 1.1 step1：create vue3 project
+
+if you don't have a vue3 project, you can use vite create a vue3 project. otherwise, you can skip this step.
+
+requirement: vue3: ^3.0.0, nodejs: ^22.0.0.
+
+if it is a new project, guide the user to use vite to create a vue3 project manually, and then continue with step 1.2. if it is an existing project, skip this step and continue with step 1.2.
+
+```bash
+pnpm create vite@latest
+# skip some settings
+cd ${your-vue-project-name}
+pnpm install
+```
+
+### 1.2 step2: install calls-uikit-vue
+
+use npm or pnpm to install @trtc/calls-uikit-vue@latest
+
+### 1.3 step3: add main content to your project
+
+```vue
+<template>
+  <div>
+    <span> caller's ID: </span>
+    <input type="text" v-model="callerUserID"> 
+    <button @click="init"> step1. init </button> <br>
+    <span> callee's ID: </span>
+    <input type="text" v-model="calleeUserID">
+    <button @click="call"> step2. call </button>
+    <Teleport to="body">
+      <TUICallKit style="
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) !important;
+        z-index: 1000;"
+      />
+    </Teleport>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { TUICallKit, TUICallKitAPI, CallMediaType } from "@trtc/calls-uikit-vue";
+
+const callerUserID = ref('');
+const calleeUserID = ref('');
+const SDKAppID = 0;  // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number）
+const userSig = ''; // TODO: Replace with your userSig
+
+// init TUICallKit
+const init = async () => {
+  await TUICallKitAPI.init({
+    userID: callerUserID.value, 
+    userSig, 
+    SDKAppID,
+  });
+}
+
+// Start a video call
+const call = async () => {
+  await TUICallKitAPI.calls({
+    userIDList: [calleeUserID.value],
+    type: CallMediaType.VIDEO,
+  }); 
+};
+</script>
+```
+
+## 重要提醒
+如果需要自定义实现 TUICallKit 的更多能力，请使用工具 `get_web_call_api` 获取 TUICallKit 客户端 API 文档。

package/tools/call/get-web-call-api.js

@@ -0,0 +1,30 @@
+import { z } from 'zod';
+import { getDocContent } from '../../utils/get-doc-content.js';
+import { aegisClient } from '../../utils/aegis-client.js';
+const description = `
+This is a tool specifically designed to provide the CallKit component API. Users need to use this tool when they need to query the CallKit component API or customize the CallKit UI. ｜ 这是一个专门负责提供 TUICallKit 组件 API 的工具，当用户需要查询 CallKit 组件 API 或者需要自定义 CallKit UI 界面 时需要调用这个工具：\n
+1. The TUICallKit component API provides capabilities such as setting your own avatar and nickname, setting custom ringtones, setting floating windows, setting virtual backgrounds, setting call interface layouts, and setting default camera behavior. ｜ 1. TUICallKit 组件 API 提供设置自己头像和昵称、设置自定义铃音、设置悬浮窗、设置虚拟背景、设置通话界面布局、设置摄像头默认行为 等能力。\n
+2. If the user has not explicitly specified a framework, you must first use the tools 'present_framework_choice' to show the user the interface for selecting the framework type. ｜ 3. 在用户没有明确指定框架的情况下，必须先使用 tools 'present_framework_choice' 给用户展示选择框架类型界面。\n
+`;
+function getResultText(params) {
+    const { framework = '' } = params;
+    aegisClient.report({
+        name: 'get_web_call_uikit_api',
+        ext2: framework,
+    });
+    return getDocContent(['tuicallkit', `${framework}`, 'api.md']);
+}
+const registryGetWebCallKitAPITool = (mcpServer) => {
+    mcpServer.tool('get_web_call_uikit_api', description, {
+        framework: z.enum(['react', 'vue']).describe('Web call tuikit framework types: Users can explicitly specify a framework or be guided to choose a framework to meet their needs. Currently supported frameworks include: React and Vue. | web call tuikit 框架类型，用户可以明确指定框架或者通过提示引导用户选择一种框架来实现需求，目前支持的框架有： react、vue。'),
+    }, (params) => ({
+        content: [
+            {
+                type: 'text',
+                text: getResultText(params),
+            }
+        ]
+    }));
+};
+export { registryGetWebCallKitAPITool };
+//# sourceMappingURL=get-web-call-api.js.map

package/tools/call/get-web-call-api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-web-call-api.js","sourceRoot":"","sources":["../../../src/tools/call/get-web-call-api.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,WAAW,GAAG;;;;CAInB,CAAC;AAEF,SAAS,aAAa,CAAC,MAA2B;IAChD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,MAAM,CAAC;IAChC,WAAW,CAAC,MAAM,CAAC;QACnB,IAAI,EAAE,wBAAwB;QAC9B,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;IACH,OAAO,aAAa,CAAC,CAAC,YAAY,EAAE,GAAG,SAAS,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;AACjE,CAAC;AAED,MAAM,4BAA4B,GAAG,CAAC,SAAoB,EAAE,EAAE;IAC5D,SAAS,CAAC,IAAI,CACZ,wBAAwB,EACxB,WAAW,EACX;QACE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,sQAAsQ,CAAC;KACrT,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACd,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC;aAC5B;SACF;KACF,CAAC,CAAC,CAAC;AACR,CAAC,CAAC;AACF,OAAO,EAAE,4BAA4B,EAAE,CAAC"}

package/tools/call/get-web-call-integration.js

@@ -2,25 +2,23 @@ import { z } from 'zod';
 import { getDocContent } from '../../utils/get-doc-content.js';
 import { aegisClient } from '../../utils/aegis-client.js';
 const description = `
-This is a tool specifically designed for creating web audio and video call applications. With the tool, you can achieve the following functions: ｜ 这是一个专门负责创建 web 音视频通话应用的工具，通过工具您可以实现以下功能：\n
-1. Create a web audio and video calling application with functions and UI similar to the audio and video calling capabilities in WeChat or WeChat for Business. ｜ 1. 创建一个 web 音视频通话应用，功能和 UI 界面类似微信（WeChat）或者企业微信（企微）中音视频通话能力。 \n
-2. The tool provides Call UIKit component integration solutions for multiple frameworks such as react and vue. You can choose one of the frameworks to build a web audio and video call project as needed. ｜ 2. 工具提供 react、vue 多种框架(framework)的 Call UIKit 组件集成方案，您可以根据需要选择其中一个框架(framework)搭建一个 web 音视频通话项目。 \n
-3. To implement functionality without specifying a specific platform or framework, you must first use the tools tool present_framework_choice to display the framework type selection interface. | 3. 在没有指定特定平台或框架的情况下，要实现功能，必须优先使用 tools 工具 present_framework_choice 展示选择框架类型界面。\n
+This is a tool specifically designed for creating Web PC or H5 audio and video calling applications using TUCallKit. Users need to call this tool when they need to integrate audio and video calling functionality. ｜ 这是一个专门负责用 TUICallKit 创建 web PC 或 H5 音视频通话应用的工具，当用户需要集成音视频通话时需要调用这个工具：\n
+1. TUICallKit enables functions and UI interfaces similar to those in WeChat or WeChat Work for audio and video calls. ｜ 1. TUICallKit 能够实现一个功能和 UI 界面类似微信（WeChat）或者企业微信（企微）中音视频通话的能力。\n
+2. The integration solution for components using the TUICallKit framework (React or Vue) depends on the user's choice of which framework to use to meet their requirements. ｜ 2. TUICallKit react、vue 两种框架的组件集成方案，需要根据用户的选择决策使用哪一种框架来实现需求。\n
+3. If the user has not explicitly specified a framework, you must first use the tools 'present_framework_choice' to show the user the interface for selecting the framework type. ｜ 3. 在用户没有明确指定框架的情况下，必须先使用 tools 'present_framework_choice' 给用户展示选择框架类型界面。\n
+4. After the TUICallKit component integration is complete and the project starts successfully, please call tools 'record_result' to record the integration results. ｜ 4. 在 TUICallKit 组件集成完成且项目启动成功后，请调用 tools 'record_result' 记录集成结果。\n
 `;
 function getResultText(params) {
-    const { sdkAppId = '', framework = '' } = params;
+    const { framework = '' } = params;
     aegisClient.report({
         name: 'get_web_call_uikit_integration',
-        ext1: sdkAppId,
         ext2: framework,
     });
-    return getDocContent(['tuicallkit', `${framework}`]);
+    return getDocContent(['tuicallkit', `${framework}`, 'integration.md']);
 }
 const registryGetWebCallIntegrationTool = (mcpServer) => {
     mcpServer.tool('get_web_call_uikit_integration', description, {
-        framework: z.enum(['react', 'vue']).describe('The platform type of the web call UIKit component library. You first need to choose which platform to use to create your audio and video call application. Currently supported frameworks are: React and Vue. ｜ web call uikit 组件库的平台类型，您首先需要选择使用哪一种来平台来创建您的音视频通话应用，目前支持的框架有：react、 vue。'),
-        sdkAppId: z.string().optional().describe(`Your application's SDKAppID. | 您的应用的 SDKAppID。`),
-        // secretKey: z.string().describe(`The secretKey of your SDKAppID. ｜您的 SDKAppID 的 secretKey。`),
+        framework: z.enum(['react', 'vue']).describe('Web call tuikit framework types: Users can explicitly specify a framework or be guided to choose a framework to meet their needs. Currently supported frameworks include: React and Vue. | web call tuikit 框架类型，用户可以明确指定框架或者通过提示引导用户选择一种框架来实现需求，目前支持的框架有： react、vue。'),
     }, (params) => ({
         content: [
             {

package/tools/call/get-web-call-integration.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-web-call-integration.js","sourceRoot":"","sources":["../../../src/tools/call/get-web-call-integration.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,WAAW,GAAG;;;;;CAKnB,CAAC;AAEF,SAAS,aAAa,CAAC,MAA2B;IAChD,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAG,SAAS,GAAG,EAAE,EAAE,GAAG,MAAM,CAAC;IAChD,WAAW,CAAC,MAAM,CAAC;QACnB,IAAI,EAAE,gCAAgC;QACtC,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;IACH,OAAO,aAAa,CAAC,CAAC,YAAY,EAAE,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;AACvD,CAAC;AAED,MAAM,iCAAiC,GAAG,CAAC,SAAoB,EAAE,EAAE;IACjE,SAAS,CAAC,IAAI,CACZ,gCAAgC,EAChC,WAAW,EACX;QACE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,0RAA0R,CAAC;QACxU,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,gDAAgD,CAAC;QAC1F,+FAA+F;KAChG,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACd,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC;aAC5B;SACF;KACF,CAAC,CAAC,CAAC;AACR,CAAC,CAAC;AACF,OAAO,EAAE,iCAAiC,EAAE,CAAC"}
+{"version":3,"file":"get-web-call-integration.js","sourceRoot":"","sources":["../../../src/tools/call/get-web-call-integration.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,WAAW,GAAG;;;;;;CAMnB,CAAC;AAEF,SAAS,aAAa,CAAC,MAA2B;IAChD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,MAAM,CAAC;IAChC,WAAW,CAAC,MAAM,CAAC;QACnB,IAAI,EAAE,gCAAgC;QACtC,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;IACH,OAAO,aAAa,CAAC,CAAC,YAAY,EAAE,GAAG,SAAS,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC;AACzE,CAAC;AAED,MAAM,iCAAiC,GAAG,CAAC,SAAoB,EAAE,EAAE;IACjE,SAAS,CAAC,IAAI,CACZ,gCAAgC,EAChC,WAAW,EACX;QACE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,sQAAsQ,CAAC;KACrT,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACd,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC;aAC5B;SACF;KACF,CAAC,CAAC,CAAC;AACR,CAAC,CAAC;AACF,OAAO,EAAE,iCAAiC,EAAE,CAAC"}

package/tools/chat/get-web-chat-component-detail.js

@@ -4,7 +4,8 @@ import { aegisClient } from '../../utils/aegis-client.js';
 import { handleFramework } from '../../utils/handle-framework.js';
 import { handleComponentName } from '../../utils/handle-component-name.js';
 const description = `
-| 这是一个专门负责提供 web 聊天应用 UIKit 组件详情说明的工具，通过工具您获得以下内容：\n
+
+This is a tool specifically designed to provide detailed descriptions of UIKit components for online chat applications. Through this tool, you will obtain the following: | 这是一个专门负责提供 web 聊天应用 UIKit 组件详情说明的工具，通过工具您获得以下内容：\n
 1. The tool provides detailed instructions and examples for components such as the TUIKit component list overview, conversation list component, chat component, chat header component, message list component, message input component, and avatar component. | 1. 工具提供了 TUIKit 组件列表概览、会话列表组件、聊天组件、聊天头部组件、消息列表组件、消息输入组件、头像组件等组件的详细使用说明和示例。 \n
 2. The tool provides detailed usage examples and case studies for Chat TUIKit components in both React and Vue frameworks. Users can choose the component details for one of the frameworks according to their needs. | 2. 工具提供 react、vue 两种框架的 Chat TUIKit 组件详细用法和案例，根据用户的需要选择其中一个框架的组件详情。\n
 3. If the user has not explicitly specified a framework, you must first use the tools 'present_framework_choice' to show the user the interface for selecting the framework type. ｜ 3. 在用户没有明确指定框架的情况下，必须先使用 tools 'present_framework_choice' 给用户展示选择框架类型界面。\n

package/tools/chat/get-web-chat-component-detail.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-web-chat-component-detail.js","sourceRoot":"","sources":["../../../src/tools/chat/get-web-chat-component-detail.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAE3E,MAAM,WAAW,GAAG;;;;;CAKnB,CAAC;AAEF,SAAS,aAAa,CAAC,MAA2B;IAChD,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,EAAE,EAAE,GAAG,MAAM,CAAC;IACjD,WAAW,CAAC,MAAM,CAAC;QACjB,IAAI,EAAE,qCAAqC;QAC3C,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;IACH,OAAO,aAAa,CAAC,CAAC,WAAW,EAAE,GAAG,eAAe,CAAC,SAAS,CAAC,EAAE,EAAE,YAAY,EAAE,GAAG,mBAAmB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AACjI,CAAC;AAED,MAAM,qCAAqC,GAAG,CAAC,SAAoB,EAAE,EAAE;IACrE,SAAS,CAAC,IAAI,CACZ,qCAAqC,EACrC,WAAW,EACX;QACE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,+IAA+I,CAAC;QAC7L,aAAa,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,kHAAkH,CAAC;KACvJ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACd,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC;aAC5B;SACF;KACF,CAAC,CAAC,CAAC;AACR,CAAC,CAAC;AACF,OAAO,EAAE,qCAAqC,EAAE,CAAC"}
+{"version":3,"file":"get-web-chat-component-detail.js","sourceRoot":"","sources":["../../../src/tools/chat/get-web-chat-component-detail.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAE3E,MAAM,WAAW,GAAG;;;;;;CAMnB,CAAC;AAEF,SAAS,aAAa,CAAC,MAA2B;IAChD,MAAM,EAAE,SAAS,EAAE,aAAa,GAAG,EAAE,EAAE,GAAG,MAAM,CAAC;IACjD,WAAW,CAAC,MAAM,CAAC;QACjB,IAAI,EAAE,qCAAqC;QAC3C,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;IACH,OAAO,aAAa,CAAC,CAAC,WAAW,EAAE,GAAG,eAAe,CAAC,SAAS,CAAC,EAAE,EAAE,YAAY,EAAE,GAAG,mBAAmB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AACjI,CAAC;AAED,MAAM,qCAAqC,GAAG,CAAC,SAAoB,EAAE,EAAE;IACrE,SAAS,CAAC,IAAI,CACZ,qCAAqC,EACrC,WAAW,EACX;QACE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,+IAA+I,CAAC;QAC7L,aAAa,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,kHAAkH,CAAC;KACvJ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACd,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC;aAC5B;SACF;KACF,CAAC,CAAC,CAAC;AACR,CAAC,CAAC;AACF,OAAO,EAAE,qCAAqC,EAAE,CAAC"}

package/tools/common/get-official-experience-account.js

@@ -0,0 +1,52 @@
+import * as https from 'https';
+import { aegisClient } from '../../utils/aegis-client.js';
+const description = `
+It is only invoked when the user has not configured an SDKAppID or explicitly requested an experience account, making it convenient to quickly experience the integration of TUIKit with MCP. ｜ 仅在用户没有配置 SDKAppID 或明确要求获取体验账号时才调用，方便快速体验 MCP 集成 TUIKit。
+Precautions: | 注意事项：\n
+1. Only allow users to be provided with 'SDKAppID', 'userID', and 'userSig' information. | 1. 只允许给用户提供 'SDKAppID'、'userID'、'userSig' 信息。
+`;
+function getOfficialExperienceAccount(url) {
+    return new Promise((resolve, reject) => {
+        https.get(url, (res) => {
+            let data = '';
+            res.on('data', (chunk) => {
+                data += chunk;
+            });
+            res.on('end', () => {
+                try {
+                    resolve(JSON.parse(data));
+                }
+                catch (e) {
+                    resolve(data);
+                }
+            });
+        }).on('error', (err) => {
+            reject(err);
+        });
+    });
+}
+const registryGetOfficialExperienceAccountTool = (mcpServer) => {
+    mcpServer.tool('get-official-experience-account', description, {}, async () => {
+        const result = await getOfficialExperienceAccount('https://demos3w.trtc.tencent-cloud.com/prod/base/v1/auth_users/none_auth');
+        const { sdkAppId, userId, userSig } = result?.data || {};
+        aegisClient.report({
+            name: 'get-official-experience-account',
+            ext1: sdkAppId,
+            ext2: userId,
+        });
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: JSON.stringify({
+                        'SDKAppID': sdkAppId,
+                        'userID': `${userId}`,
+                        'userSig': `${userSig}`,
+                    }),
+                }
+            ]
+        };
+    });
+};
+export { registryGetOfficialExperienceAccountTool };
+//# sourceMappingURL=get-official-experience-account.js.map

package/tools/common/get-official-experience-account.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-official-experience-account.js","sourceRoot":"","sources":["../../../src/tools/common/get-official-experience-account.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,WAAW,GAAG;;;;CAInB,CAAC;AAEF,SAAS,4BAA4B,CAAC,GAAW;IAC/C,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACrC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE;YACrB,IAAI,IAAI,GAAG,EAAE,CAAC;YACd,GAAG,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;gBACrB,IAAI,IAAI,KAAK,CAAC;YAClB,CAAC,CAAC,CAAC;YACH,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE;gBACjB,IAAI,CAAC;oBACH,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC5B,CAAC;gBAAC,OAAO,CAAC,EAAE,CAAC;oBACX,OAAO,CAAC,IAAI,CAAC,CAAC;gBAChB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;YACnB,MAAM,CAAC,GAAG,CAAC,CAAC;QAChB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,wCAAwC,GAAG,CAAC,SAAoB,EAAE,EAAE;IACxE,SAAS,CAAC,IAAI,CACZ,iCAAiC,EACjC,WAAW,EACX,EAAE,EAAE,KAAK,IAAI,EAAE;QACb,MAAM,MAAM,GAAO,MAAM,4BAA4B,CAAC,0EAA0E,CAAC,CAAC;QAClI,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,EAAE,IAAI,IAAI,EAAE,CAAC;QACzD,WAAW,CAAC,MAAM,CAAC;YACjB,IAAI,EAAE,iCAAiC;YACvC,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,MAAM;SACb,CAAC,CAAC;QACH,OAAO;YACL,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,MAAM;oBACZ,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;wBACnB,UAAU,EAAE,QAAQ;wBACpB,QAAQ,EAAE,GAAG,MAAM,EAAE;wBACrB,SAAS,EAAE,GAAG,OAAO,EAAE;qBACxB,CAAC;iBACH;aACF;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,OAAO,EAAE,wCAAwC,EAAE,CAAC"}

package/tools/common/get-usersig.js

@@ -2,8 +2,8 @@ import { z } from 'zod';
 import { generateUserSig } from '../../utils/generate-usersig.js';
 import { aegisClient } from '../../utils/aegis-client.js';
 const description = `
-Generate userSig based on SDKAppID, userID, secretKey, and expireTime. Applicable scenarios: | 根据 SDKAppID、userID、secretKey、expireTime 生成 userSig，适用场景：\n
-1. The user wants to generate userSig | 1. 用户希望生成 userSig\n
+Prioritizes the use of the user-configured SDKAppID and secretKey to generate the userSig for user login. Applicable scenarios: | 优先使用用户配置的 SDKAppID 和 secretKey，生成用户登录的 userSig，适用场景：\n
+1. Users wish to generate their own configured SDKAppID, userSig. | 1. 用户希望生成自己配置的 SDKAppID 用户 userSig。 \n
 2. Logging into Tencent Cloud applications requires SDKAppID, userID, and userSig. | 2. 登录腾讯云应用需要 SDKAppID、userID、userSig\n
 Precautions: | 注意事项：\n
 1. ExpirationTime is optional, with a default value of 7 days. | 1. expireTime 可选，默认值为 7 天\n

package/tools/index.js

@@ -3,6 +3,7 @@ import { registryPresentFrameworkChoiceTool } from './common/present-framework-c
 import { registryRecordPromptTool } from './common/record-prompt.js';
 import { registryRecordResultTool } from './common/record-result.js';
 import { registryGetUserSigTool } from './common/get-usersig.js';
+import { registryGetOfficialExperienceAccountTool } from './common/get-official-experience-account.js';
 // chat
 import { registryGetWebChatIntegrationTool } from './chat/get-web-chat-integration.js';
 import { registryGetWebChatWindowIntegrationTool } from './chat/get-web-chat-window-integration.js';
@@ -13,6 +14,7 @@ import { registryGetNativeChatIntegrationTool } from './chat/get-native-chat-int
 import { registryGetChatFaqTool } from './chat/get-chat-faq.js';
 // call
 import { registryGetWebCallIntegrationTool } from './call/get-web-call-integration.js';
+import { registryGetWebCallKitAPITool } from './call/get-web-call-api.js';
 import { registryGetNativeCallIntegrationTool } from './call/get-native-call-integration.js';
 import { registryGetCallFaqTool } from './call/get-call-faq.js';
 // rtcengine
@@ -30,6 +32,7 @@ function registryTools(mcpServer) {
     registryRecordPromptTool(mcpServer);
     registryRecordResultTool(mcpServer);
     registryGetUserSigTool(mcpServer);
+    registryGetOfficialExperienceAccountTool(mcpServer);
     // chat
     registryGetWebChatIntegrationTool(mcpServer);
     registryGetWebChatWindowIntegrationTool(mcpServer);
@@ -40,6 +43,7 @@ function registryTools(mcpServer) {
     registryGetChatFaqTool(mcpServer);
     // call
     registryGetWebCallIntegrationTool(mcpServer);
+    registryGetWebCallKitAPITool(mcpServer);
     registryGetNativeCallIntegrationTool(mcpServer);
     registryGetCallFaqTool(mcpServer);
     // rtcengine

package/tools/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tools/index.ts"],"names":[],"mappings":"AACA,SAAS;AACT,OAAO,EAAE,kCAAkC,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO;AACP,OAAO,EAAE,iCAAiC,EAAE,MAAM,oCAAoC,CAAC;AACvF,OAAO,EAAE,uCAAuC,EAAE,MAAM,2CAA2C,CAAC;AACpG,OAAO,EAAE,qCAAqC,EAAE,MAAM,yCAAyC,CAAC;AAChG,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,0EAA0E;AAC1E,OAAO,EAAE,oCAAoC,EAAE,MAAM,uCAAuC,CAAC;AAC7F,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO;AACP,OAAO,EAAE,iCAAiC,EAAE,MAAM,oCAAoC,CAAC;AACvF,OAAO,EAAE,oCAAoC,EAAE,MAAM,uCAAuC,CAAC;AAC7F,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChE,YAAY;AACZ,OAAO,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAC;AACnF,OAAO,EAAE,8CAA8C,EAAE,MAAM,wDAAwD,CAAC;AACxH,OAAO,EAAE,yCAAyC,EAAE,MAAM,mDAAmD,CAAC;AAC9G,OAAO;AACP,OAAO,EAAE,qCAAqC,EAAE,MAAM,yCAAyC,CAAC;AAChG,OAAO,EAAE,iCAAiC,EAAE,MAAM,qCAAqC,CAAC;AACxF,OAAO;AACP,OAAO,EAAE,iCAAiC,EAAE,MAAM,qCAAqC,CAAC;AAGxF,SAAS,aAAa,CAAC,SAAoB;IACzC,SAAS;IACT,kCAAkC,CAAC,SAAS,CAAC,CAAC;IAC9C,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAClC,OAAO;IACP,iCAAiC,CAAC,SAAS,CAAC,CAAC;IAC7C,uCAAuC,CAAC,SAAS,CAAC,CAAC;IACnD,qCAAqC,CAAC,SAAS,CAAC,CAAC;IACjD,0BAA0B,CAAC,SAAS,CAAC,CAAC;IACtC,2CAA2C;IAC3C,oCAAoC,CAAC,SAAS,CAAC,CAAC;IAChD,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAClC,OAAO;IACP,iCAAiC,CAAC,SAAS,CAAC,CAAC;IAC7C,oCAAoC,CAAC,SAAS,CAAC,CAAC;IAChD,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAClC,YAAY;IACZ,4BAA4B,CAAC,SAAS,CAAC,CAAC;IACxC,8CAA8C,CAAC,SAAS,CAAC,CAAC;IAC1D,yCAAyC,CAAC,SAAS,CAAC,CAAC;IACrD,OAAO;IACP,qCAAqC,CAAC,SAAS,CAAC,CAAC;IACjD,iCAAiC,CAAC,SAAS,CAAC,CAAC;IAC7C,OAAO;IACP,iCAAiC,CAAC,SAAS,CAAC,CAAC;AAC/C,CAAC;AAED,OAAO,EACL,aAAa,GACd,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tools/index.ts"],"names":[],"mappings":"AACA,SAAS;AACT,OAAO,EAAE,kCAAkC,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,wCAAwC,EAAE,MAAM,6CAA6C,CAAC;AACvG,OAAO;AACP,OAAO,EAAE,iCAAiC,EAAE,MAAM,oCAAoC,CAAC;AACvF,OAAO,EAAE,uCAAuC,EAAE,MAAM,2CAA2C,CAAC;AACpG,OAAO,EAAE,qCAAqC,EAAE,MAAM,yCAAyC,CAAC;AAChG,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,0EAA0E;AAC1E,OAAO,EAAE,oCAAoC,EAAE,MAAM,uCAAuC,CAAC;AAC7F,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO;AACP,OAAO,EAAE,iCAAiC,EAAE,MAAM,oCAAoC,CAAC;AACvF,OAAO,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,oCAAoC,EAAE,MAAM,uCAAuC,CAAC;AAC7F,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAChE,YAAY;AACZ,OAAO,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAC;AACnF,OAAO,EAAE,8CAA8C,EAAE,MAAM,wDAAwD,CAAC;AACxH,OAAO,EAAE,yCAAyC,EAAE,MAAM,mDAAmD,CAAC;AAC9G,OAAO;AACP,OAAO,EAAE,qCAAqC,EAAE,MAAM,yCAAyC,CAAC;AAChG,OAAO,EAAE,iCAAiC,EAAE,MAAM,qCAAqC,CAAC;AACxF,OAAO;AACP,OAAO,EAAE,iCAAiC,EAAE,MAAM,qCAAqC,CAAC;AAGxF,SAAS,aAAa,CAAC,SAAoB;IACzC,SAAS;IACT,kCAAkC,CAAC,SAAS,CAAC,CAAC;IAC9C,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAClC,wCAAwC,CAAC,SAAS,CAAC,CAAC;IACpD,OAAO;IACP,iCAAiC,CAAC,SAAS,CAAC,CAAC;IAC7C,uCAAuC,CAAC,SAAS,CAAC,CAAC;IACnD,qCAAqC,CAAC,SAAS,CAAC,CAAC;IACjD,0BAA0B,CAAC,SAAS,CAAC,CAAC;IACtC,2CAA2C;IAC3C,oCAAoC,CAAC,SAAS,CAAC,CAAC;IAChD,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAClC,OAAO;IACP,iCAAiC,CAAC,SAAS,CAAC,CAAC;IAC7C,4BAA4B,CAAC,SAAS,CAAC,CAAC;IACxC,oCAAoC,CAAC,SAAS,CAAC,CAAC;IAChD,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAClC,YAAY;IACZ,4BAA4B,CAAC,SAAS,CAAC,CAAC;IACxC,8CAA8C,CAAC,SAAS,CAAC,CAAC;IAC1D,yCAAyC,CAAC,SAAS,CAAC,CAAC;IACrD,OAAO;IACP,qCAAqC,CAAC,SAAS,CAAC,CAAC;IACjD,iCAAiC,CAAC,SAAS,CAAC,CAAC;IAC7C,OAAO;IACP,iCAAiC,CAAC,SAAS,CAAC,CAAC;AAC/C,CAAC;AAED,OAAO,EACL,aAAa,GACd,CAAA"}

package/resource/doc/tuicallkit/react/how_to_integrated_react_callkit.md

@@ -1,195 +0,0 @@
-本文将介绍如何快速完成 TUICallKit 组件的接入，您将在10分钟内完成以下几个关键步骤，并最终得到一个包含完备 UI 界面的视频通话功能。
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/ace7b80f181f11ef9c015254002977b6.png)
-
-## 环境准备
-- React version 18+。
-
-- [Node.js](https://nodejs.org/en/) version 16+。
-
-- Modern browser, supporting WebRTC APIs。
-
-
-## 步骤一：开通服务
-
-请参见 [开通服务](https://write.woa.com/document/139743928960860160)，获取 `SDKAppID、SecretKey`，它们将在 [初始化 TUICallKit 组件](https://write.woa.com/document/130513425899630592) 作为**必填参数**使用。
-
-## 步骤二：下载 TUICallKit 组件
-1. 下载 [@tencentcloud/call-uikit-react](https://www.npmjs.com/package/@tencentcloud/call-uikit-react) 组件。
-
-   
-   
-   【shell】
-   ``` bash
-   npm install @tencentcloud/call-uikit-react
-   ```
-2. 将`debug`目录复制到您的项目目录`src/debug`，本地生成 userSig 时需要使用。
-
-
-   
-
-
-【MacOS】
-``` bash
-cp -r node_modules/@tencentcloud/call-uikit-react/debug ./src
-```
-
-
-【Windows】
-``` bash
-xcopy node_modules\@tencentcloud\call-uikit-react\debug .\src\debug /i /e
-```
-
-
-## 步骤三：初始化 TUICallKit 组件
-
-您可以选择在 `/src/App.tsx` 文件引入示例代码。
-1. 引入 call-uikit 相关 API 对象。
-
-   ``` tsx
-   import { useState } from 'react';
-   import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-react";
-   import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es"; // Refer to Step 3
-   ```
-2. 引入[<TUICallKit />](https://cloud.tencent.com/document/product/647/81015#tuicallkit)，该组件包含通话时的完整 UI 交互。
-
-   ``` javascript
-   return (
-     <>
-       <span> caller's ID: </span>
-       <input type="text" placeholder='input caller userID' value={callerUserID} onChange={(event) => setCallerUserID(event.target.value)} />
-       <button onClick={init}> step1. init </button> <br />
-       <span> callee's ID: </span>
-       <input type="text" placeholder='input callee userID' value={calleeUserID} onChange={(event) => setCalleeUserID(event.target.value)} />
-       <button onClick={call}> step2. call </button>
-   
-       {/* 【1】Import the TUICallKit component: Call interface UI */}
-       <TUICallKit />
-     </>
-   );
-   ```
-3. 调用 [TUICallKitServer.init](https://cloud.tencent.com/document/product/647/81015#init) API 登录组件，需要在代码中**填写 **`SDKAppID、SecretKey`** 两个参数。**
-
-   ``` javascript
-   const SDKAppID = 0;        // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number）
-   const SDKSecretKey = '';   // TODO: Replace with your SDKSecretKey
-   
-   const [callerUserID, setCallerUserID] = useState('');
-   const [calleeUserID, setCalleeUserID] = useState('');
-   
-   //【2】Initialize the TUICallKit component
-   const init = async () => {
-     const { userSig } = GenerateTestUserSig.genTestUserSig({ 
-       userID: callerUserID,
-       SDKAppID,
-       SecretKey: SDKSecretKey,
-     });
-     await TUICallKitServer.init({
-       userID: callerUserID,
-       userSig,
-       SDKAppID,
-     });
-     alert('TUICallKit init succeed');
-   }
-   ```
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**参数**</td>
-
-<td rowspan="1" colSpan="1" >**类型**</td>
-
-<td rowspan="1" colSpan="1" >**说明**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >userID</td>
-
-<td rowspan="1" colSpan="1" >String</td>
-
-<td rowspan="1" colSpan="1" >**用户的唯一标识符**，由您定义，只允许包含大小写英文字母(a-z A-Z)、数字(0-9)及下划线和连词符。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SDKAppID</td>
-
-<td rowspan="1" colSpan="1" >Number</td>
-
-<td rowspan="1" colSpan="1" >在 [Tencent RTC 控制台](https://console.cloud.tencent.com/trtc) 创建的音视频应用的唯一标识。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SDKSecretKey</td>
-
-<td rowspan="1" colSpan="1" >String</td>
-
-<td rowspan="1" colSpan="1" >在 [Tencent RTC 控制台](https://console.cloud.tencent.com/trtc) 创建的音视频应用的 SecretKey。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >userSig</td>
-
-<td rowspan="1" colSpan="1" >String</td>
-
-<td rowspan="1" colSpan="1" >一种安全保护签名，用于对用户进行登录鉴权认证，确认用户是否真实，阻止恶意攻击者盗用您的云服务使用权。</td>
-</tr>
-</table>
-   
-
-   > **userSig 说明：**
-   > 
->   - **开发环境**：如果您正在本地跑通 Demo、开发调试，可以采用 `debug` 文件中的 `genTestUserSig`（参考步骤3.2）函数生成 userSig。该方法中 SDKSecretKey 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量。
->   - **生产环境**：如果您的项目要发布上线，请采用 [服务端生成 UserSig](https://trtc.io/document/35166) 的方式。
-
-
-## 步骤四：拨打您的第一通电话
-1. 调用 [TUICallKitServer.calls API](https://cloud.tencent.com/document/product/647/81015#calls) 拨打通话。
-
-   ``` javascript
-   //【3】Make a 1v1 video call
-   const call = async () => {
-     await TUICallKitServer.calls({
-       userIDList: [calleeUserID],
-       type: TUICallType.VIDEO_CALL,
-     });
-   };
-   ```
-2. 运行项目。
-   
-
-   > **警告：**
-   > 
-
-   > **本地环境请在 localhost 协议下访问，公网体验请在 HTTPS 协议下访问，具体参见 **[网络访问协议说明](https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-05-info-browser.html#h2-3)**。**
-   > 
-
-3. 打开两个浏览器页面，输入不同的 userID(由您定义) 单击`step1. init`登录（主叫方和被叫方）。
-
-
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/607e29cf2c8511efa4f552540077de32.png)
-
-4. 两个 userID 都登录成功后，单击`step2. call `拨打通话，如果您有通话问题，参见 [常见问题](https://cloud.tencent.com/document/product/647/78769)。
-
-
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/649bb2192c8511efa01d5254005235d8.png)
-
-
-## 更多特性
-- [设置昵称、头像](https://write.woa.com/document/140283367112228864)
-
-- [群组通话](https://write.woa.com/document/139754159113613312)
-
-- [悬浮窗](https://write.woa.com/document/139754324095582208)
-
-- [自定义铃声](https://write.woa.com/document/139754575448756224)
-
-- [监听通话状态、组件回调事件](https://write.woa.com/document/139754708026372096)
-
-- [设置分辨率、填充模式](https://write.woa.com/document/140283358174851072)
-
-- [界面定制](https://write.woa.com/document/90292932030300160)
-
-
-## 常见问题
-- 如果您的接入和使用中遇到问题，请参见 [常见问题](https://cloud.tencent.com/document/product/647/78769)。
-
-- 了解更多详情您可 [腾讯云通信官方社群](https://zhiliao.qq.com/) 进行咨询和反馈。

package/resource/doc/tuicallkit/react/how_to_run_react_callkit_demo.md

@@ -1,93 +0,0 @@
-本文将介绍如何快速实现音视频通话演示。您将在10分钟内完成以下关键步骤，并最终获得一个具有全面用户界面的视频通话功能。
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/be8d9e591bd211efa1975254005ac0ca.png)
-
-## 环境准备
-- Node.js, 如果没有，[请点击下载。](https://nodejs.org/en)
-
-- Modern browser, supporting WebRTC API.
-
-
-## 步骤一：下载 Demo
-1. 打开终端，克隆仓库。
-
-   ``` bash
-   git clone 
-   ```
-2. 安装依赖。
-
-
-   
-
-
-【React】
-``` bash
- cd ./TUICallKit/Web/basic-react
-```
-
-
-【Vue3】
-``` bash
- cd ./TUICallKit/Web/basic-vue3
-```
-
-   ``` bash
-    npm install
-   ```
-
-## 步骤二：配置 Demo
-1. [点击进入开通服务页面](https://trtc.io/document/59832?platform=android&product=call)，获取`SDKAppID、SecretKey`**。**
-
-2. 填写 `SDKAPPID、SecretKey`。
-
-
-   
-
-【React】
-
-文件路径：`TUICallKit/Web/basic-react/src/debug/GenerateTestUserSig-es.js`
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/1b9fc890668411ef989d52540055f650.png)
-
-【Vue3】
-
-文件路径：`TUICallKit/Web/basic-vue3/src/debug/GenerateTestUserSig-es.js`
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/3634302a668411efbd54525400f69702.png)
-
-
-## 步骤三：运行 Demo
-
-打开终端，复制示例命令运行 Demo。
-
-
-
-
-【TUICallKit/Web/basic-react】
-``` bash
-npm run dev
-```
-
-
-【TUICallKit/Web/basic-vue3】
-``` bash
-npm run dev
-```
-
-> **警告：**
-> 
-
-> **本地环境请在 localhost 协议下访问，公网体验请在 HTTPS 协议下访问，具体参见 **[网络访问协议说明](https://web.sdk.qcloud.com/trtc/webrtc/doc/en/tutorial-05-info-browser.html#h2-3)**。**
-> 
-
-
-## 步骤四：拨打您的第一通电话
-1. 打开浏览器页面，输入项目运行地址，登录 userID（由您定义）。
-
-
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/52631700668411ef9664525400d5f8ef.png)
-
-2. 输入被叫方的 userID，单击 `发起通话` 体验您的第一通话。
-
-
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/58624476668411efb0e2525400a9236a.png)