AI Integration (MCP)
Overview
Model context protocol (MCP) provides a better AI coding assistant for developers with extra tools for performing specialized tasks. Our Tencent Chat MCP turns your IDE AI into an expert in helping integrate the TUIKit product.
Note:
What is MCP?
Model Context Protocol (MCP) is an open standard to standardize the way AI systems such as large language models integrate and share data with external tools, systems, and data sources. It provides a standard interface to read files, performing specific tasks, and handling contextual prompts. Once configured, your IDE AI could gain the ability to perform the best practice of integrating the chat product, eliminating the hallucinations and out-of-date information.
Demonstration
This demonstration is based on the integration of the Android project.
1. After inputting the prompts into the Cursor chat, AI will execute the tools defined in Tencent Chat MCP Server. The prompts here are: What should I do to add a contact fragment in an Android chat project based on TUIKit integration documents.
2. IDE AI will integrate the required functionality based on the documents of TUIKit. The final application is as follows:
Login page | Conversation list | Contact list |
 |  |  |
Requirements
Node.js >= 18.
Cursor / VS Code / Windsurf, or other IDE that supports MCP Server.
Sign up an account and create a Chat application in console.
Record your SDKAppID and SDKSecretKey in Chat application.
Quick start
Before starting the service of Tencent Chat MCP Server, you need to set the Cursor in agent mode. You could always use JSON to find and configure the MCP server either globally or only in the workspace.
Please ensure you have completed the requirements, click to install in Cursor. (If Cursor is not installed, the webpage will appear blank.) Alternatively, create a
.cursor/mcp.json in your workspace.{"mcpServers": {"tencentcloud-chatsdk-mcp": {"command": "npx","args": ["-y", "@tencentcloud/chatsdk-intl-mcp"]}}}
Please ensure you have completed the requirements, click to install in VS Code (If VS Code is not installed, the webpage will appear blank). Alternatively, create a
.vscode/mcp.json in your workspace.{"servers": {"tencentcloud-chatsdk-mcp": {"type": "stdio","command": "npx","args": ["-y", "@tencentcloud/chatsdk-intl-mcp"]}}}
Go to
Windsurf Settings -> Cascade: Manage MCPs -> View raw config. Once configured, click Refresh in Manage MCPs.{"mcpServers": {"tencentcloud-chatsdk-mcp": {"command": "npx","args": ["-y", "@tencentcloud/chatsdk-intl-mcp"]}}}
Availability check
You could manage your MCP Servers in Cursor settings. If the icon is green, the MCP Server starts as expected. You could also start or stop your MCP in one click here.
Available tools
Tencent Chat MCP provides the following tools that LLMs can use:
read_tuikit_integrate_docs: Fetch the documentation for integrating TUIKit across various platforms, including Android, iOS, Flutter, React, and Vue. The tool offers quick-start guides exclusively for integrating TUIKit or TUIChat. For implementing more advanced functionalities, refer to the detailed documentation available on the website.platformName (required): The name of the platform used, e.g. Vue.SDKAppID (required): Your AppID used in Chat application.SDKSecretKey (required): Your secretKey used in Chat application.read_tuikit_faq_docs: Fetch documents for frequently asked questions related to TUIKit SDK. You can inquire about common issues, such as the meanings of error codes, during TUIKit integration and the usage of UserSig.SDKAppID (required): Your AppID used in Chat application.Use MCP
Example prompts
Once MCP is configured, you could try these prompts in your project:
Integrate TUIKit
"Based on tuikit documents, create a basic chat application by Vue3+Vite. Only use the codes provided by sample codes in the documents. Don't change them. My sdkAppId is xxx, secretKey is xxx. Use placeholders for UserSig and UserID for the program and tell me how to get these things at the end."
Generate a fragment
"How can I create a contact fragment in this Android application based on the TUIKit integration documents?"
Add an icon
"How can I add a search icon to add a user to contact list in this Android application based on the TUIKit integration documents?"
Frequently asked questions
"Based on TUIKit FAQ documents, where can I find my SDKAppID and SDKSecretKey for TUIKit?"
Best practice
Be specific
Make sure to mention the platform you want to integrate, your SDKAppID and SDKSecretKey when using Chat MCP. Tell LLM: "based on TUIKit" explicitly.
Request codes
Tell LLM: "Only use the codes provided by sample codes in the documents. Don't change them."
Check version
Specify the exact platform version required for implementation when providing prompts to the LLM. For instance, when creating a web demo, use prompts like: "Use Vue3 + Vite" or "Use React 18".
