Integrate Chat window only
Embed a single chat window into an existing web page without pulling in the full TUIKit suite. Use this when your app already has its own navigation and you only need the messaging UI in one place.
Note:
This page applies to Web (React and Vue) only.
Before starting the integration, ensure you have set up the TRTC MCP server.
When to use this
Full TUIKit includes a conversation list, contact management, search, and other screens. Most of the time you need all of that. But for these scenarios, a single chat window component is the right fit:
Use case | Example |
Customer support | A "Chat with us" button that opens a window scoped to a support agent |
Online consultation | A doctor detail page with an embedded 1-on-1 chat |
In-meeting chat | A side panel for text chat inside a video conference |
Order messaging | A buyer-seller chat embedded on an e-commerce order page |
Full TUIKit vs. chat window only
Item | Full TUIKit | Chat window only |
Platforms | Web, Android, iOS, Flutter | Web (React, Vue) |
What's included | Conversation list, chat window, contacts, search | Chat window component only |
Best for | Standalone chat apps | Embedding chat into an existing page |
Complexity | Higher (full routing and state) | Lower (single component mount) |
Example prompts by framework
Use one prompt per scenario. Replace the file path and target account with your own.
React
Scenario | What you want | Example prompt |
Basic | Chat window only, no conversation list | In my existing React project, integrate only the Chat window component |
Scoped to a file | Chat window in a specific component or page. | Add a Chat window component to src/views/customer-service.tsx — chat window only, no full TUIKit |
Locked to one conversation | Window always opens with a specific user (e.g. support agent). | Embed a chat window in src/components/ServiceChat.tsx that always chats with the account test001 |
Vue
Scenario | What you want | Example prompt |
Basic | Chat window only | In my existing Vue 3 project, integrate only the Chat window component |
Scoped to a file | Chat window in a specific component or page. | Integrate only the Vue 3 Chat window component into src/views/customer-service.vue |
Locked to one conversation | Window always opens with a specific user. | Add a Chat window to src/components/ChatPanel.vue that always opens a conversation with support@company.com |
Customize the component
After embedding, use the AI to look up the component API and generate configuration code. Example prompts:
Check what props the Chat window component supports and generate code to customize it (e.g. theme, placeholder text, or which buttons to show)
Look up the Chat window component's config and add code so it opens a conversation with a specific user (e.g. support account kf001) by default when the page loads
Prompt tips
Keywords that help the AI route to the right tool:
Goal | Include in your prompt |
Window only, no list | chat window only", "no conversation list |
Scoped to a file | Target file path, e.g. src/views/support.vue |
Locked conversation | The target userId or role, e.g. "always chat with test001 |
Query component API | "component props", "configuration options", "how to configure" |
