AI Agent Integration

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

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
Related	All Guides

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

Before starting, complete the 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.

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.

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.

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.

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.

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.

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

AI Features

Explore all AI-powered features.

AI Chat History

Learn about AI chat history component.

Message List

Learn about message display and management.

All Guides

Browse all feature and formatter guides.