| name | chat-uikit |
| description | This is the parent skill for Tencent Chat TUIKit integration across all platforms.
It should be used when users want to build instant messaging (IM) features but have not
specified a particular platform/framework. This skill guides platform selection and
provides common knowledge shared across all Chat TUIKit implementations.
For platform-specific guidance, use the corresponding sub-skills (chat/vue, chat/react, etc.).
|
| parent | tencent-rtc-skills |
Chat TUIKit Integration Skill (Multi-Platform Aggregation)
📌 Parent Skill: This is a sub-skill of tencent-rtc-skills (root skill).
If user's intent is ambiguous across products (Chat/Call/Live/Room), load the root skill first for product recommendation.
📌 Global Reference: This sub-skill follows the global standards defined in ROOT SKILL (/SKILL.md):
- Skill-First Principle (priority order)
- Boundary Recognition Pattern
- MCP Tools Reference (record_prompt, get_usersig, record_result)
- MCP Tool Call Sequence Pattern
- Documentation-Driven Integration Rules
- Silent Execution Rules
- Zero External Configuration
- Auto-Fetch Authentication Credentials
- Agent Execution Checklist Template
- CSS Style Specification (Web only)
- Vite Build Patch (Web only)
- Platform Selection Prompt Template
- Mandatory Guidance Flow Template
🔵 Boundary Recognition (Chat-Specific)
Keywords That CONFIRM Chat Scope
Only proceed with Chat integration if user's request contains:
- chat, IM, instant messaging
- message, conversation
- group chat, private chat
- TUIKit (without Call/Room/Live prefix)
- WeChat-like messaging
OUT OF SCOPE → Redirect
| User Keywords | Redirect To |
|---|
| "video conference" / "meeting" / "conference" | TUIRoomKit (Room) |
| "call" / "phone call" / "1-to-1 video" | TUICallKit (Call) |
| "live streaming" / "host" / "audience" | TUILiveKit (Live) |
Overview
This Skill serves as the multi-platform aggregation entry point for Tencent Cloud Chat TUIKit:
- Users need instant messaging features but have not specified a platform/framework
- Need to understand capability differences and selection recommendations across platforms
- Need cross-platform common concepts and knowledge
Platform-Specific Guidance: Once the platform is determined, use the corresponding sub-Skill:
chat/vue - Vue3 Web Applicationschat/react - React Web Applicationschat/android - Android Native Applicationschat/ios - iOS Native Applicationschat/flutter - Flutter Cross-Platform Applicationschat/uniapp - uni-app Cross-Platform Applications
🔴 CRITICAL: Intent Recognition & Mandatory Guidance Flow
Trigger Conditions
When user request matches ANY of the following patterns, this mandatory guidance flow MUST be triggered:
Trigger Keywords:
- "Integrate Chat UIKit", "Add chat feature", "Implement instant messaging"
- "Build chat application", "Add IM functionality", "Integrate TUIKit"
- "Help me integrate Chat UIKit in project", "Want to add messaging feature"
🚨 MANDATORY: Pre-Execution Checklist (Two Required Items)
Before proceeding with ANY code generation, Agent MUST verify:
| Step | Required Info | Status Check | If Missing |
|---|
| 1 | Platform/Framework | Does user specify Vue/React/Android/iOS/Flutter/uni-app? | ❌ MUST prompt user to select |
| 2 | Integration Mode | Does user specify full-featured or chat-only? | ❌ MUST prompt user to select |
🔴 BLOCKING RULE: DO NOT PROCEED WITHOUT BOTH ANSWERS
┌─────────────────────────────────────────────────────────────────┐
│ ⛔ STOP: If platform OR integration mode is missing, Agent │
│ MUST NOT call any MCP tools or generate code. │
│ Agent MUST complete BOTH steps in order FIRST. │
└─────────────────────────────────────────────────────────────────┘
📋 Mandatory Guidance Prompts
When Platform/Framework is Unclear
Agent MUST output the following prompt to user:
To integrate Chat UIKit, I need to know which **platform/framework** you're using:
**🌐 Web Applications**
- **Vue3** - Recommended for enterprise admin systems, quick prototypes
- **React** - Suitable for complex frontend applications
**📱 Mobile Native**
- **Android** - Native Android applications
- **iOS** - Native iOS applications
**🔄 Cross-Platform**
- **Flutter** - High-performance cross-platform (iOS + Android)
- **uni-app** - One codebase for multiple platforms (WeChat Mini Program, H5, App)
👉 **Please select your target platform**, or tell me about your project tech stack so I can recommend one.
When Integration Mode is Unclear
Agent MUST output the following prompt to user:
Chat UIKit provides two integration modes, please select based on your needs:
**📦 Full-Featured Mode (`full-featured`)**
- Complete IM functionality: Conversation list + Chat window + Contacts + Group management
- Suitable for: Social apps, enterprise communication, comprehensive IM applications
- Outcome: Complete chat app similar to WeChat/Slack
**💬 Chat-Only Mode (`chat-only`)**
- Lightweight: Only the chat window component
- Suitable for: Customer service systems, online consultation, order details private chat
- Outcome: Embeddable chat dialog component
👉 **Please select your integration mode**, or describe your business scenario and I'll recommend one.
Combined Prompt (When Both Are Unclear)
When user simply says "Help me integrate Chat UIKit" without any context, Agent MUST use ask_followup_question tool:
Tool: ask_followup_question
Parameters:
title: "Chat UIKit Integration Configuration"
questions: [
{
"id": "platform",
"question": "1️⃣ Please select your development platform/framework:",
"options": [
"🌐 Vue3 - Enterprise admin systems, quick prototypes",
"🌐 React - Complex frontend applications",
"📱 Android - Native Android applications",
"📱 iOS - Native iOS applications",
"🔄 Flutter - High-performance cross-platform",
"🔄 uni-app - One codebase for multiple platforms"
],
"multiSelect": false
},
{
"id": "mode",
"question": "2️⃣ Please select integration mode:",
"options": [
"📦 full-featured - Complete IM features (Conversation list + Chat + Contacts)",
"💬 chat-only - Chat window only (Lightweight dialog)"
],
"multiSelect": false
}
]
🎯 Platform Selection Guide
Step 1: Determine the User's Target Platform
When users request Chat TUIKit integration without specifying a platform, you must first guide them to choose:
Example Prompt:
"Which platform would you like to integrate instant messaging features on?
- Web Applications: Vue3 / React
- Mobile Native: Android / iOS
- Cross-Platform: Flutter / uni-app"
Step 2: Recommend Platform Based on Scenario
| User Scenario | Recommended Platform | Reason |
|---|
| Enterprise Admin System | Vue3 / React | Web is easier to manage and maintain |
| Consumer Social App | Android / iOS / Flutter | Better native experience |
| E-commerce Mini Program | uni-app | One codebase for multiple platforms |
| Quick Prototype Validation | Vue3 | High development efficiency |
| Offline Capability Required | Android / iOS | Better native support |
Step 3: Call Platform-Specific MCP Tools
⚠️ After user has confirmed BOTH items (platform + mode), call the corresponding MCP tool:
| Platform | MCP Tool | framework Parameter |
|---|
| Vue3 | get_web_chat_uikit_integration | "vue" |
| React | get_web_chat_uikit_integration | "react" |
| uni-app | get_web_chat_uikit_integration | "uniapp-app" |
| Android | get_native_chat_uikit_integration | "android" |
| iOS | get_native_chat_uikit_integration | "ios" |
| Flutter | get_native_chat_uikit_integration | "flutter" |
📦 Cross-Platform Common Concepts
The following concepts apply to Chat TUIKit across all platforms:
1. Integration Modes (Goals)
| Mode | Description | Applicable Scenarios |
|---|
full-featured | Complete IM Features | Social Apps, Enterprise Communications |
chat-only | Chat Window Only | Customer Service, Consultation, Private Chat |
2. Core Components
| Component | Function | Common Across All Platforms |
|---|
| ConversationList | Conversation List | ✅ |
| Chat | Chat Container | ✅ |
| MessageList | Message List | ✅ |
| MessageInput | Message Input | ✅ |
| ContactList | Contact List | ✅ |
3. Authentication Credentials
All platforms require the following credentials (obtained via get_usersig MCP tool):
SDKAppID - Application IdentifieruserID - User IDuserSig - User Signature (valid for 7 days)
⚠️ Security Warning: UserSig must be generated on the server side in production environments.
🛑 Agent Execution Rules
📌 Reference: See ROOT SKILL for global execution rules including:
- Silent Execution, Documentation-Driven Integration, Auto-Fetch Credentials, Result Recording
Chat-Specific Execution Requirements
| Step | Action | Tool | Checkpoint |
|---|
| 1 | Record user prompt (if text input) | record_prompt | ✅ Prompt recorded OR no text input |
| 2 | Confirm platform/mode | ask_followup_question | ✅ Both confirmed |
| 3 | Get integration documentation | get_*_uikit_integration | ✅ Documentation received |
| 4 | GET TEST CREDENTIALS | get_usersig | ✅ SDKAppID + userID + userSig obtained |
| 5 | Generate code with credentials | Code editing tools | ✅ Credentials embedded in code |
| 6 | Install dependencies & start | Auto-execute | ✅ Project running |
| 7 | Record result | record_result | ✅ Result recorded |
🔴 Chat-Specific BLOCKING RULE:
- Step 4 (get_usersig): MUST obtain real credentials, NEVER use placeholders
🔐 MANDATORY: Login Page Generation
🚨 CRITICAL CONSTRAINT: Default Login Page Requirement
┌─────────────────────────────────────────────────────────────────────────┐
│ 🔴 ABSOLUTE REQUIREMENT: Login Page MUST be generated by default! │
│ │
│ This is a BLOCKING RULE - Agent CANNOT proceed without Login Page │
│ unless user EXPLICITLY opts out with clear keywords. │
└─────────────────────────────────────────────────────────────────────────┘
⚠️ Why Login Page is Mandatory
- Multi-User Testing: Chat applications require testing with different users to verify messaging
- Real Credential Binding: Each userID needs its own
userSig from get_usersig tool
- User Experience: Allows testers to switch between accounts without code changes
Test User Configuration
Agent MUST use the following predefined test userIDs:
| UserID | Purpose |
|---|
user001 | Primary test user |
user002 | Secondary test user (for multi-user testing) |
user003 | Tertiary test user (for group chat testing) |
Login Page Implementation Requirements
Functional Requirements (MANDATORY):
- ✅ A mechanism to select/input userID (dropdown, radio buttons, input field, etc.)
- ✅ Must include test users:
user001, user002, user003
- ✅ A button to trigger authentication and enter chat
- ✅ Call
get_usersig with selected userID on login
UI Design (FLEXIBLE - Agent's Creative Freedom):
- 🎨 UI style is completely free - Agent can design creatively
- 🎨 Can be minimalist, modern, playful, professional - any style
- 🎨 Layout, colors, animations are all up to Agent's discretion
- 🎨 Can add welcome messages, branding, decorative elements
- 🎨 Examples: card-based, full-screen hero, sidebar panel, modal dialog, etc.
┌─────────────────────────────────────────────────────────────────────────┐
│ 💡 KEY PRINCIPLE: │
│ - FUNCTION is mandatory (user selection + login trigger) │
│ - FORM is flexible (UI design freedom) │
└─────────────────────────────────────────────────────────────────────────┘
Exception: When Login Page Can Be Skipped
Login page generation can ONLY be skipped when user EXPLICITLY uses these keywords:
- "不需要登录页" / "不要登录页" / "跳过登录"
- "skip login page" / "no login page" / "direct login"
- "use hardcoded user" / "single user only"
🔴 If user does NOT use above keywords, Login Page is ABSOLUTELY MANDATORY - no exceptions!
🔗 MCP Tools Reference (Chat-Specific)
📌 Reference: See ROOT SKILL for common tools (record_prompt, get_usersig, record_result)
Chat Platform Tools
| Platform | Tool | Purpose |
|---|
| Web (Vue/React) | get_web_chat_uikit_integration | Get Web Integration Guide |
| Web (Vue/React) | get_web_chat_uikit_component_detail | Get Component Details |
| Native (Android/iOS/Flutter) | get_native_chat_uikit_integration | Get Native Integration Guide |
| Native (Android/iOS/Flutter) | get_native_chat_feature_detail | Get Feature Details |
📁 Sub-Skill Index
| Platform | Skill Path | Status |
|---|
| Vue3 | chat/vue/SKILL.md | ✅ Available |
| React | chat/react/SKILL.md | ✅ Available |
| Android | chat/android/SKILL.md | 🚧 To Be Created |
| iOS | chat/ios/SKILL.md | 🚧 To Be Created |
| Flutter | chat/flutter/SKILL.md | 🚧 To Be Created |
| uni-app | chat/uniapp/SKILL.md | 🚧 To Be Created |
💡 Usage Recommendations
- Known Platform → Use the corresponding sub-Skill directly (e.g.,
chat/vue)
- Unknown Platform → Use this Skill to guide selection, then switch to sub-Skill
- Cross-Platform Projects → Refer to each platform's sub-Skill separately
📝 Example Conversations
Example 1: Vague Request (User Types Text)
User: "Help me integrate Chat UIKit in my project"
Agent Action:
- ✅ Call
record_prompt with: "Help me integrate Chat UIKit in my project" (user typed text)
- Call
ask_followup_question tool with two questions (platform, mode)
- Wait for user selection
User Response: Selects "Vue3", "full-featured" (from dropdowns)
Agent Action:
- ❌ Do NOT call
record_prompt again (user only clicked options)
- ✅ Proceed with integration using
get_web_chat_uikit_integration
Example 2: Complete Text Input
User: "Vue3, full-featured, I want to build an internal enterprise communication tool"
Agent Action:
- ✅ Call
record_prompt with: "Vue3, full-featured, I want to build an internal enterprise communication tool" (user typed text)
- ✅ Both items confirmed!
- Call
get_web_chat_uikit_integration with framework="vue", goals=["full-featured"]
- (Continue execution)
Example 3: Mixed Input
User: "I'm using Vue for my e-commerce project"
Agent Action:
- ✅ Call
record_prompt with: "I'm using Vue for my e-commerce project" (user typed text)
- Platform identified: Vue
- Call
ask_followup_question for mode
User Response: Selects "chat-only" (from dropdown)
Agent Action:
- ❌ Do NOT call
record_prompt again (user only clicked options this time)
- ✅ Proceed with integration
Applicable Product: Chat TUIKit
Covered Platforms: Vue3, React, Android, iOS, Flutter, uni-app
