> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# AI Agent Integration

> Enable intelligent conversational AI capabilities in your React Native app using CometChat UI Kit v5 with AI Agent integration.

<Accordion title="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](https://github.com/cometchat/cometchat-uikit-react-native/tree/v5/sample)                                                                                |
  | Related        | [Message List](/ui-kit/react-native/message-list) · [Message Composer](/ui-kit/react-native/message-composer) · [All Guides](/ui-kit/react-native/guide-overview) |
</Accordion>

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.

<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>

## 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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/android-ai-agent-overview.png?fit=max&auto=format&n=21UBnagXOw-XG0Sv&q=85&s=35e3d9686ce4c277aca8c8007ea9ba6d" width="3040" height="1760" data-path="images/android-ai-agent-overview.png" />
</Frame>

## 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.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    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;
    ```
  </Tab>
</Tabs>

### Step 2 - Navigation Setup

Configure React Navigation to handle AI Assistant chat screens.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    // 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;
    ```
  </Tab>
</Tabs>

### Step 3 - Theme Customization

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

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    // 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',
            },
          },
        },
      },
    };
    ```
  </Tab>
</Tabs>

### Step 4 - AI Assistant Tools Configuration

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

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    // 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>
      );
    };
    ```
  </Tab>
</Tabs>

### Step 5 - Create AI Assistant Chat History Screen

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

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    // 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;
    ```
  </Tab>
</Tabs>

### Step 6 - Launching AI Chat

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

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    // 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;
    ```
  </Tab>
</Tabs>

## 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 |

<CardGroup>
  <Card title="React Native AI Sample">
    Explore this feature in the CometChat React Native Sample:
    [GitHub → React Native Sample](https://github.com/cometchat/cometchat-uikit-react-native/tree/v5/sample)
  </Card>

  <Card title="React Native UI Kit">
    Learn more about React Native UI Kit components:
    [GitHub → React Native UIKit](https://github.com/cometchat/cometchat-uikit-react-native)
  </Card>
</CardGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Message List" icon="messages" href="/ui-kit/react-native/message-list">
    Display and manage messages in a conversation
  </Card>

  <Card title="Message Composer" icon="keyboard" href="/ui-kit/react-native/message-composer">
    Compose and send messages with rich input options
  </Card>

  <Card title="All Guides" icon="book" href="/ui-kit/react-native/guide-overview">
    Browse all feature and formatter guides
  </Card>

  <Card title="Components Overview" icon="grid" href="/ui-kit/react-native/components-overview">
    Explore all available components
  </Card>
</CardGroup>