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

# AI Assistant Chat

> AI agent chat interface with streaming responses, suggested messages, tool calling, and conversation history.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatAIAssistantChat",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatAIAssistantChat } from \"@cometchat/chat-uikit-react\";",
    "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
    "description": "AI agent chat interface with streaming responses, suggested messages, tool calling, and conversation history.",
    "cssRootClass": ".cometchat-ai-assistant-chat",
    "primaryOutput": {
      "prop": "onSendButtonClick",
      "type": "(message: CometChat.BaseMessage) => void"
    },
    "props": {
      "data": {
        "user": {
          "type": "CometChat.User",
          "default": "REQUIRED",
          "note": "The AI assistant user entity"
        },
        "streamingSpeed": {
          "type": "number",
          "default": 30,
          "note": "Milliseconds between text chunks during streaming"
        },
        "aiAssistantTools": {
          "type": "CometChatAIAssistantTools",
          "default": "undefined",
          "note": "Tool handlers for AI function calls"
        },
        "loadLastAgentConversation": {
          "type": "boolean",
          "default": false
        },
        "suggestedMessages": {
          "type": "string[]",
          "default": "[] (falls back to user metadata)"
        },
        "parentMessageId": {
          "type": "number",
          "default": "undefined",
          "note": "Load a specific conversation thread"
        }
      },
      "callbacks": {
        "onSendButtonClick": "(message: CometChat.BaseMessage) => void",
        "onBackButtonClicked": "() => void",
        "onCloseButtonClicked": "() => void",
        "onError": "((error: CometChat.CometChatException) => void) | null"
      },
      "visibility": {
        "hideSuggestedMessages": { "type": "boolean", "default": false },
        "hideChatHistory": { "type": "boolean", "default": false },
        "hideNewChat": { "type": "boolean", "default": false },
        "showBackButton": { "type": "boolean", "default": false },
        "showCloseButton": { "type": "boolean", "default": false }
      },
      "viewSlots": {
        "emptyChatImageView": "ReactNode",
        "emptyChatGreetingView": "ReactNode",
        "emptyChatIntroMessageView": "ReactNode",
        "emptyView": "ReactNode",
        "loadingView": "ReactNode",
        "errorView": "ReactNode",
        "headerItemView": "ReactNode",
        "headerTitleView": "ReactNode",
        "headerSubtitleView": "ReactNode",
        "headerLeadingView": "ReactNode",
        "headerTrailingView": "ReactNode",
        "headerAuxiliaryButtonView": "ReactNode"
      }
    },
    "events": [
      {
        "name": "ui:compose/text",
        "payload": "{ text }",
        "description": "Suggestion pill clicked (sets text in composer)"
      }
    ],
    "sdkListeners": [],
    "types": {
      "CometChatAIAssistantTools": "Class — maps tool function names to handler functions via constructor(actions: Record<string, (args: Record<string, unknown>) => void>)"
    }
  }
  ```
</Accordion>

## Overview

`CometChatAIAssistantChat` is an AI agent chat interface. It renders a full chat experience with streaming responses, suggested message pills, tool calling support, and a conversation history sidebar. Pass a `CometChat.User` representing the AI assistant and the component handles the rest — message threading, streaming display, and composer integration.

<Info>
  **Live Preview** — interact with the default AI assistant chat.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-ai-ai-assistant-chat--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-ai-ai-assistant-chat--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "700px", border: "1px solid #e0e0e0"}} title="CometChat AI Assistant Chat — Default" allow="clipboard-write" />

The component handles:

* Streaming AI responses with configurable speed
* Suggested message pills (from props or user metadata)
* Tool calling via `aiAssistantTools`
* Conversation history sidebar
* New chat creation
* Custom header views

***

## Usage

### Flat API

```tsx theme={null}
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function AIChat({ aiUser }: { aiUser: CometChat.User }) {
  return (
    <CometChatAIAssistantChat
      user={aiUser}
      onSendButtonClick={(message) => {
        console.log("Message sent:", message);
      }}
    />
  );
}
```

### With Tool Calling

```tsx theme={null}
import {
  CometChatAIAssistantChat,
  CometChatAIAssistantTools,
} from "@cometchat/chat-uikit-react";

