이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.
AI Integration (MCP)

Overview
This article introduces how to quickly integrate the TUIKit component in IDEs with AI-assisted programming capabilities such as Cursor, CodeBuddy, and VSCode through MCP server.
AI detects the toolkit provided by tencent-rtc through MCP Server configuration. When you input a prompt (such as "create a web chat application"), the AI will automatically match and call these tools to execute environment initialization, dependency installation, and code generation, thereby replacing manual writing of a large amount of integration code.
@tencent-rtc/mcp is a toolkit for integrating TUIKit. It provides an integration guide for TUIKit. The tool Agent can automatically create a project, install dependencies, and start the project. After startup, if there is a runtime error, you can directly provide the error information to the AI, and the AI will automatically handle the error.
Effect Demo
1. Taking web project integration as an example, select Craft mode in the CodeBuddy chat area. After entering your prompt content, the large model can perform reasoning to use appropriate tools and guide you through operations:
﻿
2. After integrating chat-uikit-react via MCP server, the execution effect upon success:
﻿
Prerequisites
Before using @tencent-rtc/mcp, you need to prepare the following content:
Create a Chat application in the Tencent Cloud console.
Create a user under a Chat application.
Get the SDKAppID, userID, and corresponding userSig (signature information for IM login) of your Chat application and save them.
Quick Start
The IDE detects the MCP service via JSON configuration files, which can be set globally or per project for the @tencent-rtc/mcp service. The following provides configuration methods for using MCP in Cursor, CodeBuddy, and VSCode.
All IDEs need to configure mcpServers info. The configuration message is as follows:
{
  "mcpServers": {
    "tencent-rtc": {
      "command": "npx",
      "args": ["-y", "@tencent-rtc/mcp"]
    }
  }
}
Cursor Configuration Steps
CodeBuddy Configuration Steps
VS Code Configuration Steps
1. ﻿Download Cursor IDE. To use the MCP service in Cursor, it must be in proxy mode (AGENT MODE).
2. Open your project directory in Cursor, create a .cursor/mcp.json file in the project root directory, and update the mcpServers configuration  to mcp.json.
3. When saving the file, the figure below will pop up. Select Enable to turn on the MCP Server.
﻿
4. After configuration completion, check the MCP server availability in the Settings - Tools & MCP option of Cursor.
﻿
1. ﻿Download CodeBuddy IDE 
2. Open your project directory with CodeBuddy, click [MCP] -> [Manual Configuration].
﻿
﻿
3. Update the mcpServers configuration information in the configuration file.
4. The MCP server will auto on when saving configuration. After tools load successfully, click [Done].
﻿
1. Install the VS Code CodeBuddy plug-in.
﻿
2. Once installed successfully, find the CodeBuddy portal in the sidebar, click [MCP Market] -> [Installed] -> [Configure MCP Server].
﻿
﻿
3. Update the mcpServers configuration information in the configuration file.
4. The MCP server will auto on when saving configuration. Check whether tools are loaded successfully.
﻿
Using AI Agent to Quickly Generate Projects
1. After the above configurations are completed, enter your prompt content in the IDE. It is advisable to include Chat info (SDKAppID, userID, userSig) in the prompt content for the Agent to auto-update related file information after project creation.
2. During project creation, the Agent will introduce the TUIKit component in App.vue/App.tsx and incrementally update the code in App.vue/App.tsx according to the template code.
3. When project creation is completed, the Agent will prompt you to input SDKAppID, userID, and userSig info. Once information is entered, the Agent will auto-update the default placeholder in App.vue/App.tsx.
4. The Agent will automatically use npm run dev or pnpm run dev to start the project. If the project does not start automatically, you can enter the startup command and the Agent will execute it.
Prompt Usage Recommendations
Recommend you use the following prompt:
1. Create a chat app based on Vue3
2. Create a React-based chat app
3. Create a web chat app
4. Create a chat project similar to WeChat
5. Build a chat app with a UI similar to WeCom
﻿
﻿
﻿
AI Integration (MCP)

Overview

Effect Demo

Prerequisites

Quick Start

Using AI Agent to Quickly Generate Projects

Prompt Usage Recommendations

﻿
