Smart Chat Features - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-react-native`
Required setup	`CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")` + AI features enabled in CometChat Dashboard
AI features	Conversation Starter, Smart Replies, Conversation Summary
Key components	`CometChatMessageList` (Conversation Starter, Smart Replies), `CometChatMessageHeader` + `CometChatConversationSummary` (Conversation Summary)
Activation	Enable each AI feature from the CometChat Dashboard, then pass the corresponding prop(s) to the component — Conversation Summary also needs `onConversationSummaryPress` and your own `CometChatConversationSummary`

CometChat AI features enhance user interaction and engagement in your application. Here’s how the React Native UI Kit integrates these features.

Conversation Starter

When a user initiates a new chat, the UI kit displays a list of suggested opening lines that users can select, making it easier for them to start a conversation. These suggestions are powered by CometChat’s AI, which predicts contextually relevant conversation starter options. For a comprehensive understanding and guide on implementing and using the Conversation Starter, refer to our specific guide on the Conversation Starter. Once you have successfully activated the Conversation Starter from your CometChat Dashboard, pass showConversationStarters to the MessageList component to display the starters in an empty chat.

<CometChatMessageList
  user={user}
  showConversationStarters={true}
/>

Smart Replies

Smart Replies are AI-generated responses to messages. They predict what a user might want to say next by analyzing the context of the conversation, allowing for quicker and more convenient responses on mobile devices. For a comprehensive understanding and guide on implementing and using Smart Replies, refer to our specific guide on the Smart Replies. Once you have successfully activated the Smart Replies from your CometChat Dashboard, pass showSmartReplies to the MessageList component. Smart reply chips appear above the composer after a message is received.

<CometChatMessageList
  user={user}
  showSmartReplies={true}
/>

Conversation Summary

The Conversation Summary feature provides concise summaries of long conversations, allowing users to catch up quickly on missed chats. This feature uses natural language processing to determine the main points in a conversation. For a comprehensive understanding and guide on implementing and using the Conversation Summary, refer to our specific guide on the Conversation Summary. Once you have successfully activated the Conversation Summary from your CometChat Dashboard, wire it up in two parts:

Pass both showConversationSummaryButton and onConversationSummaryPress to the MessageHeader. The summary item is added to the header’s overflow menu (⋮) only when both props are present — the boolean on its own does nothing.
Render CometChatConversationSummary yourself and toggle it from that callback. The header does not ship a built-in summary panel; it only invokes your handler.

import { useState } from 'react';
import { CometChat } from '@cometchat/chat-sdk-react-native';
import { CometChatMessageHeader, CometChatConversationSummary } from '@cometchat/chat-uikit-react-native';

const [showSummaryPanel, setShowSummaryPanel] = useState(false);

const fetchConversationSummary = () =>
  CometChat.getConversationSummary(receiverId, receiverType, { lastNMessages: 1000 });

<CometChatMessageHeader
  user={user}
  showConversationSummaryButton={true}
  onConversationSummaryPress={() => setShowSummaryPanel((prev) => !prev)}
/>

{showSummaryPanel && (
  <CometChatConversationSummary getConversationSummary={fetchConversationSummary} />
)}

Place CometChatConversationSummary between the message list and the composer so the panel appears above the composer.

​Conversation Starter

​Smart Replies

​Conversation Summary

Conversation Starter

Smart Replies

Conversation Summary