AI Integration (MCP)

概览
本文介绍如何在 Cursor、Trae、CodeBuddy 等支持 AI 的 IDE 中，通过配置 MCP（Model Context Protocol，模型上下文协议） 服务端，用自然语言快速集成 Chat 的 TUIKit 组件。配置完成后，AI 将为您完成：
项目初始化与依赖安装：自动完成脚手架搭建及所需依赖安装。
TUIKit 集成代码生成：自动生成集成代码，快速获得单聊、群聊、会话列表等核心即时通信功能，无需手写重复代码。
步骤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. 获取 Chat 应用信息
获取您自己的 Chat 应用的凭证信息。参考开通服务创建一个 Chat 应用并获取应用的 SDKAppID 和 secretKey，这将在配置 MCP 时作为环境变量使用。
步骤2：MCP 工具配置
在使用 MCP 工具前，您需要在代码编辑器（例如：Cursor、Trae、CodeBuddy）的配置面板中进行设置。推荐您配置到当前项目的根目录下。
Cursor 配置指引
Trae 配置指引
CodeBuddy 配置指引
1. ﻿下载 Cursor﻿
2. 在项目根目录下创建 .cursor/mcp.json 文件，把 mcpServers 的配置信息更新到 mcp.json 中并进行保存。
{
  "mcpServers": {
    "tencent-rtc": {
      "command": "npx",
      "args": ["-y", "@tencent-rtc/mcp@latest"],
      "env": {
        "SDKAPPID": "YOUR_SDKAPPID",
        "SECRETKEY": "YOUR_SECRET_KEY"
      }
    }
  }
}
注意：请及时保存您修改的配置文件。
Windows 用户： Ctrl + S，Mac 用户： Command+ S 。
3. 当保存文件时，会弹出下图提示，选择 Enable 开启 MCP 工具。
﻿
4. 配置完成，在 Cursor 的 Settings - Tools & MCP 选项中检查 MCP 工具是否成功加载。
﻿
1. ﻿下载 Trae﻿
2. 单击设置 > MCP
﻿
3. 选择 Add > Configure Manually, 单击 Raw Config（JSON）打开配置文件，把 mcpServers 的配置信息更新到配置文件中并进行保存。
﻿
{
  "mcpServers": {
    "tencent-rtc": {
      "command": "npx",
      "args": ["-y", "@tencent-rtc/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": {
    "tencent-rtc": {
      "command": "npx",
      "args": ["-y", "@tencent-rtc/mcp"],
      "env": {
        "SDKAPPID": "YOUR_SDKAPPID",
        "SECRETKEY": "YOUR_SECRET_KEY"
      }
    }
  }
}
注意：请及时保存您修改的配置文件。
Windows 用户： Ctrl + S，Mac 用户： Command + S 。
4. 检查 MCP 工具是否成功加载 tools。
﻿
步骤3：集成 Chat
配置完成后，您即可通过 AI 提示词与 AI 进行对话，快速集成 TUIKit 组件。
从0到1集成
已有项目中集成
创建和初始化项目
输入提示词，AI 帮您自动创建项目，项目创建成功后 AI 会自动在项目中引入 TUIKit 组件，并以模板代码的方式更新文件。
提示词示例：
  1. 请使用 TUIKit 组件创建一个 vue3 聊天应用。
  2. 请使用 TUIKit 组件创建一个 react18 聊天应用。
  3. 请使用 TUIKit 组件创建一个 iOS 的聊天应用。
依赖安装和组件导入
输入提示词，AI 帮您在已有项目中集成 TUIKit 组件，您可以选择集成完整的 TUIKit 组件或者只集成 Chat 聊天窗口组件。提示词中请务必指定目标文件路径，以提高 AI 操作的准确性（例如：请在 src/views/chat.vue 中集成 TUIKit）。
提示词示例：
  1. 请在 xxx 中集成 vue3 Chat TUIKit 组件。// 集成完整的 Chat TUIKit 组件
  2. 请在 xxx 中集成 vue3 Chat 聊天窗口组件。// 集成 Chat 聊天窗口组件
步骤4：测试并运行项目
1. 创建测试账号
1.1 为了测试发送、接收消息互通，需要创建两个账号。让 AI 生成两个测试账号的 userSig。
提示词示例：
请使用 MCP 工具，生成 test001 和 test002 的 userSig。
1.2 AI 输出 userSig 后，让 AI 自动将所有登录信息填入代码。
提示词示例：
请将 test001 和 test002 的 userSig 填写到代码中。
2. 启动项目
AI 会尝试使用项目中配置的启动命令（例如运行 npm run dev、pnpm run dev 命令）启动项目。
如果项目没有自动启动，您可以手动输入启动指令，AI 会自动执行。
常见问题
如何保证 AI 能够准确匹配到 MCP 工具？
结构化提示词： 对于复杂的设计需求（例如客服场景），建议使用结构化提示词，帮助 AI 更准确地还原您的设计稿。
包含关键词： 在提示词中包含例如 TUIKit、Chat、Vue3 或 React 等关键词，可以提高 AI 对您需求的理解。
如何手动安装 MCP Server ?
如果您需要手动安装 MCP Server, 请在终端执行以下命令：
npx -y @tencent-rtc/mcp
AI 创建项目过程中，如果遇到文件夹访问权限问题，怎么解决?
如果遇到本地目录访问权限问题，建议使用 sudo 权限给目录赋予写权限。
﻿
MCP 工具生成的 userSig 登录失败，怎么办 ?
MCP 工具生成的 userSig 登录失败，可能是因为在某些特定 IDE 下自动写入时字符被修改，可让 AI 重新生成或者手动复制 userSig 到代码中。