即时通信 IM AI 接入（MCP）

概述
本文介绍通过 MCP Server 在 Cursor 、CodeBuddy、VSCode 等具有 AI 辅助编程能力的 IDE 中如何快速集成 TUIKit 组件。
AI 通过 MCP Server 配置发现tencentcloud-sdk-mcp提供的工具集，当您输入提示词（例如“创建一个 Web 的聊天应用”）时，AI 会自动匹配并调用这些工具，执行环境初始化、依赖安装、代码生成，从而代替您手动编写大量的集成代码。
@tencentcloud/sdk-mcp 是一个集成 TUIKit 的工具集，给您提供 TUIKit 的集成指引，通过工具 Agent 能够自动帮您创建项目、安装依赖、启动项目。项目启动后如果有运行时错误，您可以直接给 AI 提供错误信息，AI 会自动帮忙处理错误。
效果演示
1. 以 Web 工程接入为例，在 CodeBuddy  聊天区域选择 Craft 模式，输入您的提示词后，大模型能够自动推理使用相应的工具引导您进行操作。
﻿
2. 通过 MCP Server 集成 chat-uikit-vue3 成功后的运行效果如下：
﻿
前置条件
使用 @tencentcloud/sdk-mcp前，您需要准备以下内容：
注册一个腾讯云账号。
在腾讯云控制台创建一个 即时通信 IM 应用。
在创建 即时通信 IM 应用 下创建一个用户。
获取您 IM 应用的 SDKAppID 、userID 和对应的 userSig（用户登录 IM 的签名信息）并保存，详情可参见 创建应用。
快速开始
IDE 通过 JSON 配置文件发现 MCP 服务，可全局或按项目配置 @tencentcloud/sdk-mcp服务， 以下提供 Cursor、CodeBuddy、 VSCode 中使用 MCP 的配置方法。
所有的 IDE 都需要配置 mcpServers 信息，配置信息如下：
{
  "mcpServers": {
    "tencentcloud-sdk-mcp": {
      "command": "npx",
      "args": ["-y", "@tencentcloud/sdk-mcp"]
    }
  }
}
Cursor 配置步骤
CodeBuddy 配置步骤
VS Code 配置步骤
1. ﻿下载 Cursor IDE，在 Cursor 中使用 MCP 服务，Cursor 必须处于代理模式（AGENT MODE）。
2. 用 Cursor 打开您的项目目录，在项目根目录下创建 .cursor/mcp.json 文件，并将 mcpServers 的配置信息更新到 mcp.json 中。
3. 当保存上述文件时，会弹出下图提示，选择 Enable 开启 MCP Server。
﻿
4. 配置完成，在 Cursor 的 Settings - Tools & MCP 选项中检查 MCP server 的可用性。
﻿
1. ﻿下载 CodeBuddy IDE。
2. 用 CodeBuddy 打开您的项目目录，单击MCP，然后手动配置。
﻿
﻿
3. 将 mcpServers 的配置信息更新到配置文件中。
4. 配置保存时会自动开启 MCP Server， tools 加载成功后单击完成。
﻿
在 VS Code 中使用 MCP 服务，推荐使用 VS Code CodeBuddy 插件。
1. 安装  VS Code CodeBuddy 插件。
﻿
2. 创建安装成功后，在侧边栏找到 CODEBUDDY 入口，单击 MCP 市场图标 > 已安装 > 配置 MCP Server。
﻿
﻿
3. 将 mcpServers 的配置信息更新到配置文件中。
4. 保存配置时会自动开启 MCP Server， 检查 tools 是否加载成功。
﻿
使用 AI Agent 快速生成项目
1. 在上述配置完成后，在 IDE 中输入您的提示词，提示词中建议提供 IM 信息（SDKAppID、userID、userSig），方便项目创建完成后 Agent 自动更新相关的文件信息。
2. 在创建项目过程中，Agent 会在 App.vue/App.tsx 中引入 TUIKit 组件，并按照模板代码增量更新 App.vue/App.tsx中的代码。
3. 项目创建完成时， Agent 会提示您输入 SDKAppID、userID、userSig 信息，信息输入完成后 Agent 会自动更新 App.vue/App.tsx 中默认的占位符。
4. Agent 会自动使用 npm run dev 或者 pnpm run dev 启动项目，如果项目没有自动启动，您可以输入启动指令， Agent 会自动执行。
提示词使用建议
推荐您使用下面的提示词：
1. 创建一个基于 Vue3 的聊天应用
2. 创建一个基于 React 的聊天应用
3. 创建一个 Web 的聊天应用
4. 创建一个类似微信的聊天项目
5. 帮忙搭建一个 UI 类似企微的聊天应用
AI 接入（MCP）

本页目录：

概述

效果演示

前置条件

快速开始

使用 AI Agent 快速生成项目

提示词使用建议
