Overview - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-react`
Required setup	`CometChatUIKit.init()` + `CometChatUIKit.login()` before rendering any component
Callback actions	`on<Event>={(param) => {}}`
Data filtering	`<entity>RequestBuilder={new CometChat.<Entity>RequestBuilder()}`
Toggle features	`hide<Feature>={true}` or `show<Feature>={true}`
Custom rendering	`<slot>View={(<params>) => JSX}`
CSS overrides	Target `.cometchat-<component>` class in global CSS
Calling	Requires separate `@cometchat/calls-sdk-javascript` package

Architecture

The UI Kit is a set of independent components that compose into chat layouts. A typical two-panel layout uses four core components:

CometChatConversations — sidebar listing recent conversations (users and groups)
CometChatMessageHeader — toolbar showing avatar, name, online status, and typing indicator
CometChatMessageList — scrollable message feed with reactions, receipts, and threads
CometChatMessageComposer — rich text input with attachments, mentions, and voice notes

Data flow: selecting a conversation in CometChatConversations yields a CometChat.User or CometChat.Group object. That object is passed as a prop (user or group) to CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer. The message components use the SDK internally — CometChatMessageComposer sends messages, CometChatMessageList receives them via real-time listeners. Components communicate through a publish/subscribe event bus (CometChatMessageEvents, CometChatConversationEvents, CometChatGroupEvents, etc.). A component emits events that other components or application code can subscribe to without direct references. See Events for the full list. Each component accepts callback props (on<Event>), view slot props (<slot>View) for replacing UI sections, RequestBuilder props for data filtering, and CSS variable overrides on .cometchat-<component> classes.

Component Catalog

All components are imported from @cometchat/chat-uikit-react.

Conversations and Lists

Component	Purpose	Key Props	Page
CometChatConversations	Scrollable list of recent conversations	`conversationsRequestBuilder`, `onItemClick`, `onError`	Conversations
CometChatUsers	Scrollable list of users	`usersRequestBuilder`, `onItemClick`, `onError`	Users
CometChatGroups	Scrollable list of groups	`groupsRequestBuilder`, `onItemClick`, `onError`	Groups
CometChatGroupMembers	Scrollable list of group members	`group`, `groupMemberRequestBuilder`, `onItemClick`	Group Members

Messages

Component	Purpose	Key Props	Page
CometChatMessageHeader	Toolbar with avatar, name, status, typing indicator	`user`, `group`, `enableAutoSummaryGeneration`	Message Header
CometChatMessageList	Scrollable message list with reactions, receipts, threads	`user`, `group`, `messagesRequestBuilder`, `goToMessageId` (string)	Message List
CometChatMessageComposer	Rich text input with attachments, mentions, voice notes	`user`, `group`, `onSendButtonClick`, `placeholderText`	Message Composer
CometChatMessageTemplate	Pre-defined structure for custom message bubbles	`type`, `category`, `contentView`, `headerView`, `footerView`	Message Template
CometChatThreadHeader	Parent message bubble and reply count for threaded view	`parentMessage`, `onClose`, `hideReceipts`, `textFormatters`	Thread Header

Calling

Component	Purpose	Key Props	Page
CometChatCallButtons	Voice and video call initiation buttons	`user`, `group`, `onVoiceCallClick`, `onVideoCallClick`	Call Buttons
CometChatIncomingCall	Incoming call notification with accept/decline	`call`, `onAccept(call)`, `onDecline(call)`	Incoming Call
CometChatOutgoingCall	Outgoing call screen with cancel control	`call`, `onCloseClicked`	Outgoing Call
CometChatCallLogs	Scrollable list of call history	`callLogsRequestBuilder`, `onItemClick`	Call Logs

Search and AI

Component	Purpose	Key Props	Page
CometChatSearch	Real-time search across conversations and messages	`onConversationClicked(conversation, searchKeyword?)`, `onMessageClicked(message, searchKeyword?)`, `uid`, `guid`, `textFormatters`	Search
CometChatAIAssistantChat	AI agent chat with streaming, suggestions, history	`user`, `onSendButtonClick(message, previewMessageMode?)`, `aiAssistantTools`	AI Assistant Chat

Component API Pattern

All components share a consistent API surface.

Actions

Actions control component behavior. They split into two categories: Predefined Actions are built into the component and execute automatically on user interaction (e.g., clicking send dispatches the message). No configuration needed. User-Defined Actions are callback props that fire on specific events. Override them to customize behavior:

<CometChatMessageList
  user={chatUser}
  onThreadRepliesClick={(message) => openThreadPanel(message)}
  onError={(error) => logError(error)}
/>

Events

Events enable decoupled communication between components. A component emits events that other parts of the application can subscribe to without direct references.

import { CometChatMessageEvents } from "@cometchat/chat-uikit-react";

const sub = CometChatMessageEvents.ccMessageSent.subscribe((message) => {
  // react to sent message
});

// cleanup
sub?.unsubscribe();

Each component page documents its emitted events in the Events section.

Filters

List-based components accept RequestBuilder props to control which data loads:

<CometChatMessageList
  user={chatUser}
  messagesRequestBuilder={
    new CometChat.MessagesRequestBuilder().setLimit(20)
  }
/>

Custom View Slots

Components expose named view slots to replace sections of the default UI:

<CometChatMessageHeader
  user={chatUser}
  titleView={<CustomTitle />}
  subtitleView={<CustomSubtitle />}
  leadingView={<CustomAvatar />}
/>

CSS Overrides

Every component has a root CSS class (.cometchat-<component>) for style customization:

.cometchat-message-list .cometchat-text-bubble__body-text {
  font-family: "SF Pro";
}

Next Steps

Core Features

Chat features included out of the box

Theming

Customize colors, fonts, and styles

Extensions

Add-on features like polls, stickers, and translation

Guides

Task-oriented tutorials for common patterns

​Architecture

​Component Catalog

​Conversations and Lists

​Messages

​Calling

​Search and AI

​Component API Pattern

​Actions

​Events

​Filters

​Custom View Slots

​CSS Overrides

​Next Steps