面向开发者的 CHAT
能自然融入您产品的聊天 UI Kit。
从已连接的会话列表、消息视图和消息编辑器开始。利用平台专属组件和受支持的自定义点,打造符合您需求的界面。
在您的应用中提供消息功能,遵循您的品牌风格和业务规则。
选择您的平台
适用于你的框架的互联组件。
比较各平台的组件模型、安装要求和自定义选项。
React Chat UI Kit
使用 Tencent RTC 的 React Chat SDK 和 UI Kit 构建单聊和群聊。添加相互连接的会话列表、消息和消息编辑器,然后根据产品需求进行自定义。
组件与设置React Native Chat UI Kit
使用 Tencent RTC React Native Chat UI Kit 添加移动端对话。将已连接的会话列表、消息和输入组件集成到 iOS 和 Android 应用中。
组件与设置Flutter Chat UI Kit
使用 Tencent RTC Flutter Chat UI Kit 创建互联的消息界面。根据产品布局和导航调整会话及消息组件。
组件与设置iOS Chat UI Kit
使用 Tencent RTC iOS Chat UI Kit 添加原生消息界面。从会话、消息和联系人开始,再根据您的应用调整体验。
组件与设置Android Chat UI Kit
使用 Tencent RTC Android Chat UI Kit 添加 Kotlin 消息界面。以匹配的视觉风格将会话、消息和联系人集成到应用中。
组件与设置POKEKARA · 社交娱乐
围绕直播体验构建互动。
Pokekara 的 Tencent RTC 案例涵盖卡拉 OK、直播房间和社交消息。该案例介绍了一套包含 Chat API 和预构建 UI Kit 的集成方案。
- 娱乐体验中的聊天功能
- 与音视频服务组合使用的组件

选择腾讯云RTC
现成 UI 仍需完成产品集成。
聊天 UI Kit 可以减少组件开发工作,但应用仍需提供经过身份验证的用户身份、会话权限、导航和业务规则。请先选择正确的平台指南并检查其依赖项,再确定集成范围。
从已连接的组件开始
会话列表、消息视图和消息编辑器已连接到 Chat 状态。这可以减少团队需要实现的界面连接工作。
让产品呈现出您的独特风格
特定平台的主题和扩展 API 支持品牌化聊天及应用专属消息展示,无需跳转到单独的聊天界面。
选择要采用的界面范围
选择平台支持的组件;对于需要完全掌控 UI 的区域,请使用 Core SDK。在评估开发工作量之前,请先确认组件范围。
体验产品
体验对话效果。
在此本地界面预览中更改主题并添加消息。然后打开官方 Chat 演示,使用测试账号体验互联消息功能。
此预览使用本地状态和虚构参与者。它不会连接 Tencent RTC,也不会向其他人发送消息。
修改后的演播室布局已可供审阅。
Local UI preview · no message is sent to a service
从评估到集成
将 Chat 接入您的应用。
先使用 selected platform 快速入门,然后添加身份验证和应用所需的消息行为。
- 01
选择框架
选择 React、React Native、Flutter、iOS 或 Android,并查看当前的集成指南。
- 02
安装并进行身份验证
配置文档中说明的依赖项,并将 UI 连接到由服务器签发的 Chat 凭证。
- 03
自定义并验证
调整主题和导航,添加自定义消息,并测试真实设备上的行为。
构建前须知
Chat UI Kits 常见问题
为产品和工程团队提供解答。
聊天 UI Kit 只是一个视觉模板吗?
+
Tencent RTC UI Kits 包含集成了 Chat 功能的组件。它们仍需要应用、身份验证、配置以及相关的 SDK 和原生依赖项。
React 应使用哪款聊天 UI Kit?
+
Web 界面请使用 React UI Kit。React Native 有单独的软件包,并且移动应用需要原生配置;这两种集成方式不可互换。
我可以只使用 UI Kit 的一部分吗?
+
可用模块和扩展点因平台而异。请查看最新文档,以选择组件或替换部分体验。
我可以改用自己的 UI 吗?
+
可以。使用 Core Chat SDK 构建完全自定义的界面,并通过服务器 API 执行后端操作。
可视化预览是否连接到 Tencent RTC?
+
页面预览使用虚构参与者演示本地 UI 行为。请打开官方 Chat 演示,评估已连接的产品。
应如何在 UI Kit 和 Core SDK 之间进行选择?
+
当 UI Kit 的已连接组件和扩展点符合产品需求时,请使用 UI Kit。如果需要完全掌控消息渲染、导航和交互,请选择 Core SDK;并与原本需要自行实现的实际界面进行比较。
如何为应用定制聊天 UI Kit?
+
为平台选择文档支持的主题和组件扩展点。结合已初始化的 Chat SDK,测试自定义消息、导航和未读行为。
哪个聊天 UI Kit 适用于 React Native 或 Flutter?
+
这些平台有独立包和原生配置。请按对应指南接入,避免复用 React Web 组件或假设扩展 API 完全相同。
探索相关解决方案
找到下一步集成方案。
Chat SDK
为 JavaScript、iOS、Android、React Native、Flutter、Unity 或 Unreal 选择 Chat SDK。比较集成方式、体验消息功能,并查阅官方文档开始构建。
探索 →客户支持
在您的应用内构建客服聊天。保留消息历史、收集附件、连接客服工作流,并通过实时演示评估 Tencent RTC Chat。
探索 →在线社区
通过群组、话题、提及、通知和内容审核控件构建社区聊天。使用 Tencent RTC SDK 和 UI Kit 为您的社区添加消息功能。
探索 →市场
为您的交易平台构建买卖双方消息功能。使用 Tencent RTC Chat SDK 和 API 连接商品信息、媒体、订单更新、举报和通知。
探索 →规划集成
让我们聊聊
你的 Chat 集成.
与 Tencent RTC 团队讨论你的平台、目标市场、预计月活跃用户数和上线时间表。

