This guide walks developers through the streamlined process of integrating the TUIKit component into AI-powered development environments (such as Cursor, Trae, and CodeBuddy) using the Model Context Protocol (MCP) Server. By configuring the MCP Server, you enable AI to leverage the @tencent-rtc/mcp toolkit to:
Automatically initialize your project and install all required dependencies.
Automatically generate integration code for TUIKit components, allowing you to quickly implement essential Chat features—including C2C Chat, Group Chat, and Conversation List—without the need to write repetitive boilerplate code.
Step 1: Environment Setup
1. Prepare Development Environment
Make sure your local development environment has the recommended versions of Node.js and npm installed.
Recommended Version: Use the Node.js LTS (Long-Term Support) release, preferably from the 18.x or 20.x series.
Verify Installation:
After installation, open your system’s terminal
Windows: Press Win + R, type cmd, and hit Enter.
Mac: Press Command + Space, type Terminal, and hit Enter
In the terminal, run the following commands:
node -v
npm -v
If the version numbers display correctly, your environment is set up.
If you see command not found or other errors, send a full screenshot or error message text to the AI for troubleshooting.
2. Obtain Chat Application Credentials
Get the credentials for your Tencent Cloud Chat application. See Activate the Service for instructions on creating a Chat application and retrieving its SDKAppID and secretKey. You’ll use these as environment variables when configuring MCP.
Step 2: Configure MCP Tool
Before using the MCP tool, configure it in your code editor (such as Cursor, Trae, or CodeBuddy) via the configuration panel. It’s recommended to set this up in your project’s root directory.
2. Go to Settings > Add MCP to open settings.json and configure MCP.
3. Update the mcpServers configuration information to settings.json file and save it.
{
"mcpServers":{
"tencent-rtc":{
"command":"npx",
"args":["-y","@tencent-rtc/mcp"],
"env":{
"SDKAPPID":"YOUR_SDKAPPID",
"SECRETKEY":"YOUR_SECRET_KEY"
}
}
}
}
Note:
Save your configuration file immediately.
Windows:Ctrl + S
Mac:Command + S
4. Check whether the MCP tool is successfully loaded to tools.
Step 3: Configure Rules (Recommended)
AI assistant accuracy and enforcement of technical constraints depend on proper rules configuration. This is required to ensure the AI understands your TUIKit requirements and generates compliant code. Configure the Rules content when setting up the MCP tool in your code editor.
Note:
You can set rules at the project level so they only apply to the current project.
Some editors require you to select a rule trigger method. For Cursor, choose Apply Intelligently; for CodeBuddy, select Agent Request.
Obtaining Rules Content: See the appendix at the end of this document for the full rules content.
Step 4: Integrate TUIKit
Once configuration is complete, you can use AI prompts to quickly integrate the TUIKit component.
Scenario 1: Create a New Project and Integrate TUIKit (Recommended)
Create and Initialize Project
Enter a prompt, and the AI will automatically create the project. After creation, the AI will import the TUIKit component into the App.vue or App.tsx file and update it with template code.
Prompt Examples:
1. Use the TUIKit component to create a Vue3 chat application.
2. Use the TUIKit component to create a React18 chat application.
3. Use the TUIKit component to create a Vue3 chat application with a UI similar to WeChat.
Note:
If you have already configuredSDKAppID and secretKey, the integration process will automatically generate and fill in test userID and userSig for you, so you can skip the steps below.
If you haven’t configuredSDKAppID and secretKey, it’s recommended to set them in the MCP environment variables, then follow the steps below to obtain and fill in account information.
Obtain Login Credentials
After integrating TUIKit, you’ll need account credentials to log in with SDKAppID.
Prompt Example:
Use the MCP tool to generate userSig for test001.
Fill in Login Credentials
Once the AI outputs the account information, have the AI automatically fill all login details into your code.
Prompt Example:
Fill in SDKAppID, userID, and userSig in the code.
Scenario 2: Integrate TUIKit into an Existing Project
Install Dependencies and Import Components
Enter a prompt, and the AI will help you integrate the TUIKit component into your existing project. You can choose to integrate the full TUIKit component or just the Chat window component. Specify the target file path in your prompt for more accurate AI operation (e.g., Please integrate TUIKit in src/views/chat.vue).
Prompt Examples:
1. Integrate the Vue3 Chat TUIKit component in xxx. // Integrate the full Chat TUIKit component
2. Integrate the Vue3 Chat window component in xxx. // Integrate the Chat window component
Note:
If you have already configuredSDKAppID and secretKey, the integration process will automatically generate and fill in test userID and userSig for you, so you can skip the steps below.
If you haven’t configuredSDKAppID and secretKey, it’s recommended to set them in the MCP environment variables, then follow the steps below to obtain and fill in account information.
Obtain Login Credentials
After integrating TUIKit, you’ll need account credentials to log in with SDKAppID.
Prompt Example:
Use the MCP tool to generate userSig for test001.
Fill in Login Credentials
Once the AI outputs the signature, have the AI automatically fill all login details into your code.
Prompt Example:
Fill in SDKAppID, userID, and userSig in the code.
Step 5: Run the Project
The AI will attempt to start the project using the configured startup command (for example, npm run dev or pnpm run dev).
If the project doesn’t start automatically, you can manually enter the startup command and the AI will execute it.
FAQs
How can I help the AI accurately match the MCP tool?
Use structured prompts: For complex requirements (such as customer service scenarios), structured prompts help the AI better match your design mockups.
Include keywords: Adding keywords like TUIKit, Chat, Vue3, or React to your prompts helps the AI understand your requirements.
How do I manually install MCP Server?
To manually install MCP Server, run the following command in your terminal:
npx -y @tencent-rtc/mcp
What if there are folder access permission issues during AI project creation?
If you encounter local directory access permission issues, use sudo privileges to grant write access.
What if the AI creates a React project with React 19 by default, causing React TUIKit integration errors?
Direct the AI to downgrade React to react@18 and reinstall dependencies.
What if the userSig generated by the MCP tool fails to log in?
If the userSig generated by the MCP tool fails to log in, it may be due to character changes during automatic writing in some IDEs. You can have the AI regenerate or manually copy the userSig into your code.
Appendix: Rules Content
# ChatKit_Web_FeatureRouter Rule Document: Web Chat UIKit Universal Router
## Description
This rule set is the **core feature router** for the Web platform ChatKit. It encapsulates all user intent recognition logic for the **Web ChatKit** product line, aiming to **directly and precisely** route user queries (from component integration to general tools) to the corresponding MCP tool ID, improving MCP documentation hit rate.
---
## Mandatory Technical Constraints
The following technical constraints must be strictly followed when integrating Web ChatKit. The agent must adhere to these restrictions when responding to related queries.
### AI Parsing Tips:
***General Restrictions:**
* When obtaining UserSig, prompt the user to enter the userID to obtain the UserSig for login.
***Vue Integration Restrictions:**
* When integrating Vue UIKit, only use `@tencentcloud/chat-uikit-vue3`.
***Mandatory Version:** Must use **React 18.2.0** and **react-dom 18.2.0**. The use of React 19.x or any version other than 18.2.0 is strictly prohibited.
***Creation Workflow:** Direct use of `create-react-app` is strictly prohibited. It is recommended to use Vite (`npx create-vite@latest project-name --template react-ts`).
***Mandatory Downgrade & Verification:** After project creation, immediately run `npm install react@18.2.0 react-dom@18.2.0` to downgrade to the specified version and check `package.json` to confirm the correct version.
***Audio/Video Calls Integration Restrictions:**
***Mandatory Interface:** When adding Audio/Video Calls features to a project that has integrated Chat, you must use the **calls interface**; the **call/groupCall interface** has been deprecated.
---
## Rule Mapping Table (Tool Mappings)
```json
{
"ruleId": "ChatKit_Web_FeatureRouter",
"ruleName": "ChatKit_Web_FeatureRouter",
"description": "Handles all requests for Web platform ChatKit. This file contains product-specific feature and general tool mappings.",
"priority": "HIGH",
"strategy": "INTENT_TOOL_MAPPING",
"mappings": [
{
"intentKeywords": ["Complete Chat Features", "All Components", "Chat List", "Conversation List", "Full Suite Integration", "Entire UI", "Full Feature Set", "Basic Features"],
"toolDescriptionHint": "Obtain detailed usage documentation and property descriptions for individual TUIKit components, such as ConversationList, ChatHeader, MessageList, and MessageInput."
"toolDescriptionHint": "Obtain documentation and integration steps required to add Audio/Video Calls (CallKit) features to an existing Chat integration."
},
{
"intentKeywords": ["Which framework to use", "How to use React", "Vue Integration", "Which platform", "Technology Selection", "Integration Method", "Chat Integration"],
"matchedToolId": "present_framework_choice",
"toolDescriptionHint": "When the user has not specified a tech stack or platform, use this tool to present a framework or platform selection interface to narrow the documentation scope."
"defaultAction": "When user intent match is below threshold or cannot be clearly identified, always prioritize providing the complete TUIKit integration documentation."
