> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.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 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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/iOmdgJzyAoKBq6hb/images/android-ai-agent-overview.png?fit=max&auto=format&n=iOmdgJzyAoKBq6hb&q=85&s=80005b41bb6f92db6dddb7776c0b7215" 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.

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

### Step 2 - Navigation Setup

Configure React Navigation to handle AI Assistant chat screens.

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

### Step 3 - Theme Customization

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

```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',
        },
      },
    },
  },
};
```

### Step 4 - AI Assistant Tools Configuration

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

```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>
  );
};
```

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

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

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

### Step 6 - Launching AI Chat

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

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

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