> ## 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 Agent Integration

> Integrate AI agents with chat history, contextual responses, and seamless handoffs in CometChat Flutter UI Kit.

<Accordion title="AI Agent Component Spec">
  | Field          | Value                                                                                                           |
  | -------------- | --------------------------------------------------------------------------------------------------------------- |
  | Package        | `cometchat_chat_uikit`                                                                                          |
  | Key components | `CometChatAIAssistantChatHistory`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatMessageHeader` |
  | Init           | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login(uid)`                                           |
  | Entry point    | AI agent user → `AIAssistantChatScreen` with AI-specific styling                                                |
  | Sample app     | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app)                               |
  | Related        | [All Guides](/ui-kit/flutter/v5/guide-overview)                                                                 |
</Accordion>

AI Agent Integration enables intelligent conversational AI capabilities with chat history, contextual responses, and seamless handoffs.

<Note>
  **1:1 conversations only.** AI Agents currently respond only in one-on-one conversations between an end user and the agent user. They do not respond to messages sent in groups, even if the agent user is added as a member or owner. Group support is on the roadmap — share your use case on [feedback.cometchat.com](https://feedback.cometchat.com).
</Note>

Before starting, complete the [Getting Started](/ui-kit/flutter/v5/getting-started) guide.

***

## Components

| Component / Class                 | Role                                                  |
| :-------------------------------- | :---------------------------------------------------- |
| `CometChatMessageHeader`          | Manages message interactions with AI-specific buttons |
| `CometChatMessageList`            | Displays messages with AI-specific styling            |
| `CometChatMessageComposer`        | Composes messages with AI placeholders                |
| `CometChatAIAssistantChatHistory` | Displays previous AI conversation history             |
| `CometChatAiAssistantBubbleStyle` | Custom styling for AI chat bubbles                    |
| `AIConstants.aiRole`              | Constant to detect AI agent users                     |

***

## Integration Steps

### 1. Detect AI Agent

Check if the user is an AI agent by their role.

```dart theme={null}
bool isUserAgentic() {
  return widget.user?.role == AIConstants.aiRole;
}
```

***

### 2. AI Chat Screen Setup

Create a screen for AI Assistant chat using standard message components with AI-specific styling.

```dart theme={null}
class AIAssistantChatScreen extends StatefulWidget {
  final User? user;
  final Group? group;
  final BaseMessage? parentMessage;
  final bool? isHistory;

  const AIAssistantChatScreen({
    Key? key,
    this.user,
    this.group,
    this.parentMessage,
    this.isHistory,
  }) : super(key: key);

  @override
  State<AIAssistantChatScreen> createState() => _AIAssistantChatScreenState();
}
```

***

### 3. Message Header with AI Actions

Configure the message header with chat history and new chat buttons.

```dart theme={null}
CometChatMessageHeader(
  user: widget.user,
  group: widget.group,
  chatHistoryButtonClick: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => CometChatAIAssistantChatHistory(
          user: widget.user,
          group: widget.group,
          onNewChatButtonClicked: () => onNewChatClicked(true),
          onMessageClicked: (message) => navigateToThread(message),
          onClose: () => Navigator.of(context).pop(),
        ),
      ),
    );
  },
  newChatButtonClick: () => onNewChatClicked(false),
)
```

***

### 4. AI Message List

Configure the message list with AI-specific styling and options.

```dart theme={null}
CometChatMessageList(
  user: user,
  group: group,
  hideReplyInThreadOption: isUserAgentic() ? true : false,
  hideThreadView: true,
  messagesRequestBuilder: requestBuilder,
  style: CometChatMessageListStyle(
    backgroundColor: isUserAgentic() ? colorPalette.background3 : null,
    outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
      textBubbleStyle: CometChatTextBubbleStyle(
        backgroundColor: isUserAgentic() ? colorPalette.background4 : null,
        textColor: isUserAgentic() ? colorPalette.textPrimary : null,
      ),
    ),
  ),
)
```

***

### 5. AI Composer

Configure the composer with AI-specific placeholder text.

```dart theme={null}
CometChatMessageComposer(
  user: widget.user,
  group: widget.group,
  disableMentions: isUserAgentic() ? true : false,
  placeholderText: isUserAgentic() 
    ? "${Translations.of(context).askAnything}..." 
    : null,
  parentMessageId: widget.parentMessage?.id ?? 0,
)
```

***

### 6. Custom AI Bubble Styling

Apply custom styles for AI chat bubbles using ThemeExtension.

```dart theme={null}
MaterialApp(
  theme: ThemeData(
    extensions: [
      CometChatAiAssistantBubbleStyle(
        backgroundColor: Colors.transparent,
        border: Border.all(color: Colors.blueAccent, width: 1),
        textColor: const Color(0xFF141414),
      ),
    ],
  ),
)
```

***

## Feature Matrix

| Feature        | Component / Method                | Description                 |
| :------------- | :-------------------------------- | :-------------------------- |
| AI detection   | `AIConstants.aiRole`              | Check if user is AI agent   |
| AI chat screen | `AIAssistantChatScreen`           | Full AI chat interface      |
| Chat history   | `CometChatAIAssistantChatHistory` | Browse previous AI sessions |
| AI styling     | `CometChatAiAssistantBubbleStyle` | Custom AI bubble appearance |
| New chat       | `onNewChatClicked()`              | Start fresh AI conversation |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="AI Features" href="/ui-kit/flutter/v5/ai-features">
    Explore all AI-powered features.
  </Card>

  <Card title="AI Chat History" href="/ui-kit/flutter/v5/ai-assistant-chat-history">
    Learn about AI chat history component.
  </Card>

  <Card title="Message List" href="/ui-kit/flutter/v5/message-list">
    Learn about message display and management.
  </Card>

  <Card title="All Guides" href="/ui-kit/flutter/v5/guide-overview">
    Browse all feature and formatter guides.
  </Card>
</CardGroup>