> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.