AI Agent Integration - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-react-native`
Key components	`CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer`, `CometChatAIAssistantChatHistory`
Required setup	`CometChatUIKit.init(UIKitSettings)` then `CometChatUIKit.login("UID")`
Purpose	Enable intelligent conversational AI capabilities with AI Agent integration
Sample app	GitHub
Related	Message List · Message Composer · All Guides

Enable intelligent conversational AI capabilities in your React Native app using CometChat UIKit v5 with AI Agent integration:

AI Assistant Chat History
Chat History Management
Contextual Responses
Agent Detection
Seamless Handoffs

Transform your chat experience with AI-powered assistance that provides intelligent responses and offers seamless integration with your existing chat infrastructure.

Overview

Users can interact with AI agents through a dedicated chat interface that:

Provides intelligent responses based on conversation context.
Maintains chat history for continuity.
Seamlessly integrates with your existing user chat system.

The AI Agent chat interface provides a familiar messaging experience enhanced with AI capabilities, accessible through your main chat flow or as a standalone feature.

Prerequisites

React Native project with @cometchat/chat-uikit-react-native and @cometchat/chat-sdk-react-native installed.
Valid CometChat App ID, Region, and Auth Key configured via CometChatUIKit.init().
User logged in with CometChatUIKit.login().
AI Agent configured in your CometChat dashboard.

Components

Component / Class	Role
`AIAssistantChatScreen`	Main screen for AI agent chat.
`CometChatAIAssistantChatHistory`	Displays previous AI conversation history.
`CometChatMessageList`	Shows AI messages with threading support.
`CometChatMessageComposer`	Input interface for AI conversations.
`CometChatMessageHeader`	Header with AI agent info and controls.

Integration Steps

Step 1 - Screen Setup

Create the AI Assistant chat screen with proper navigation and component configuration.

TypeScript

import React, { useState, useEffect } from 'react';
import { SafeAreaView, View } from 'react-native';
import {
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatThemeProvider,
} from '@cometchat/chat-uikit-react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';

interface AIAssistantChatScreenProps {
  route: {
    params: {
      user: CometChat.User;
      parentMessage?: CometChat.BaseMessage;
    };
  };
  navigation: any;
}

const AIAssistantChatScreen: React.FC<AIAssistantChatScreenProps> = ({
  route,
  navigation,
}) => {
  const { user, parentMessage } = route.params;
  const [currentUser, setCurrentUser] = useState<CometChat.User>(user);

  useEffect(() => {
    initializeComponents();
  }, []);

  const initializeComponents = () => {
    // Set up AI-specific configurations
    console.log('Initializing AI Assistant Chat for user:', currentUser.getName());
  };

  const handleNewChatClick = () => {
    // Navigate to new AI chat
    navigation.replace('AIAssistantChat', { user: currentUser });
  };

  const handleChatHistoryClick = () => {
    // Navigate to chat history
    navigation.navigate('AIAssistantChatHistory', { user: currentUser });
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <CometChatThemeProvider
        theme={{
          light: {
            messageListStyles: {
              containerStyle: {
                backgroundColor: '#F8F9FA',
              },
              outgoingMessageBubbleStyles: {
                containerStyle: {
                  backgroundColor: '#E3F2FD',
                },
              },
            },
            messageComposerStyles: {
              containerStyle: {
                backgroundColor: '#FFFFFF',
              },
            },
          },
        }}
      >
        <CometChatMessageHeader
          user={currentUser}
          onNewChatButtonClick={handleNewChatClick}
          onChatHistoryButtonClick={handleChatHistoryClick}
        />
        
        <CometChatMessageList
          user={currentUser}
          parentMessageId={parentMessage?.getId()}
          // AI-specific configurations
          emptyChatGreetingView={<AIGreetingView />}
          streamingSpeed={50}
          aiAssistantSuggestedMessages={[
            'How can I help you today?',
            'What would you like to know?',
            'Ask me anything!',
          ]}
        />
        
        <CometChatMessageComposer
          user={currentUser}
          parentMessageId={parentMessage?.getId()}
        />
      </CometChatThemeProvider>
    </SafeAreaView>
  );
};

// Custom AI Greeting Component
const AIGreetingView = () => (
  <View style={{ 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center',
    padding: 20 
  }}>
    <Text style={{ 
      fontSize: 18, 
      fontWeight: 'bold', 
      marginBottom: 10 
    }}>
      Welcome to AI Assistant
    </Text>
    <Text style={{ 
      fontSize: 14, 
      textAlign: 'center',
      color: '#666' 
    }}>
      I'm here to help! Ask me anything or choose from the suggested prompts below.
    </Text>
  </View>
);

export default AIAssistantChatScreen;

Configure React Navigation to handle AI Assistant chat screens.

TypeScript

// App.tsx or your main navigation file
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import AIAssistantChatScreen from './screens/AIAssistantChatScreen';
import AIAssistantChatHistoryScreen from './screens/AIAssistantChatHistoryScreen';
import MainChatScreen from './screens/MainChatScreen';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="MainChat"
        screenOptions={{
          headerShown: false, // Hide default header since we use CometChatMessageHeader
        }}
      >
        <Stack.Screen 
          name="MainChat" 
          component={MainChatScreen} 
        />
        <Stack.Screen 
          name="AIAssistantChat" 
          component={AIAssistantChatScreen}
          options={{
            title: 'AI Assistant',
          }}
        />
        <Stack.Screen 
          name="AIAssistantChatHistory" 
          component={AIAssistantChatHistoryScreen}
          options={{
            title: 'Chat History',
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Step 3 - Theme Customization

Define custom themes for the message list and composer to differentiate AI agent chats.

TypeScript

// AITheme.ts
import { CometChatTheme } from '@cometchat/chat-uikit-react-native';

export const aiAssistantTheme: Partial<CometChatTheme> = {
  light: {
    messageComposerStyles: {
      containerStyle: {
        backgroundColor: '#F8F9FA',
        borderTopWidth: 1,
        borderTopColor: '#E0E0E0',
      },
      inputStyle: {
        backgroundColor: '#FFFFFF',
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#E0E0E0',
        paddingHorizontal: 12,
        paddingVertical: 8,
      },
      sendIconContainerStyle: {
        backgroundColor: '#007AFF',
        borderRadius: 20,
        width: 40,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    messageListStyles: {
      containerStyle: {
        backgroundColor: '#F8F9FA',
      },
      outgoingMessageBubbleStyles: {
        containerStyle: {
          backgroundColor: '#E3F2FD',
          borderRadius: 12,
          padding: 12,
          marginVertical: 4,
        },
        textBubbleStyles: {
          textStyle: {
            color: '#1976D2',
            fontSize: 16,
            lineHeight: 20,
          },
        },
      },
      incomingMessageBubbleStyles: {
        assistantBubbleStyles: {
          containerStyle: {
            backgroundColor: '#FFFFFF',
            borderRadius: 12,
            padding: 12,
            marginVertical: 4,
            borderWidth: 1,
            borderColor: '#E0E0E0',
          },
          textStyle: {
            color: '#333333',
            fontSize: 16,
            lineHeight: 20,
          },
          placeholderTextStyle: {
            color: '#666666',
            fontSize: 16,
            opacity: 0.7,
          },
          copyButtonStyle: {
            backgroundColor: '#007AFF',
            borderRadius: 6,
            paddingHorizontal: 8,
            paddingVertical: 4,
          },
          errorContainerStyle: {
            backgroundColor: '#FFEBEE',
            borderColor: '#F44336',
            borderWidth: 1,
            borderRadius: 8,
            padding: 8,
            marginTop: 4,
          },
          errorTextStyle: {
            color: '#F44336',
            fontSize: 14,
          },
        },
      },
    },
    messageHeaderStyles: {
      containerStyle: {
        backgroundColor: '#FFFFFF',
        borderBottomWidth: 1,
        borderBottomColor: '#E0E0E0',
        paddingHorizontal: 16,
        paddingVertical: 12,
      },
      titleTextStyle: {
        fontSize: 18,
        fontWeight: '600',
        color: '#333333',
      },
      avatarStyle: {
        containerStyle: {
          width: 40,
          height: 40,
          borderRadius: 20,
          backgroundColor: '#007AFF',
        },
      },
    },
  },
};

Step 4 - AI Assistant Tools Configuration

Configure AI Assistant tools and suggested messages for an enhanced user experience.

TypeScript

// AIAssistantConfig.ts
import { CometChat } from '@cometchat/chat-sdk-react-native';

export const aiTools = new CometChatAIAssistantTools({
  getCurrentWeather: (args: any) => {
    console.log('Weather tool called with:', args);
    // Handle weather tool action
  },
  getLocationInfo: (args: any) => {
    console.log('Location tool called with:', args);
    // Handle location tool action
  },
  sendEmail: (args: any) => {
    console.log('Email tool called with:', args);
    // Handle email tool action
  }
});

export const suggestedMessages = [
  'How can I help you today?',
  'What would you like to know?',
  'Tell me about your project',
  'Need help with something specific?',
  'Ask me anything!',
];

// Enhanced AI Assistant Chat Screen with tools
export const EnhancedAIAssistantChatScreen: React.FC<AIAssistantChatScreenProps> = ({
  route,
  navigation,
}) => {
  const { user, parentMessage } = route.params;

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <CometChatThemeProvider theme={aiAssistantTheme}>
        <CometChatMessageHeader
          user={user}
          onNewChatButtonClick={() => {
            navigation.replace('AIAssistantChat', { user });
          }}
          onChatHistoryButtonClick={() => {
            navigation.navigate('AIAssistantChatHistory', { user });
          }}
        />
        
        <CometChatMessageList
          user={user}
          parentMessageId={parentMessage?.getId()}
          emptyChatGreetingView={<AIGreetingView />}
          streamingSpeed={50}
          aiAssistantSuggestedMessages={suggestedMessages}
          aiAssistantTools={aiTools}
        />
        
        <CometChatMessageComposer
          user={user}
          parentMessageId={parentMessage?.getId()}
        />
      </CometChatThemeProvider>
    </SafeAreaView>
  );
};

Step 5 - Create AI Assistant Chat History Screen

Create a screen to host the CometChatAIAssistantChatHistory component and handle its interactions.

TypeScript

// AIAssistantChatHistoryScreen.tsx
import React, { useState, useEffect } from 'react';
import { SafeAreaView, Alert } from 'react-native';
import {
  CometChatAIAssistantChatHistory,
  CometChatThemeProvider,
} from '@cometchat/chat-uikit-react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';

interface AIAssistantChatHistoryScreenProps {
  route: {
    params: {
      user: CometChat.User;
    };
  };
  navigation: any;
}

const AIAssistantChatHistoryScreen: React.FC<AIAssistantChatHistoryScreenProps> = ({
  route,
  navigation,
}) => {
  const { user } = route.params;
  const [currentUser, setCurrentUser] = useState<CometChat.User>(user);

  useEffect(() => {
    console.log('Loading AI Assistant Chat History for:', currentUser.getName());
  }, [currentUser]);

  const handleItemClick = (message: CometChat.BaseMessage) => {
    const receiver = message.getReceiver();
    if (receiver instanceof CometChat.User) {
      // Navigate to specific chat thread
      navigation.navigate('AIAssistantChat', {
        user: receiver,
        parentMessage: message,
      });
    }
  };

  const handleNewChatClick = () => {
    // Navigate to new AI chat
    navigation.navigate('AIAssistantChat', { user: currentUser });
  };

  const handleCloseClick = () => {
    // Navigate back or close
    navigation.goBack();
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <CometChatThemeProvider
        theme={{
          light: {
            chatHistoryStyles: {
              containerStyle: {
                backgroundColor: '#F8F9FA',
              },
              headerStyle: {
                backgroundColor: '#FFFFFF',
                borderBottomWidth: 1,
                borderBottomColor: '#E0E0E0',
              },
              headerTitleStyle: {
                fontSize: 18,
                fontWeight: '600',
                color: '#333333',
              },
              messageItemStyle: {
                backgroundColor: '#FFFFFF',
                marginVertical: 4,
                marginHorizontal: 16,
                borderRadius: 8,
                padding: 12,
                borderWidth: 1,
                borderColor: '#E0E0E0',
              },
              messageTextStyle: {
                fontSize: 14,
                color: '#333333',
                lineHeight: 18,
              },
              newChatButtonStyle: {
                backgroundColor: '#007AFF',
                borderRadius: 8,
                padding: 12,
                margin: 16,
              },
              newChatTextStyle: {
                color: '#FFFFFF',
                fontSize: 16,
                fontWeight: '600',
                textAlign: 'center',
              },
            },
          },
        }}
      >
        <CometChatAIAssistantChatHistory
          user={currentUser}
          onItemClick={handleItemClick}
          onNewChatButtonClick={handleNewChatClick}
          onCloseButtonClick={handleCloseClick}
        />
      </CometChatThemeProvider>
    </SafeAreaView>
  );
};

export default AIAssistantChatHistoryScreen;

Step 6 - Launching AI Chat

Create navigation functions to launch AI Assistant chat from your main application.

TypeScript

// MainChatScreen.tsx or your main component
import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';

interface MainChatScreenProps {
  navigation: any;
}

const MainChatScreen: React.FC<MainChatScreenProps> = ({ navigation }) => {
  const launchAIAssistantChat = async (aiUser: CometChat.User, parentMessage?: CometChat.BaseMessage) => {
    try {
      // Verify the user has @agentic role for AI agent
      if (aiUser.getRole() === '@agentic') {
        navigation.navigate('AIAssistantChat', {
          user: aiUser,
          parentMessage: parentMessage,
        });
      } else {
        console.warn('User is not an AI agent');
      }
    } catch (error) {
      console.error('Error launching AI chat:', error);
    }
  };

  const createAIUser = () => {
    // Create or fetch AI user with @agentic role
    const aiUser = new CometChat.User('ai-assistant-001');
    aiUser.setName('AI Assistant');
    aiUser.setRole('@agentic'); // Important: Set role to @agentic for AI agents
    return aiUser;
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity
        style={{
          backgroundColor: '#007AFF',
          paddingHorizontal: 20,
          paddingVertical: 12,
          borderRadius: 8,
          marginBottom: 16,
        }}
        onPress={() => {
          const aiUser = createAIUser();
          launchAIAssistantChat(aiUser);
        }}
      >
        <Text style={{ color: '#FFFFFF', fontSize: 16, fontWeight: '600' }}>
          Start AI Chat
        </Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={{
          backgroundColor: '#34C759',
          paddingHorizontal: 20,
          paddingVertical: 12,
          borderRadius: 8,
        }}
        onPress={() => {
          const aiUser = createAIUser();
          navigation.navigate('AIAssistantChatHistory', { user: aiUser });
        }}
      >
        <Text style={{ color: '#FFFFFF', fontSize: 16, fontWeight: '600' }}>
          View Chat History
        </Text>
      </TouchableOpacity>
    </View>
  );
};

export default MainChatScreen;

Implementation Flow Summary

Step	Action
1	User selects AI agent from chat list
2	`AIAssistantChatScreen` navigates and renders
3	Parse route params and detect agent chat (Role of user must be “@agentic”)
4	Initialize UI with AI-specific theming
5	Configure chat history and navigation handlers
6	Launch chat with AI agent

Customization Options

Custom AI Assistant Empty Chat View: Customize the empty state view using emptyChatGreetingView prop.
Streaming Speed: Adjust AI response streaming speed via streamingSpeed prop.
AI Assistant Suggested Messages: Create custom list of suggested messages using aiAssistantSuggestedMessages prop.
AI Assistant Tools: Set tools for the AI agent using aiAssistantTools prop.

Feature Matrix

Feature	Implementation	UI Component
AI Chat Interface	`AIAssistantChatScreen`	Full chat screen
Chat History	`CometChatAIAssistantChatHistory`	Chat history screen

React Native AI Sample

Explore this feature in the CometChat React Native Sample: GitHub → React Native Sample

React Native UI Kit

Learn more about React Native UI Kit components: GitHub → React Native UIKit

Next Steps

Message List

Display and manage messages in a conversation

Message Composer

Compose and send messages with rich input options

All Guides

Browse all feature and formatter guides

Components Overview

Explore all available components

​Overview

​Prerequisites

​Components

​Integration Steps

​Step 1 - Screen Setup

​Step 2 - Navigation Setup

​Step 3 - Theme Customization

​Step 4 - AI Assistant Tools Configuration

​Step 5 - Create AI Assistant Chat History Screen

​Step 6 - Launching AI Chat

​Implementation Flow Summary

​Customization Options

​Feature Matrix