Message agentic flow in the Flutter UI Kit

Implement agentic message flows in the CometChat Flutter UI Kit V6 with AI-powered message handling, custom AI rendering, and agent participation in groups.

Implement agentic message flows in your Flutter app using CometChat V6 UIKit. This guide covers how to integrate AI-powered message handling with the chat interface.

Overview

The Message Agentic Flow feature enables AI-driven interactions within your chat application. In V6, AI features are handled through MessageTemplateUtils rather than explicit extension registration.

1:1 and group conversations. AI Agents work in both one-on-one and group conversations. In a 1:1 chat, the end user talks directly with the agent user. In a group, the agent participates as a member — the UI Kit renders and attributes agent-generated messages (including cards) like any other member’s message.

Integration

Enable AI Features

Ensure AI features are enabled on your CometChat Dashboard. V6 handles AI integration internally.

Custom AI Message Handling

Dart

CometChatMessageList(
  user: user,
  templates: [
    CometChatMessageTemplate(
      type: "ai_response",
      category: MessageCategoryConstants.custom,
      contentView: (baseMessage, context, alignment, {additionalConfigurations}) {
        // Custom rendering for AI agent messages
        return Container(
          padding: const EdgeInsets.all(12),
          decoration: BoxDecoration(
            color: Color(0xFFEDEAFA),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Icon(Icons.smart_toy, color: Color(0xFF6852D6), size: 16),
                  SizedBox(width: 4),
                  Text("AI Assistant", style: TextStyle(
                    color: Color(0xFF6852D6),
                    fontWeight: FontWeight.bold,
                    fontSize: 12,
                  )),
                ],
              ),
              SizedBox(height: 8),
              Text((baseMessage as TextMessage).text),
            ],
          ),
        );
      },
    ),
  ],
)

AI Assistant Chat History

Use the CometChatAIAssistantChatHistory widget to display past AI interactions:

Dart

CometChatAIAssistantChatHistory(
  user: user,
  style: CometChatAIAssistantChatHistoryStyle(
    backgroundColor: const Color(0xFFFFFAF6),
  ),
)

Key V6 Differences

Aspect	V5	V6
AI extension registration	Explicit via UIKitSettings.aiFeature	Handled internally via MessageTemplateUtils
Custom AI templates	Via CometChatUIKit.getDataSource()	Via MessageTemplateUtils and direct template injection
AI Assistant widget	CometChatAIAssistantChatHistory	Same widget, same API