BUILT FOR REACT

React Chat SDK & UI Kit

Build one-to-one and group messaging with Tencent RTC's React Chat SDK and UI Kit. Add connected conversation lists, messages, and composers, then customize them for your product.

Start React Tutorial Try Chat Demo

DEVELOPER RESOURCES

React Chat SDK Docs & Examples

API Reference

Explore the React Chat SDK APIs and the UI Kit’s props and hooks.

ConversationList API MessageList API JavaScript Client APIs

Integration Guides

Integrate the React Chat SDK and UI Kit into your application.

Integrate React Chat Add a Standalone Chat

Examples & Source

Explore React Chat SDK source and a local product-message example.

Official React Sample Product Message Example

React Community Chat

Build community chat with the React Chat SDK: direct messages, group conversations, and shared media.

Try Chat Demo View React Source

Custom Product Messages

Connect React Chat SDK custom messages to product cards in your support chat.

Get React Example

REACT CHAT CAPABILITIES

React Chat SDK Features

From message actions to custom content, choose the capabilities your application needs.

One-to-one & group chat

Direct and group conversations
Recent-message previews
Unread conversation counts

Rich message types

Text, images, audio, and video
File sharing in conversations
Custom product or order payloads

Message controls

Copy, quote, and forward
Recall and delete actions
Sender grouping and alignment

Flexible composition

Image, video, and file pickers
Configurable input actions
Your own placeholder and toolbar

Your product, your UI

Light and dark themes
Custom conversation previews
English, Chinese, Japanese, Korean

Extend when you need to

Read receipts: enable and configure
Cloud Search: paid plugin
Voice and video: add TUICallKit

Explore the React Chat Components

Explore the interface, from your conversation list to the message composer.

Conversation List

An inbox that fits your product

Show recent messages and unread counts. Replace the preview component to change how each conversation appears.

ConversationList API

<ConversationList
  style={{ width: 300, height: '100%' }}
  enableSearch={false}
/>

MessageList

Choose how messages behave

Control message alignment, group consecutive messages, and select the actions available on each message.

MessageList API

const actions = useMessageActions([
  'copy', 'quote', 'forward',
]);

<MessageList
  alignment="two-sided"
  messageAggregationTime={300}
  messageActionList={actions}
/>

MessageInput

Build the composer you need

Choose image, file, and video pickers. Set the placeholder and decide whether the send button is visible.

MessageInput API

<MessageInput
  placeholder="Message your community"
  autoFocus={false}
  hideSendButton={false}
  actions={[
    'ImagePicker', 'FilePicker', 'VideoPicker',
  ]}
/>

ChatHeader

Put useful actions in reach

Add a settings control beside the conversation title. Connect it to your own panel or navigation.

Header integration guide

const [showSettings, setShowSettings] = useState(false);

<ChatHeader
  ChatHeaderRight={
    <button onClick={() => setShowSettings(true)}>
      Settings
    </button>
  }
/>

Contacts

Connect people to conversations

Combine contact lists and profile details. Switch back to the conversation view when a user starts a message.

Contacts integration guide

<ContactList />
<ContactInfo
  onSendMessage={() => setActiveTab('conversations')}
  onEnterGroup={() => setActiveTab('conversations')}
/>

ChatSetting

Make room for conversation settings

Place the settings component in a sidebar or drawer. Your application controls when the panel opens and closes.

Settings integration guide

{showSettings && (
  <aside className="chat-settings">
    <ChatSetting
      onClose={() => setShowSettings(false)}
    />
  </aside>
)}

CUSTOMIZATION

Customize Your React Chat UI

Style the UI Kit around your React Chat SDK integration and your own content.

Theme

Set the theme at the provider. Keep one conversation flow while switching between light and dark presentation.

Theme integration guide

GET STARTED

Integrate the React Chat SDK

01
Create your app
Create a Chat application for your React Chat SDK integration.
Open Chat Console
02
Add the React UI Kit
Install the package. Make the components your own.
Follow the React Tutorial
03
Send your first message
Sign in two React Chat SDK users and send a test message.
Connect Your Users

