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

## Overview

`CometChatAIAssistantChat` is a composite component that assembles the message header, message list, and message composer to provide an AI agent chat experience. It supports streaming responses, quick starter suggestions, "New Chat" to reset context, and a chat history sidebar.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/ez24jA9Q57bxQihV/images/react-uikit_ai-assistant-chat-overview.png?fit=max&auto=format&n=ez24jA9Q57bxQihV&q=85&s=f86ae1ccb81b812e5609363edce963a9" width="280" height="400" data-path="images/react-uikit_ai-assistant-chat-overview.png" />
</Frame>

<Tabs>
  <Tab title="AIAssistantChatDemo.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

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

        React.useEffect(() => {
            // Replace with your assistant UID
            CometChat.getUser("assistant_uid").then((u) => setAgent(u));
        }, []);

        if (!agent) return null;

        return(
            <>
                <CometChatAIAssistantChat user={agent} />
            </>
        ); 
    }

    ```
  </Tab>

  <Tab title="App.tsx">
    ```tsx theme={null}
    import { AIAssistantChatDemo } from "./AIAssistantChatDemo";

    export default function App() {
        return (
            <div className="App">
                <AIAssistantChatDemo />
            </div>
        );
    }
    ```
  </Tab>
</Tabs>

<Warning>
  A `CometChat.User` (the AI agent) is required to start the assistant chat.
</Warning>

***

## Actions

[Actions](/ui-kit/react/components-overview#actions) control how a component behaves. You can hook into the following callbacks:

##### 1. onBackButtonClicked

Called when the header back button is clicked (visible when `showBackButton` is true).

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

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

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

        const handleBack = () => {
            // your custom action
        };

        if (!agent) return null;

        return (
            <CometChatAIAssistantChat
                user={agent}
                showBackButton={true}
                onBackButtonClicked={handleBack}
            />
        ); 
    }

    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

    export function AIAssistantChatDemo() {
        const [agent, setAgent] = React.useState(null);

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

        const handleBack = () => {
            // your custom action
        };

        if (!agent) return null;

        return (
            <CometChatAIAssistantChat 
                user={agent} 
                showBackButton={true}
                onBackButtonClicked={handleBack} 
            />
        );
    }
    ```
  </Tab>
</Tabs>

##### 2. onCloseButtonClicked

Called when the header close button is clicked (visible when `showCloseButton` is true).

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

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

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

        const handleClose = () => {
            // your custom action
        };

        if (!agent) return null;

        return (
            <CometChatAIAssistantChat 
                user={agent} 
                showCloseButton={true} 
                onCloseButtonClicked={handleClose} 
            />
        );
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

    export function AIAssistantChatDemo() {
        const [agent, setAgent] = React.useState(null);

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

        const handleClose = () => {
            // your custom action
        };

        if (!agent) return null;

        return (
            <CometChatAIAssistantChat 
                user={agent} 
                showCloseButton={true} 
                onCloseButtonClicked={handleClose} 
            />
        );
    }
    ```
  </Tab>
</Tabs>

##### 3. onSendButtonClick

Called when the composer send button is clicked.

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

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

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

        const handleSendButton = () => {
            // your custom action
        };

        if (!agent) return null;

        return (
            <CometChatAIAssistantChat 
                user={agent}
                onSendButtonClick={handleSendButton} 
            />
        );
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

    export function AIAssistantChatDemo() {
        const [agent, setAgent] = React.useState(null);

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

        const handleSendButton = () => {
            // your custom action
        };

        if (!agent) return null;

        return (
            <CometChatAIAssistantChat 
                user={agent}
                onSendButtonClick={handleSendButton} 
            />
        );
    }
    ```
  </Tab>
</Tabs>

##### 4. onError

