文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>即时通信 IM>聊天互动（含 UI）>AI 集成（MCP）>移动端（uni-app）

移动端（uni-app）

最近更新时间：2025-12-31 16:35:22

我的收藏

本页目录：

概述

本文档为开发者提供了清晰、高效的步骤，用于在支持 AI 辅助编程的 IDE（例如 Cursor、Trae、CodeBuddy、VSCode）中，通过 Model Context Protocol (模型上下文协议) Server 快速在移动端 uni-app 项目中集成 TUIKit ，最终打包成 App（iOS/Android）。通过配置 MCP 工具，AI 可以调用 @tencentcloud/sdk-mcp 提供的工具集，帮您完成以下工作：
帮您自动下载 TUIKit 组件所需的依赖，并按照源码集成的方式把 TUIKit 复制到您项目中。
帮您自动生成 TUIKit 组件的集成代码，让您快速拥有如单聊、群聊、会话列表 等核心即时通信功能，无需手动编写大量重复性代码。
帮您自动配置 manifest.json 和 pages.json 文件，无需手动按照集成文档进行配置修改。

核心功能界面展示

TUIKit uniapp 移动端界面效果如下图所示：


步骤1：环境准备

开发环境准备

开发工具： HBuilderX（最新版）和 AI 代码编辑器（推荐 Cursor 或 CodeBuddy）。
Node.js：建议使用 Node.js LTS (长期支持) 版本，通常在 18.x 或 20.x 系列。
CSS 预处理器： sass (sass-loader 版本 ≤ 10.1.1)。

获取即时通信 IM 应用信息

获取您自己的腾讯云即时通信 IM 应用的凭证信息，注册并登录 即时通信 IM 控制台，创建一个 IM 应用并获取应用的 SDKAppID 和 SecretKey，这将在配置 MCP 时作为环境变量使用。


创建 uni-app 项目

注意：
如果您没有 uni-app 项目，请先用 HBuilderX 创建项目，根据需要选择 vue2 或 vue3。
打开 HBuilderX，在菜单栏中选择文件 > 新建 > 项目，创建一个名为 chat-example 的 uni-app 项目。


步骤2：MCP 工具配置

在使用 MCP 工具前，您需要在代码编辑器（例如：Cursor、Trae、CodeBuddy、VSCode）的配置面板中进行设置。推荐您配置到当前项目的根目录下。
在 AI 代码编辑器中导入 uni-app 项目，按照下面的指引配置 MCP 工具。
Cursor 配置指引
Trae 配置指引
CodeBuddy 配置指引
VSCode 配置指引
1. 下载 Cursor。
2. 在项目根目录下创建 .cursor/mcp.json 文件，把 mcpServers 的配置信息更新到 mcp.json 中并进行保存。
3. 在项目根目录下创建 MCP 配置文件：
在项目根目录（与 manifest.json 同级）创建 .cursor 文件夹（如果不存在）。
在 .cursor文件夹中创建 mcp.json 文件。
将以下配置信息复制到 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 。
4. 当保存文件时，会弹出下图提示，选择 Enable 开启 MCP 工具。

5. 配置完成，在 Cursor 的 Settings - Tools & MCP 选项中检查 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. 下载 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. 安装 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：使用 AI 集成 TUIKit

导入源码和集成组件

输入提示词，AI 帮您在项目中自动完成 TUIKit 组件源码导入、组件集成、manifest.json 和 pages.json 文件的配置，您输入的提示词建议包含集成完整的 TUIKit 组件或者仅集成 Chat 聊天窗口等关键信息，方便 AI 能够准确理解您的需求。
提示词示例：
  1. 请在当前 uni-app 项目中集成 Chat TUIKit 实现完整的聊天功能用于打包 app。
  2. 请在当前 uni-app 项目中集成 Chat TUIKit 实现仅集成聊天窗口功能用于打包 app。
注意：
如果您已经配置了 SDKAppID 和 SecretKey ，在集成过程中会自动帮您生成和填写测试 UserID 和 UserSig，您可以跳过获取登录账号信息和填写登录凭据步骤 。
如果您没有配置 SDKAppID 和 SecretKey ，请务必在 MCP 环境变量中进行配置，然后您按照获取登录账号信息和填写登录凭据获取和填写账号信息。

获取登录账号信息

TUIKit 集成完成后，您需要获取 SDKAppID 登录的账号信息。
提示词示例：
请使用 MCP 工具，生成 test001 的 userSig。

填写登录凭据

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

步骤4：运行与测试项目

注意：
AI 生成代码后，请在 HBuilderX 左侧项目管理器中右键点击项目并刷新，确保文件索引同步，然后再运行。

运行项目

使用 HBuilderX 编译项目，单击菜单栏中的：运行 > 运行到手机或模拟器 > 运行到“指定”基座。


发送您的第一条消息

TUIKit 集成后会自动在会话列表创建一个与 administrator 的单聊会话，您可以直接进入会话体验发送消息。您也可以按照下图的指引搜索您已在 IM 控制台创建的其他 userID 发起会话。


常见问题

如何保证 AI 能够准确匹配到 MCP 工具？

包含关键词： 在提示词中包含例如 TUIKit、Chat、uni-app 打包 App、仅集成聊天窗口等关键词，可以提高 AI 对您需求的理解。

如何手动安装 MCP Server ?

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

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

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


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

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