Chat Uikit

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

Overview

This Skill serves as the multi-platform aggregation entry point for Tencent Cloud Chat TUIKit:

1. Users need instant messaging features but have not specified a platform/framework
2. Need to understand capability differences and selection recommendations across platforms
3. Need cross-platform common concepts and knowledge

Platform-Specific Guidance: Once the platform is determined, use the corresponding sub-Skill:

• chat/vue - Vue3 Web Applications
• chat/react - React Web Applications
• chat/android - Android Native Applications
• chat/ios - iOS Native Applications
• chat/flutter - Flutter Cross-Platform Applications
• chat/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:

🔴 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

Step 3: Call Platform-Specific MCP Tools

⚠️ After user has confirmed BOTH items (platform + mode), call the corresponding MCP tool:

📦 Cross-Platform Common Concepts

The following concepts apply to Chat TUIKit across all platforms:

1. Integration Modes (Goals)

2. Core Components

3. Authentication Credentials

All platforms require the following credentials (obtained via get_usersig MCP tool):

• SDKAppID - Application Identifier
• userID - User ID
• userSig - 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

🔴 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

1. Multi-User Testing: Chat applications require testing with different users to verify messaging
2. Real Credential Binding: Each userID needs its own userSig from get_usersig tool
3. User Experience: Allows testers to switch between accounts without code changes

Test User Configuration

Agent MUST use the following predefined test userIDs:

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

📁 Sub-Skill Index

💡 Usage Recommendations

1. Known Platform → Use the corresponding sub-Skill directly (e.g., chat/vue)
2. Unknown Platform → Use this Skill to guide selection, then switch to sub-Skill
3. 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:

1. ✅ Call record_prompt with: "Help me integrate Chat UIKit in my project" (user typed text)
2. Call ask_followup_question tool with two questions (platform, mode)
3. Wait for user selection

User Response: Selects "Vue3", "full-featured" (from dropdowns)

Agent Action:

1. ❌ Do NOT call record_prompt again (user only clicked options)
2. ✅ 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:

1. ✅ Call record_prompt with: "Vue3, full-featured, I want to build an internal enterprise communication tool" (user typed text)
2. ✅ Both items confirmed!
3. Call get_web_chat_uikit_integration with framework="vue", goals=["full-featured"]
4. (Continue execution)

Example 3: Mixed Input

User: "I'm using Vue for my e-commerce project"

Agent Action:

1. ✅ Call record_prompt with: "I'm using Vue for my e-commerce project" (user typed text)
2. Platform identified: Vue
3. Call ask_followup_question for mode

User Response: Selects "chat-only" (from dropdown)

Agent Action:

1. ❌ Do NOT call record_prompt again (user only clicked options this time)
2. ✅ Proceed with integration

Applicable Product: Chat TUIKit
Covered Platforms: Vue3, React, Android, iOS, Flutter, uni-app