> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-correction-sticker-button-react-v7-uikit.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Smart Chat Features

> AI-powered features in CometChat's React UI Kit: Conversation Starter, Smart Replies, and Conversation Summary.

<Accordion title="AI Integration Quick Reference">
  | Field          | Value                                                                                                                                                                                                                                                                                                                                    |
  | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Package        | `@cometchat/chat-uikit-react`                                                                                                                                                                                                                                                                                                            |
  | Required setup | Wrap app in `CometChatProvider` with valid credentials + AI features enabled in [CometChat Dashboard](/fundamentals/ai-user-copilot/overview)                                                                                                                                                                                            |
  | AI features    | Conversation Starter, Smart Replies, Conversation Summary                                                                                                                                                                                                                                                                                |
  | Key components | `CometChatMessageList` → [Message List](/ui-kit/react/components/message-list) (Conversation Starter, Smart Replies, Summary panel), `CometChatMessageHeader` → [Message Header](/ui-kit/react/components/message-header) (Summary button), `CometChatAIAssistantChat` → [AI Assistant Chat](/ui-kit/react/components/ai-assistant-chat) |
  | Activation     | Enable each AI feature from the CometChat Dashboard **and** opt in with the component prop listed below — each prop defaults to `false`, so Dashboard activation alone renders nothing                                                                                                                                                   |
</Accordion>

## Overview

CometChat AI features enhance user interaction by providing contextual suggestions and summaries. Each feature requires two steps: activate it from the Dashboard, and enable it on the component with the prop noted in its section below. Unlike most extensions, AI features are opt-in — they render nothing until you pass the prop.

All three suggestion panels render in the footer of [MessageList](/ui-kit/react/components/message-list), not in the Message Composer.

## Smart Chat Features

### Conversation Starter

Displays AI-generated opening lines when a user starts a new chat. See [Conversation Starter](/fundamentals/ai-user-copilot/conversation-starter).

Set `showConversationStarters` on [MessageList](/ui-kit/react/components/message-list) (default `false`) to enable it. Starters appear in the message list footer when the conversation has no messages.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/eWvaU37TzK_W1tRD/images/1cad4411-ai_conversation_starter_web_screens-e086f83ee4ee395ce75328ecc6e7d45b.png?fit=max&auto=format&n=eWvaU37TzK_W1tRD&q=85&s=fd3951ea815908846b781874853e0ee3" width="1282" height="802" data-path="images/1cad4411-ai_conversation_starter_web_screens-e086f83ee4ee395ce75328ecc6e7d45b.png" />
</Frame>

### Smart Replies

AI-generated response suggestions based on conversation context. See [Smart Replies](/fundamentals/ai-user-copilot/smart-replies).

Set `showSmartReplies` on [MessageList](/ui-kit/react/components/message-list) (default `false`) to enable it. Replies appear in the message list footer after a received text message matches `smartRepliesKeywords`, following a `smartRepliesDelayDuration` debounce.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/hsU3TL5XlSfH5Vau/images/52f05152-ai_smart_replies_web_screens-8ac3840804809fd9402814764093c6fc.png?fit=max&auto=format&n=hsU3TL5XlSfH5Vau&q=85&s=3f8b7034e567ac1e32eb2966ff904960" width="1282" height="802" data-path="images/52f05152-ai_smart_replies_web_screens-8ac3840804809fd9402814764093c6fc.png" />
</Frame>

### Conversation Summary

AI-generated recap of long conversations. See [Conversation Summary](/fundamentals/ai-user-copilot/conversation-summary).

Set `showConversationSummaryButton` on [MessageHeader](/ui-kit/react/components/message-header) (default `false`) to enable it. Clicking the button opens the summary panel in the message list footer. Add `enableAutoSummaryGeneration` to trigger it automatically once unread messages reach 15.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-correction-sticker-button-react-v7-uikit/fRztSoI4s8YFa2MR/images/d83c9272-ai_conversation_summary_web_screens-b5e1d99c765f9c0c6f1e80d2b7e89421.png?fit=max&auto=format&n=fRztSoI4s8YFa2MR&q=85&s=78eb7b1b000e43e33af79f20bdeaaf6d" width="1282" height="802" data-path="images/d83c9272-ai_conversation_summary_web_screens-b5e1d99c765f9c0c6f1e80d2b7e89421.png" />
</Frame>

## Next Steps

<CardGroup cols={2}>
  <Card title="AI Assistant Chat" icon="robot" href="/ui-kit/react/components/ai-assistant-chat">
    AI-powered assistant component
  </Card>

  <Card title="Message List" icon="messages" href="/ui-kit/react/components/message-list">
    Enable Conversation Starters and Smart Replies
  </Card>

  <Card title="Message Header" icon="pen-to-square" href="/ui-kit/react/components/message-header">
    Enable the Conversation Summary button
  </Card>

  <Card title="Core Features" icon="comments" href="/ui-kit/react/core-features">
    Core chat features like messaging and reactions
  </Card>
</CardGroup>