tencent cloud

集成聊天窗口
下载PDF
最后更新时间：2026-03-11 17:08:19
集成聊天窗口
最后更新时间： 2026-03-11 17:08:19
下载PDF
如果您只需在现有页面中嵌入一个聊天窗口、而无需接入完整 TUIKit（会话列表、联系人等），可参考本文档。
说明：
本文档仅适用于 Web（React、Vue）。
开始集成前，请先完成 TRTC MCP Server 配置。

适用场景

适用于应用已有自有导航与布局，仅在某一处需要聊天界面的场景，常见场景如下：
场景
示例
客服咨询
页面中的联系客服入口，点击后打开与客服账号的对话窗口。
在线问诊
医生详情页内嵌与指定医生的 1v1 聊天。
会议内聊天
视频会议界面侧边栏中的文字聊天区域。
订单消息
电商订单页内嵌的买家与卖家沟通窗口。

集成 TUIKit vs. 集成聊天窗口

对比项
完整 TUIKit
仅聊天窗口
支持平台
Web、Android、iOS、Flutter。
Web（React、Vue）。
包含能力
会话列表、聊天窗口、联系人、搜索等。
仅聊天窗口组件。
适用场景
独立聊天应用。
在现有页面中嵌入单处聊天。
复杂度
较高（路由与状态完整）。
较低（挂载单一组件即可）。

示例提示词

本节提供提示词示例供您参考，使用时替换为您的实际文件名称和帐号名即可。

React

场景
需求说明
示例提示词
基础接入
只要聊天窗口、不要会话列表。
在我现有的 React 项目里，只集成聊天窗口组件。
指定文件
在指定组件或页面中挂载聊天窗口。
在 src/views/customer-service.tsx 里添加聊天窗口组件，只要聊天窗口，不要完整 TUIKit。
固定会话
窗口始终与指定用户（如客服 test001）对话。
在 src/components/ServiceChat.tsx 中嵌入聊天窗口，且默认始终与账号 test001 聊天。

Vue

场景
需求说明
示例提示词
基础接入
只要聊天窗口、不要会话列表。
在我现有的 Vue 3 项目里，只集成聊天窗口组件。
指定文件
在指定组件或页面中挂载聊天窗口。
仅将 Vue 3 的聊天窗口组件集成到 src/views/customer-service.vue。
固定会话
窗口始终与指定用户（如客服 test001）对话。
在 src/components/ChatPanel.vue 中添加聊天窗口，页面加载时默认打开与 test001 的会话。

自定义聊天窗口组件

嵌入后，可让 AI 查询聊天窗口组件的 API 并生成配置代码。示例提示词：
查一下聊天窗口组件支持哪些 props，并生成代码做定制（例如主题、占位文案、显示哪些按钮）
查一下聊天窗口组件的配置方式，写一段代码：页面加载时默认打开与指定用户（例如客服账号 kf001）的会话

提示词技巧

在提示词中加入以下关键词，有助于 AI 正确选用仅聊天窗口的 MCP 工具：
目标
建议在提示词中包含
只要窗口、不要会话列表
“只需要聊天窗口”
指定接入文件
写明目标文件路径，如 src/views/support.vue
固定会话对象
写明目标 userId 或角色，如“始终与 test001 聊天”
查询组件 API
“组件 props”、“如何配置”

相关文档

如果在集成中遇到登录、链接等问题，参考常见问题进行故障排查。
本页内容是否解决了您的问题？
您也可以 联系销售 或 提交工单 以寻求帮助。
是
否

文档反馈