Listen to errors from the underlying header, list, or composer.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";
    export function AIAssistantChatDemo() {
        const [agent, setAgent] = React.useState<CometChat.User>();

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

        const handleError = (error: CometChat.CometChatException) => {
            // your error handling
        };

        if (!agent) return null;

        return (
            <CometChatAIAssistantChat 
                user={agent} 
                onError={handleError} 
            />
        );
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";
    export function AIAssistantChatDemo() {
        const [agent, setAgent] = React.useState(null);

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

        const handleError = (error: CometChat.CometChatException) => {
            // your error handling
        };

        if (!agent) return null;

        return (
            <CometChatAIAssistantChat 
                user={agent} 
                onError={handleError} 
            />
        )
    }
    ```
  </Tab>
</Tabs>

***

## Customization

To fit your app’s design requirements, you can customize the appearance of the Assistant Chat component. We provide exposed properties that allow you to modify the experience and behavior according to your specific needs.

### Style

You can set the css of the Assistant Chat Component to customize the styling.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/sGES4ruFz8w2SaXH/images/react-uikit_ai-assistant-chat-style.png?fit=max&auto=format&n=sGES4ruFz8w2SaXH&q=85&s=5720b851863cd06626d0e9d5f3a7cb22" width="280" height="400" data-path="images/react-uikit_ai-assistant-chat-style.png" />
</Frame>

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

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

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

        if (!agent) return null;

        return (
            <div className="cometchat-assistant-chat__wrapper">
                <CometChatAIAssistantChat user={agent} />
            </div>
        );
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

    export function AIAssistantChatDemo = () => {
        const [agent, setAgent] = React.useState(null);

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

        if (!agent) return null;

        return (
            <div className="cometchat-assistant-chat__wrapper">
                <CometChatAIAssistantChat user={agent} />
            </div>
        );
    }
    ```
  </Tab>

  <Tab title="css">
    ```css theme={null}
    .cometchat-ai-assistant-chat
      .cometchat-ai-assistant-chat__suggested-message-pill {
        background: #30a46c;
        color: #ffffff;
        text-align: center;
        font-family: "Times New Roman";
        font-size: 9px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
    }

    .cometchat-ai-assistant-chat
      .cometchat-ai-assistant-chat__suggested-message-pill
      .cometchat-ai-assistant-chat__suggested-message-icon {
        background: #ffffff;
        width: 9.55px;
        height: 9.55px;
    }
    .cometchat-ai-assistant-chat
      .cometchat-ai-assistant-chat__header-auxiliary-view
      .cometchat-button
      .cometchat-button__icon-default {
        background: #30a46c;
    }
    ```
  </Tab>
</Tabs>

### Functionality

These props tailor the experience. Most message options (copy/edit/delete/react, receipts, date separators, etc.) are disabled by default for assistant chats.

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

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

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

        if (!agent) return null;

        // Example: Set streaming speed to 30 characters per second
        // and show close button
        // You can also customize suggestions, empty state, etc.
        return (
            <CometChatAIAssistantChat
                user={agent}
                showCloseButton={true}
                setStreamingSpeed={30}
            />
        )
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

    export function AIAssistantChatDemo = () => {
        const [agent, setAgent] = React.useState(null);

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

        if (!agent) return null;

        // Example: Set streaming speed to 30 characters per second
        // and show close button
        // You can also customize suggestions, empty state, etc.
        return (
            <CometChatAIAssistantChat
                user={agent}
                showCloseButton={true}
                setStreamingSpeed={30}
            />
        );
    }
    ```
  </Tab>
</Tabs>

***

| Property                    | Description                                                              | Example                                   |
| --------------------------- | ------------------------------------------------------------------------ | ----------------------------------------- |
| `user`                      | Required `CometChat.User` representing the AI agent.                     | `user={agent}`                            |
| `streamingSpeed`            | Characters-per-second speed for streaming replies. Default `30`.         | `streamingSpeed={50}`                     |
| `suggestedMessages`         | Array of quick prompts for the empty state.                              | `suggestedMessages=["Help", "Summarize"]` |
| `hideSuggestedMessages`     | Hide the suggestions section.                                            | `hideSuggestedMessages={true}`            |
| `hideNewChat`               | Hide the New Chat button in header.                                      | `hideNewChat={true}`                      |
| `hideChatHistory`           | Hide the History button/sidebar.                                         | `hideChatHistory={true}`                  |
| `showBackButton`            | Show back button in header.                                              | `showBackButton`                          |
| `showCloseButton`           | Show close button in header.                                             | `showCloseButton`                         |
| `onBackButtonClicked`       | Back button handler.                                                     | `onBackButtonClicked={() => {}}`          |
| `onCloseButtonClicked`      | Close button handler.                                                    | `onCloseButtonClicked={() => {}}`         |
| `onSendButtonClick`         | Send button handler.                                                     | `onSendButtonClick={() => {}}`            |
| `onError`                   | Error handler.                                                           | `onError={handleError}`                   |
| `emptyView`                 | Custom empty state for the list.                                         | `emptyView={<Empty/>}`                    |
| `loadingView`               | Custom loading view.                                                     | `loadingView={<Loading/>}`                |
| `errorView`                 | Custom error view.                                                       | `errorView={<Error/>}`                    |
| `emptyChatGreetingView`     | Custom empty title (default uses metadata.greetingMessage or user name). | `emptyChatGreetingView={<h3/>}`           |
| `emptyChatIntroMessageView` | Custom empty subtitle (default uses metadata.introductoryMessage).       | `emptyChatIntroMessageView={<p/>}`        |
| `emptyChatImageView`        | Custom empty image.                                                      | `emptyChatImageView={<img/>}`             |
| `aiAssistantTools`          | Provide tool/function handlers for the assistant.                        | `aiAssistantTools={tools}`                |

### Advanced

#### Header Views

Customize header sections using the following props: `headerItemView`, `headerTitleView`, `headerSubtitleView`, `headerLeadingView`, `headerTrailingView`, and `headerAuxiliaryButtonView`. These customizations are done in the similar way as the [Message Header](/ui-kit/react/message-header#advanced) component.

<Note>
  The header’s "New Chat" and "History" buttons are built-in. You can override them by providing a custom `headerAuxiliaryButtonView`.
</Note>

#### Assistant Tools

Pass an instance of `CometChatAIAssistantTools` to enable tool/function calls during assistant replies.

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

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

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

        const tools = new CometChatAIAssistantTools({
            getCurrentWeather: ({ location }: { location: string }) => {
                // call your backend or a public API
                console.log("Fetching weather for", location);
            },
            createTicket: ({ title }: { title: string }) => {
                // open your internal ticketing flow
                console.log("Create ticket:", title);
            },
        });

        if (!agent) return null;

        return (
            <CometChatAIAssistantChat user={agent} aiAssistantTools={tools} />
        );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";
    import { CometChatAIAssistantTools } from "@cometchat/chat-uikit-react";

    export function AIAssistantChatDemo = () => {
        const [agent, setAgent] = React.useState(null);

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

        const tools = new CometChatAIAssistantTools({
            getCurrentWeather: ({ location }: { location: string }) => {
                // call your backend or a public API
                console.log("Fetching weather for", location);
            },
            createTicket: ({ title }: { title: string }) => {
                // open your internal ticketing flow
                console.log("Create ticket:", title);
            },
        });

        if (!agent) return null;

        return (
            <CometChatAIAssistantChat user={agent} aiAssistantTools={tools} />
        );
    }
    ```
  </Tab>
</Tabs>

#### Empty Chat Image View

Provide a custom image for the empty state using `emptyChatImageView`.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/ez24jA9Q57bxQihV/images/react-uikit_ai-assistant-chat-empty_chat_image_view.png?fit=max&auto=format&n=ez24jA9Q57bxQihV&q=85&s=7adf856a943e73a17cd970e0866b1767" width="280" height="400" data-path="images/react-uikit_ai-assistant-chat-empty_chat_image_view.png" />
</Frame>

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

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

        React.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} />}
            />
        );
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

    export function AIAssistantChatDemo() {
        const [agent, setAgent] = React.useState(null);

        React.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} />}
            />
        )
    }
    ```
  </Tab>
</Tabs>

#### Empty Chat Greeting View

Override the empty state greeting message view using the `emptyChatGreetingView` prop.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/ez24jA9Q57bxQihV/images/react-uikit_ai-assistant-chat-empty_chat_greeeting_view.png?fit=max&auto=format&n=ez24jA9Q57bxQihV&q=85&s=905b543150bd9f77aad3f6ae0b039806" 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 React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

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

        React.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="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

    export function AIAssistantChatDemo() {
        const [agent, setAgent] = React.useState(null);

        React.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;
        flex: 1 0 0;
        align-self: stretch;
        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>

#### Empty Chat Intro Message View

You can override the empty chat intro message view using the `emptyChatIntroMessageView` prop.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/ez24jA9Q57bxQihV/images/react-uikit_ai-assistant-chat-empty_chat_intro_message_view.png?fit=max&auto=format&n=ez24jA9Q57bxQihV&q=85&s=d8c2840aea0c6c80bdc8bd73dac9f526" 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 React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

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

        React.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="JavaScript">
    ```jsx theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatAIAssistantChat } from "@cometchat/chat-uikit-react";

    export function AIAssistantChatDemo() {
        const [agent, setAgent] = React.useState(null);

        React.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-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        margin: 10px 0;
    }
    ```
  </Tab>
</Tabs>

#### Templates

[CometChatMessageTemplate](/ui-kit/react/message-template) is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message views often known as message bubbles. For more information, you can refer to [CometChatMessageTemplate](/ui-kit/react/message-template).

You can set message Templates to AIAssistantChat by using the following code snippet.

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

    export function AIAssistantChatDemo() {
      const [chatUser, setChatUser] = React.useState<CometChat.User>();
      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      const getTemplates = () => {
        let templates = ChatConfigurator.getDataSource().getAllMessageTemplates();
        templates.map((data) => {
          data.footerView = (message) => {}; //custom view here
        });
        return templates;
      };

      return chatUser ? (
        <div>
          <CometChatAIAssistantChat user={chatUser} templates={getTemplates()} />
        </div>
      ) : null;
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    ```js theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatAIAssistantChat,
      ChatConfigurator
    } from "@cometchat/chat-uikit-react";

    export function AIAssistantChatDemo() {
      const [chatUser, setChatUser] = React.useState(null);

      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      const getTemplates = () => {
        let templates = ChatConfigurator.getDataSource().getAllMessageTemplates();
        templates.map((data) => {
          data.footerView = (message) => {}; //custom view here
        });
        return templates;
      };

      return chatUser ? (
        <div>
          <CometChatAIAssistantChat user={chatUser} templates={getTemplates()} />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

***