React Chat UI Kit

Terminal

npm install @tencentcloud/chat-uikit-react

<UIKitProvider theme="light">
  <ConversationList />
  <Chat>
    <ChatHeader />
    <MessageList />
    <MessageInput />
  </Chat>
</UIKitProvider>

CHAT + CALL

Some conversations need a call

Connect voice and video through TUICallKit and your React chat header.

Calling requires TUICallKit integration and an enabled Call service. Review Call pricing separately from Chat.

View Calling Integration

React Chat SDK FAQs

How does the React Chat SDK differ from the React UI Kit?

The React Chat SDK provides messaging capabilities through the JavaScript SDK. The React UI Kit adds ready-made components for the chat interface. Use the UI Kit to start with connected components, or build your own interface around the underlying SDK.

Explore React UI Kit Explore JavaScript SDK

Can I customize the components and message layout?

Yes. Use the documented props and extension points to configure component behavior, adjust conversation previews, and render custom messages. The available changes depend on the component; check its API before planning a replacement.

View MessageList Options Build Custom Messages

Which UI Kit should I use for React web, mobile web, or React Native?

Use the React UI Kit for browser applications. The mobile web (H5) guide uses components such as ConversationListH5 and MessageListH5 from the React package. For native iOS and Android applications built with React Native, use the separate React Native UI Kit and its native setup guide.

React web integration React mobile web guide Explore React Native UI Kit React Native setup

How do I integrate the React Chat SDK with Next.js or SSR?

Plan the interactive chat surface for the browser. In the Next.js App Router, isolate browser-dependent code in a Client Component; Next.js supports client-only dynamic loading with ssr: false. Generate UserSig on your server. Check the installed UI Kit version and dependencies, and test your production build, login, and navigation before release.

Next.js client-only loading React integration requirements

How does the open-source React UI Kit relate to the hosted Chat service?

The React UI Kit source is available on GitHub. Its connected messaging components use Tencent RTC Chat and require a Chat application and authenticated users. Component source availability does not include unlimited hosted messaging: service usage and feature access follow your Chat plan. A local UI preview can run without a live connection.

React UI Kit source Chat plan details Estimate service costs

Can I start with the React Chat SDK for free?

Tencent RTC Chat offers a free plan with 1,000 monthly active users. Review the plan details and pricing for the features and usage you need.

View Free Plan Estimate Your Costs

Does the React UI Kit include voice and video calling?

You can add calling by integrating TUICallKit and enabling the Call service. The current full React integration example includes this extension; calling setup and pricing remain separate from messaging.

View Calling Integration

Is Cloud Search included in the free plan?

Cloud Search is a value-added feature that requires the Cloud Search plugin. Review its requirements before enabling search in your chat interface.

Read the React Integration Guide

How do I integrate React chat SDK with React?

Initialize the documented provider and compose connected components. Match subscriptions and cleanup to React lifecycle, then test navigation and repeated mounting in your actual application.

How do I test React chat SDK before releasing my app?

Check login, SDK readiness, send and receive events, and message state after reconnecting.

How do I customize the interface for React chat SDK?

Wrap the chat components in UIKitProvider and set theme="light" or theme="dark". A child component can use useUIKit().setTheme to switch the appearance; the hook must run inside the provider's context. For product cards, supply a custom message renderer through MessageList.messageRenderers. Keep a fallback for unrecognized payloads, and let your application handle product lookup and checkout rather than treating them as Chat features.

Read the customization guide

Find the right support for your next step

Technical questions

Review the React Chat SDK sample or report a reproducible issue.

View GitHub Issues

Product and pricing questions

Talk to our team about your application, expected usage, and integration needs.

Contact Sales

Your next conversation starts here

Build with the React Chat SDK and UI Kit. Start free with 1,000 monthly active users.

Get started for free Start React Tutorial