function AIChat({ aiUser }: { aiUser: CometChat.User }) {
  const tools = new CometChatAIAssistantTools({
    getWeather: (args) => {
      console.log("Getting weather for:", args.location);
    },
    searchDocs: (args) => {
      console.log("Searching docs for:", args.query);
    },
  });

  return (
    <CometChatAIAssistantChat
      user={aiUser}
      aiAssistantTools={tools}
      suggestedMessages={["What's the weather?", "Search documentation"]}
    />
  );
}
```

### With Custom Header

```tsx theme={null}
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function AIChat({ aiUser }: { aiUser: CometChat.User }) {
  return (
    <CometChatAIAssistantChat
      user={aiUser}
      showBackButton
      onBackButtonClicked={() => navigateBack()}
      headerTitleView={<span>My AI Assistant</span>}
      headerSubtitleView={<span>Always online</span>}
    />
  );
}
```

### Full Layout Example

```tsx theme={null}
import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function App() {
  const [aiUser, setAiUser] = useState<CometChat.User | null>(null);

  useEffect(() => {
    CometChat.getUser("ai-assistant-uid").then(setAiUser);
  }, []);

  if (!aiUser) return <div>Loading...</div>;

  return (
    <div style={{ height: "100vh" }}>
      <CometChatAIAssistantChat
        user={aiUser}
        loadLastAgentConversation
        suggestedMessages={[
          "How do I get started?",
          "What features are available?",
          "Help me with integration",
        ]}
        onSendButtonClick={(message) => {
          console.log("User sent:", message);
        }}
        onError={(error) => {
          console.error("AI Chat error:", error);
        }}
      />
    </div>
  );
}
```

***

## Actions and Events

### Callback Props

| Prop                   | Signature                                                 | Fires when              |
| ---------------------- | --------------------------------------------------------- | ----------------------- |
| `onSendButtonClick`    | `(message: CometChat.BaseMessage) => void`                | User sends a message    |
| `onBackButtonClicked`  | `() => void`                                              | Back button is clicked  |
| `onCloseButtonClicked` | `() => void`                                              | Close button is clicked |
| `onError`              | `((error: CometChat.CometChatException) => void) \| null` | SDK error occurs        |

### Events Emitted

UI events this component publishes:

| Event             | Payload    | Fires when                                      |
| ----------------- | ---------- | ----------------------------------------------- |
| `ui:compose/text` | `{ text }` | Suggestion pill clicked (sets text in composer) |

### Events Received

None.

### SDK Listeners (Automatic)

None directly — the component uses `CometChatMessageList` internally which handles SDK listeners for message updates. The AI streaming is handled via `CometChat.addAIAssistantListener`.

***

## Customization

### View Props

Use view props to replace sections of the default UI while keeping the component's behavior intact:

```tsx theme={null}
<CometChatAIAssistantChat
  user={aiUser}
  emptyChatImageView={<MyBotAvatar />}
  emptyChatGreetingView={<h2>Hello! I'm your assistant.</h2>}
  emptyChatIntroMessageView={<p>Ask me anything about our product.</p>}
  headerItemView={<MyCustomHeader />}
  loadingView={<AILoadingSkeleton />}
  errorView={<AIErrorState />}
/>
```

| Slot                        | Signature   | Replaces                                       |
| --------------------------- | ----------- | ---------------------------------------------- |
| `emptyChatImageView`        | `ReactNode` | AI avatar/icon in empty state                  |
| `emptyChatGreetingView`     | `ReactNode` | Greeting message in empty state                |
| `emptyChatIntroMessageView` | `ReactNode` | Intro message in empty state                   |
| `emptyView`                 | `ReactNode` | Entire empty state (replaces default greeting) |
| `loadingView`               | `ReactNode` | Loading shimmer                                |
| `errorView`                 | `ReactNode` | Error state                                    |
| `headerItemView`            | `ReactNode` | Entire header (replaces default)               |
| `headerTitleView`           | `ReactNode` | Header title                                   |
| `headerSubtitleView`        | `ReactNode` | Header subtitle                                |
| `headerLeadingView`         | `ReactNode` | Header avatar area                             |
| `headerTrailingView`        | `ReactNode` | Header trailing section                        |
| `headerAuxiliaryButtonView` | `ReactNode` | Header auxiliary buttons (New Chat + History)  |

#### emptyChatImageView

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/Q1gl9ove-kD5IJEf/images/react-uikit_ai-assistant-chat-empty_chat_image_view.png?fit=max&auto=format&n=Q1gl9ove-kD5IJEf&q=85&s=261d108f71be472cde8481198de3cbcc" width="280" height="400" data-path="images/react-uikit_ai-assistant-chat-empty_chat_image_view.png" />
</Frame>

```tsx theme={null}
import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

function AIAssistantCustomImage() {
  const [agent, setAgent] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("assistant_uid").then((u) => setAgent(u));
  }, []);

  if (!agent) return null;

  return (
    <CometChatAIAssistantChat
      user={agent}
      emptyChatImageView={<img src={"ICON_URL"} height={60} width={60} alt="" />}
    />
  );
}
```

#### emptyChatGreetingView

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/Q1gl9ove-kD5IJEf/images/react-uikit_ai-assistant-chat-empty_chat_greeeting_view.png?fit=max&auto=format&n=Q1gl9ove-kD5IJEf&q=85&s=ad704f1adfe4dfe8de4ffb7cb2909219" width="280" height="400" data-path="images/react-uikit_ai-assistant-chat-empty_chat_greeeting_view.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

    function AIAssistantCustomGreeting() {
      const [agent, setAgent] = useState<CometChat.User>();

      useEffect(() => {
        CometChat.getUser("assistant_uid").then((u) => setAgent(u));
      }, []);

      if (!agent) return null;

      return (
        <CometChatAIAssistantChat
          user={agent}
          emptyChatGreetingView={
            <div className="cometchat-ai-assistant-chat__empty-chat-greeting">
              <span className="plan-name">Free Plan</span> .
              <span className="upgrade-button">Upgrade</span>
            </div>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .cometchat-ai-assistant-chat__empty-chat-greeting {
      display: flex;
      padding: 8px 20px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      border-radius: 6px;
      border: 1px solid #e8e8e8;
      background: #f5f5f5;
      width: fit-content;
      align-self: center;
    }

    .cometchat-ai-assistant-chat__empty-chat-greeting .upgrade-button {
      color: #6852d6;
    }
    ```
  </Tab>
