AI Agent Integration - CometChat Docs

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.

​Components

​Integration Steps

​1. Detect AI Agent

​2. AI Chat Screen Setup

​3. Message Header with AI Actions

​4. AI Message List

​5. AI Composer

​6. Custom AI Bubble Styling

​Feature Matrix

​Next Steps