文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>视频通话（含 UI）>AI 接入>Web

Web

最近更新时间：2025-11-21 14:40:01

我的收藏

本页目录：

概述

本文档为开发者提供了清晰、高效的步骤，用于在支持 AI 辅助编程的 IDE（例如 Cursor、Trae、CodeBuddy、VSCode）中，通过 Model Context Protocol (MCP) Server 快速集成 TUICallKit 组件，从而通过 AI 自动生成项目初始化和集成代码。通过配置 MCP Server，AI 可以调用 @tencentcloud/sdk-mcp 提供的工具集，帮您完成以下工作：
帮您自动初始化项目并安装所需依赖。
帮您自动生成 TUICallKit 组件的集成代码，您无需手动编写大量重复性代码。

效果预览

TUICallKit Web 和 H5 界面效果如下图所示：


步骤1：环境准备

1. 基础开发环境准备

确保您的本地开发环境中安装了推荐版本的 Node.js 和 npm (Node Package Manager)。
下载与安装：
请访问 Node.js 官方网站 下载并安装适用于您操作系统的版本。
推荐版本：建议使用 Node.js LTS (长期支持) 版本，通常在 18.x 或 20.x 系列。
验证安装：
安装完成后，请打开您电脑上的命令窗口（或叫命令提示符、终端），运行以下命令验证版本：
Windows 系统： 请按下键盘上的 Win 键 + R 键，输入 cmd，然后按回车键打开。
Mac 系统： 请按下 Command + 空格键，输入 终端 或 Terminal，然后按回车键打开。
node -v
npm -v
如果能正确显示版本号，则环境准备完成。
如果提示没有相关命令或其他错误， 请将完整的错误信息截图或文字内容提供给 AI，以便能够更高效地找到解决方案。

2. 实时音视频 TRTC 应用信息准备（可选）

说明：
如果您没有注册腾讯云账号或者没有 TRTC 应用，您可以通过 MCP 工具快速获取一个官方的临时体验账号。
如果您需要使用自己的腾讯云账号，请按照下面的步骤获取 TRTC 应用的 SDKAppID 和 secretKey，通过 MCP 工具获取登录用户的 userSig 即可，TUICallKit 体验开通详情请阅读开通服务。
获取您自己的腾讯云实时音视频 TRTC 应用的凭证信息：
注册账号： 注册一个腾讯云账号。
创建应用： 在腾讯云控制台创建一个 实时音视频 TRTC 应用。
获取密钥： 获取 TRTC 应用的 SDKAppID 和 secretKey，这将在配置 MCP 时作为环境变量使用。

步骤2：MCP 工具配置

使用 MCP 工具前，您需要在代码编辑器（例如：Cursor、Trae、CodeBuddy、VSCode）的配置面板中设置。推荐您配置到当前项目的根目录下。
CodeBuddy 配置指引
Trae 配置指引
Cursor 配置指引
VSCode 配置指引
1. 下载 CodeBuddy
2. 单击 设置 > 添加 MCP 打开 settings.json 配置 MCP。

3. 把 mcpServers 的配置信息更新到 settings.json文件中并进行保存。
{
  "mcpServers": {
    "tencentcloud-sdk-mcp": {
      "command": "npx",
      "args": ["-y", "@tencentcloud/sdk-mcp"],
      "env": {
        "SDKAPPID": "YOUR_SDKAPPID",
        "SECRETKEY": "YOUR_SECRET_KEY"
      }
    }
  }
}
注意：请及时保存您修改的配置文件。
Windows 用户： Ctrl + S，Mac 用户： Command + S 。
4. 检查 MCP 工具是否成功加载 tools。

1. 下载 Trae
2. 单击设置 > MCP > +添加 > 手动添加

3. 单击原始配置（JSON）打开配置文件，把 mcpServers 的配置信息更新到配置文件中并进行保存。
{
  "mcpServers": {
    "tencentcloud-sdk-mcp": {
      "command": "npx",
      "args": ["-y", "@tencentcloud/sdk-mcp"],
      "env": {
        "SDKAPPID": "YOUR_SDKAPPID",
        "SECRETKEY": "YOUR_SECRET_KEY"
      }
    }
  }
}
注意：请及时保存您修改的配置文件。
Windows 用户： Ctrl + S，Mac 用户： Command + S 。

4. 选择编辑器默认的 Builder with MCP 或者将 MCP 添加到您自定义的 Builder 中。

1. 下载 Cursor
2. 在项目根目录下创建 .cursor/mcp.json 文件，把 mcpServers 的配置信息更新到 mcp.json 中并进行保存。
{
  "mcpServers": {
    "tencentcloud-sdk-mcp": {
      "command": "npx",
      "args": ["-y", "@tencentcloud/sdk-mcp"],
      "env": {
        "SDKAPPID": "YOUR_SDKAPPID",
        "SECRETKEY": "YOUR_SECRET_KEY"
      }
    }
  }
}
注意：请及时保存您修改的配置文件。
Windows 用户： Ctrl + S，Mac 用户： Command + S 。
3. 当保存文件时，会弹出下图提示，选择 Enable 开启 MCP 工具。