</Tabs>

#### emptyChatIntroMessageView

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/Q1gl9ove-kD5IJEf/images/react-uikit_ai-assistant-chat-empty_chat_intro_message_view.png?fit=max&auto=format&n=Q1gl9ove-kD5IJEf&q=85&s=241df1b1ef4da7a0b6ae016b4e973f95" width="280" height="400" data-path="images/react-uikit_ai-assistant-chat-empty_chat_intro_message_view.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

    function AIAssistantCustomIntro() {
      const [agent, setAgent] = useState<CometChat.User>();

      useEffect(() => {
        CometChat.getUser("assistant_uid").then((u) => setAgent(u));
      }, []);

      if (!agent) return null;

      return (
        <CometChatAIAssistantChat
          user={agent}
          emptyChatIntroMessageView={
            <div className="cometchat-ai-assistant-chat__empty-chat-intro">
              Hey, nice to see you What's new?
            </div>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .cometchat-ai-assistant-chat__empty-chat-intro {
      display: flex;
      padding: 12px;
      justify-content: center;
      align-items: center;
      gap: 10px;
      border-radius: 12px;
      background: #f9f8fd;
      width: 172px;
      color: #141414;
      text-align: center;
      font-size: 16px;
      font-weight: 400;
      line-height: 140%;
      margin: 10px 0;
    }
    ```
  </Tab>
</Tabs>

### CSS Styling

Override design tokens on the component selector:

```css theme={null}
.cometchat-ai-assistant-chat {
  --cometchat-background-color-01: #1a1a2e;
  --cometchat-text-color-primary: #ffffff;
}

.cometchat-ai-assistant-chat__empty-state-greeting-message {
  font-size: 1.5rem;
  font-weight: 600;
}
```

***

## Props

`user` is required. All other props are optional.

***

### user

The AI assistant user entity. This is the CometChat user that represents the AI agent.

|         |                  |
| ------- | ---------------- |
| Type    | `CometChat.User` |
| Default | **REQUIRED**     |

***

### streamingSpeed

Milliseconds between text chunks during streaming display.

|         |          |
| ------- | -------- |
| Type    | `number` |
| Default | `30`     |

***

### aiAssistantTools

Tool handlers for AI function calls. Maps tool names to handler functions.

|         |                             |
| ------- | --------------------------- |
| Type    | `CometChatAIAssistantTools` |
| Default | `undefined`                 |

```tsx theme={null}
const tools = new CometChatAIAssistantTools({
  getWeather: (args) => fetchWeather(args.location as string),
  searchDocs: (args) => searchDocumentation(args.query as string),
});

<CometChatAIAssistantChat user={aiUser} aiAssistantTools={tools} />
```

***

### loadLastAgentConversation

Auto-load the most recent conversation with the AI assistant on mount.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideSuggestedMessages

Hide the suggestion pills in the empty chat state.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### suggestedMessages

Custom suggestion texts displayed as pills in the empty state. Overrides suggestions from user metadata.

|         |                                                        |
| ------- | ------------------------------------------------------ |
| Type    | `string[]`                                             |
| Default | `[]` (falls back to user metadata `suggestedMessages`) |

***

### emptyChatImageView

Custom image/icon view for the empty chat state.

|         |                    |
| ------- | ------------------ |
| Type    | `ReactNode`        |
| Default | Built-in AI avatar |

***

### emptyChatGreetingView

Custom greeting message view for the empty chat state.

|         |                                                   |
| ------- | ------------------------------------------------- |
| Type    | `ReactNode`                                       |
| Default | User's `greetingMessage` metadata or display name |

***

### emptyChatIntroMessageView

Custom intro message view for the empty chat state.

|         |                                                                     |
| ------- | ------------------------------------------------------------------- |
| Type    | `ReactNode`                                                         |
| Default | User's `introductoryMessage` metadata or "I am here to assist you!" |

***

### hideChatHistory

Hide the chat history sidebar button in the header.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideNewChat

Hide the "New Chat" button in the header.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### showBackButton

Show the back button in the header.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### showCloseButton

Show the close button in the header.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### onBackButtonClicked

Callback when the back button is clicked.

|         |              |
| ------- | ------------ |
| Type    | `() => void` |
| Default | `undefined`  |

***

### onCloseButtonClicked

Callback when the close button is clicked.

|         |              |
| ------- | ------------ |
| Type    | `() => void` |
| Default | `undefined`  |

***

### onSendButtonClick

Callback when a message is sent to the AI assistant.

|         |                                            |
| ------- | ------------------------------------------ |
| Type    | `(message: CometChat.BaseMessage) => void` |
| Default | `undefined`                                |

***

### emptyView

Custom empty state view. Replaces the entire default greeting (image + greeting + intro + suggestions).

|         |                                    |
| ------- | ---------------------------------- |
| Type    | `ReactNode`                        |
| Default | Built-in greeting with suggestions |

***

### loadingView

Custom loading view.

|         |                        |
| ------- | ---------------------- |
| Type    | `ReactNode`            |
| Default | Built-in loading state |

***

### errorView

Custom error view.

|         |                      |
| ------- | -------------------- |
| Type    | `ReactNode`          |
| Default | Built-in error state |

***

### onError

Callback when an SDK error occurs.

|         |                                                           |
| ------- | --------------------------------------------------------- |
| Type    | `((error: CometChat.CometChatException) => void) \| null` |
| Default | `null`                                                    |

***

### className

Additional CSS class name applied to the root element.

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| Default | `undefined` |

***

### parentMessageId

Load a specific conversation thread by parent message ID.

|         |             |
| ------- | ----------- |
| Type    | `number`    |
| Default | `undefined` |

***

### headerItemView

Custom view that replaces the entire header.

|         |                                   |
| ------- | --------------------------------- |
| Type    | `ReactNode`                       |
| Default | Built-in `CometChatMessageHeader` |

***

### headerTitleView

Custom title view for the header.

|         |                        |
| ------- | ---------------------- |
| Type    | `ReactNode`            |
| Default | AI user's display name |

***

### headerSubtitleView

Custom subtitle view for the header.

|         |                   |
| ------- | ----------------- |
| Type    | `ReactNode`       |
| Default | Built-in subtitle |

***

### headerLeadingView

Custom leading view (avatar area) for the header.

|         |                  |
| ------- | ---------------- |
| Type    | `ReactNode`      |
| Default | AI user's avatar |

***

### headerTrailingView

Custom trailing view for the header.

|         |             |
| ------- | ----------- |
| Type    | `ReactNode` |
| Default | `undefined` |

***

### headerAuxiliaryButtonView

Custom auxiliary button view for the header. Replaces the default New Chat + History buttons.

|         |                                     |
| ------- | ----------------------------------- |
| Type    | `ReactNode`                         |
| Default | Built-in New Chat + History buttons |

***

## CSS Selectors

| Target             | Selector                                                       |
| ------------------ | -------------------------------------------------------------- |
| Root container     | `.cometchat-ai-assistant-chat`                                 |
| Header             | `.cometchat-ai-assistant-chat__header`                         |
| Body               | `.cometchat-ai-assistant-chat__body`                           |
| Empty state        | `.cometchat-ai-assistant-chat__empty-state`                    |
| Empty state icon   | `.cometchat-ai-assistant-chat__empty-state-icon`               |
| Greeting message   | `.cometchat-ai-assistant-chat__empty-state-greeting-message`   |
| Intro message      | `.cometchat-ai-assistant-chat__empty-state-intro-message`      |
| Suggested messages | `.cometchat-ai-assistant-chat__empty-state-suggested-messages` |

***

## Next Steps

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

  <Card title="Message Composer" icon="pen" href="/ui-kit/react/v7/components/message-composer">
    Compose and send messages
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/v7/theming">
    Customize colors, fonts, and spacing
  </Card>
</CardGroup>