> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# AI Smart Chat Features

> Enable CometChat Angular UI Kit AI Smart Chat features for conversation starters, smart replies, and conversation summaries.

## Overview

CometChat AI Smart Chat Features enhance user interaction by providing contextual suggestions and summaries. Each feature must be enabled from the CometChat Dashboard first, then activated in your Angular components via input properties.

<Note>
  AI Smart Chat Features must be enabled from the [CometChat Dashboard](https://app.cometchat.com). Once activated in the dashboard, you enable them in your Angular components using the inputs described below.
</Note>

## Smart Chat Features

### Conversation Starter

Displays AI-generated opening lines when a user starts a new or empty conversation. Helps break the ice by suggesting relevant topics.

Enable it on `cometchat-message-list`:

```html theme={null}
<cometchat-message-list
  [user]="activeUser"
  [showConversationStarters]="true">
</cometchat-message-list>
```

Or using `ChatStateService` for shared state:

```typescript expandable theme={null}
import { Component } from '@angular/core';
import { ChatStateService } from '@cometchat/chat-uikit-angular';
import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [CometChatMessageListComponent],
  template: `
    <cometchat-message-list [showConversationStarters]="true">
    </cometchat-message-list>
  `
})
export class ChatComponent {
  constructor(private chatState: ChatStateService) {}

  openChat(user: CometChat.User): void {
    this.chatState.setActiveUser(user);
  }
}
```

See [CometChatConversationStarter](/ui-kit/angular/components/cometchat-conversation-starter) for the standalone component docs.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7emVxEQ5MCxvzC60/images/1cad4411-ai_conversation_starter_web_screens-e086f83ee4ee395ce75328ecc6e7d45b.png?fit=max&auto=format&n=7emVxEQ5MCxvzC60&q=85&s=1b5942b255e2d77fd091a7ab2704abbc" width="1282" height="802" data-path="images/1cad4411-ai_conversation_starter_web_screens-e086f83ee4ee395ce75328ecc6e7d45b.png" />
</Frame>

***

### Smart Replies

AI-generated response suggestions based on the last received message. Users can tap a suggestion to send it instantly.

Enable it on `cometchat-message-list`:

```html theme={null}
<cometchat-message-list
  [user]="activeUser"
  [showSmartReplies]="true">
</cometchat-message-list>
```

Smart replies appear above the message composer when a qualifying message is received. The component respects configurable trigger keywords and a delay before showing suggestions.

See [CometChatSmartReplies](/ui-kit/angular/components/cometchat-smart-replies) for the standalone component docs.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/le8ibYc8lBJsShSE/images/52f05152-ai_smart_replies_web_screens-8ac3840804809fd9402814764093c6fc.png?fit=max&auto=format&n=le8ibYc8lBJsShSE&q=85&s=1b3649df5d907829d2f2d20b459f34bb" width="1282" height="802" data-path="images/52f05152-ai_smart_replies_web_screens-8ac3840804809fd9402814764093c6fc.png" />
</Frame>

***

### Conversation Summary

AI-generated recap of long conversations. Useful for catching up on missed messages without scrolling through the entire thread.

Enable it on `cometchat-message-header`:

```html theme={null}
<!-- Enable in message header -->
<cometchat-message-header
  [user]="activeUser"
  [showConversationSummaryButton]="true">
</cometchat-message-header>
```

Full example combining the header with conversation starters and smart replies in the message list:

```typescript expandable theme={null}
import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatMessageListComponent,
  CometChatMessageHeaderComponent,
  ChatStateService
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-chat-view',
  standalone: true,
  imports: [CometChatMessageListComponent, CometChatMessageHeaderComponent],
  template: `
    <cometchat-message-header
      [showConversationSummaryButton]="true">
    </cometchat-message-header>

    <cometchat-message-list
      [showConversationStarters]="true"
      [showSmartReplies]="true">
    </cometchat-message-list>
  `
})
export class ChatViewComponent {
  constructor(private chatState: ChatStateService) {}

  openChat(user: CometChat.User): void {
    this.chatState.setActiveUser(user);
  }
}
```

See [CometChatConversationSummary](/ui-kit/angular/components/cometchat-conversation-summary) for the standalone component docs.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/OOBJyP9hM0C-rAe_/images/d83c9272-ai_conversation_summary_web_screens-b5e1d99c765f9c0c6f1e80d2b7e89421.png?fit=max&auto=format&n=OOBJyP9hM0C-rAe_&q=85&s=ed644bcd0bf41881409664b93d33f75c" width="1282" height="802" data-path="images/d83c9272-ai_conversation_summary_web_screens-b5e1d99c765f9c0c6f1e80d2b7e89421.png" />
</Frame>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Message List" icon="messages" href="/ui-kit/angular/components/cometchat-message-list">
    Customize the message list where AI Smart Chat Features appear
  </Card>

  <Card title="Message Header" icon="heading" href="/ui-kit/angular/components/cometchat-message-header">
    Enable Conversation Summary in the header
  </Card>

  <Card title="Conversation Starter" icon="comment" href="/ui-kit/angular/components/cometchat-conversation-starter">
    Standalone Conversation Starter component
  </Card>

  <Card title="Smart Replies" icon="reply" href="/ui-kit/angular/components/cometchat-smart-replies">
    Standalone Smart Replies component
  </Card>
</CardGroup>