4. 配置完成，在 Cursor 的 Settings - Tools & MCP 选项中检查 MCP 工具是否成功加载 tools。

1. 安装 VS Code CodeBuddy 插件。

2. 插件安装成功后，在侧边栏找到 CODEBUDDY 入口，单击 MCP 市场图标 > 已安装 > 配置 MCP Server。


3. 把 mcpServers 的配置信息更新到配置文件中并进行保存。
{
  "mcpServers": {
    "tencentcloud-sdk-mcp": {
      "command": "npx",
      "args": ["-y", "@tencentcloud/sdk-mcp"],
      "env": {
        "SDKAPPID": "YOUR_SDKAPPID",
        "SECRETKEY": "YOUR_SECRET_KEY"
      }
    }
  }
}
注意：请及时保存您修改的配置文件。
Windows 用户： Ctrl + S，Mac 用户： Command + S 。
4. 保存成功后检查 MCP 工具是否成功加载 tools。


步骤3：分场景集成 TUICallKit

配置完成后，您即可通过 AI 提示词与 AI 进行对话，快速集成 TUICallKit 组件。

场景一：从零开始创建项目并集成 TUICallKit (推荐)

3.1 创建和初始化项目

输入提示词， AI 帮您自动创建项目，项目创建成功后 AI 会自动在 App.vue/App.tsx 文件中引入 TUICallKit 组件，并以模板代码的方式更新文件。
提示词示例：
1. 请使用 TUICallkit 组件创建一个 vue3 音视频通话应用。
2. 请使用 TUICallkit 组件创建一个 react18 音视频通话应用。
3. 请使用 TUICallkit 组件创建一个 UI 类似微信音视频通话界面的 vue3 聊天应用。

3.2 生成 userSig

等待 TUICallKit 集成完成后，下一步是为用户生成登录签名（userSig）。
提示词示例：
请使用 MCP 工具，为 userID test001 生成一个 userSig。

3.2 获取登录账号信息

TUICallKit 集成完成后，您需要获取一个官方体验账号或使用您自己的 SDKAppID 获取登录的账号信息。
获取官方体验账号
获取自己账号的 userSig
提示词示例：
请使用 MCP 工具，获取一个官方体验账号。
使用您自己的账号获取 userSig 时，您需要在配置 MCP 工具时，把 SDKAppID 和 secretKey 配置到环境变量 env中。
提示词示例：
请使用 MCP 工具，给我配置的 sdkappid 的用户 test001 生成一个 userSig。

3.3 填写登录凭据

AI 输出账号信息后，让 AI 自动将所有登录信息填入代码。
提示词示例：
请把 SDKAppID、userID、userSig 填写到代码中。

场景二：在已有项目中集成 TUICallKit

3.1 依赖安装和组件导入

输入提示词， AI 帮您在已有项目中集成 TUICallKit 组件，提示词中请务必指定目标文件路径，以提高 AI 操作的准确性（例如：请在 src/views/call.vue 中集成 TUICallKit）。
提示词示例：
1. 请在 xxx 中集成 vue3 TUICallKit 组件。

3.2 获取登录账号信息

TUICallKit 集成完成后，您需要获取一个官方体验账号或使用您自己的 SDKAppID 获取登录的账号信息。
获取官方体验账号
获取自己账号的 userSig
提示词示例：
请使用 MCP 工具，获取一个官方体验账号。
使用您自己的账号获取 userSig 时，您需要在配置 MCP 工具时，把 SDKAppID 和 secretKey 配置到环境变量 env中。
提示词示例：
请使用 MCP 工具，给我配置的 sdkappid 的用户 test001 生成一个 userSig。

3.3 填写登录凭据

AI 输出账号信息后，让 AI 自动将所有登录信息填入代码。
提示词示例：
请把 SDKAppID、userID、userSig 填写到代码中。

步骤4：运行项目

AI 会尝试使用项目中配置的启动命令（例如 npm run dev、pnpm run dev）启动项目。
如果项目没有自动启动，您可以手动输入启动指令，AI 会自动执行。

拨打您的第一通电话

AI 创建的项目会自动生成两个体验用户，并生成登录和拨打电话的UI界面（AI 生成的 UI 界面可能和下面的不一样），您根据 AI 输出的提示信息在浏览器中打开页面即可拨打音视频通话。
用户登录界面：

发起通话界面：


常见问题

如何手动安装 MCP server ?

如果您需要手动安装 MCP server, 请在终端执行以下命令：
npx -y @tencentcloud/sdk-mcp

AI 创建项目过程中，如果遇到文件夹访问权限问题，怎么解决?

如果遇到本地目录访问权限问题，建议使用 sudo 权限给目录赋予写权限。


如果 AI 创建 React 项目默认使用 React 19，导致 React TUICallKit 集成报错，如何解决 ?

引导 AI 把 React 版本降到 react@18，并重新安装依赖。

MCP 工具生成的 userSig 登录失败，怎么办 ?

MCP 工具生成的 userSig 登录失败，可能是因为在某些特定 IDE 下自动写入时字符被修改了，您可以让 AI 重新生成或者手动复制 userSig 到代码中。
中国站
目录