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

# AIAssistBotConfiguration

> AIAssistBotConfiguration — CometChat documentation.

This refers to the properties of the `AIAssistBot` component that are available for customisation.

The `AIAssistBotConfiguration` has the below properties,

### Properties

| Property                 | Type                                                                                     | Description                                                                                                                                                                                                                                                                                     |
| ------------------------ | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| title                    | (bot: CometChat.User) => string                                                          | Used to set a custom title.                                                                                                                                                                                                                                                                     |
| botFirstMessageText      | (bot: CometChat.User) => string                                                          | Used to set the first bot message.                                                                                                                                                                                                                                                              |
| assistBotStyle           | [AIAssistBotStyle](/web-shared/ai-assist-bot-style)                                      | Used to provide custom styling to conversation summary view.                                                                                                                                                                                                                                    |
| botMessageBubbleStyle    | [AIBotMessageBubbleStyle](/web-shared/ai-assist-bot-style#aibotmessagebubblestyle)       | Used to customise the bot message bubble style.                                                                                                                                                                                                                                                 |
| senderMessageBubbleStyle | [AISenderMessageBubbleStyle](/web-shared/ai-assist-bot-style#aisendermessagebubblestyle) | Used to customise the sender message bubble style                                                                                                                                                                                                                                               |
| messageInputStyle        | [MessageInputStyle](/web-elements/message-input#messageinputstyle)                       | Used to customise the message input style.                                                                                                                                                                                                                                                      |
| avatarStyle              | [AvatarStyle](/web-elements/avatar#avatar-style)                                         | Used to customise the avatar style.                                                                                                                                                                                                                                                             |
| closeIconUrl             | string                                                                                   | Custom close button icon url.                                                                                                                                                                                                                                                                   |
| sendIconURL              | string                                                                                   | Custom send button icon url.                                                                                                                                                                                                                                                                    |
| backIconURL              | string                                                                                   | Custom back button icon url.                                                                                                                                                                                                                                                                    |
| loadingIconUrl           | string                                                                                   | Custom loading icon url.                                                                                                                                                                                                                                                                        |
| errorIconURL             | string                                                                                   | Custom error icon url.                                                                                                                                                                                                                                                                          |
| apiConfiguration         | (user?: CometChat.User, group?: CometChat.Group) => Promise\<Object>                     | The `apiConfiguration` callback allows you to override the default logic of fetching conversation starters. The `apiConfiguration` callback passes the user/group object of the conversation. You can use the [SDK Method](/ai/bots) & pass additional configuration to customise the response. |

### Usage

#### Custom icon URLs

<Tabs>
  <Tab title="React">
    ```javascript theme={null}
    import { AIAssistBotConfiguration } from "@cometchat/uikit-shared";

    const configuration = new AIAssistBotConfiguration({
      loadingIconURL: "URL",
      errorIconURL: "URL",
      closeIconUrl: "URL",
      sendIconURL: "URL",
      backIconURL: "URL"
    });
    ```
  </Tab>

  <Tab title="Vue">
    ```javascript theme={null}
    import { AIAssistBotConfiguration } from "@cometchat/uikit-shared"; const
    configuration = new AIAssistBotConfiguration({ loadingIconURL: "URL",
    errorIconURL: "URL", closeIconUrl: "URL", sendIconURL: "URL", backIconURL: "URL"
    });
    ```
  </Tab>
</Tabs>

#### Custom style

<Tabs>
  <Tab title="React">
    ```javascript theme={null}
    import { AIAssistBotConfiguration, AIAssistBotStyle, AIBotMessageBubbleStyle, AISenderMessageBubbleStyle } from "@cometchat/uikit-shared";
    import { AvatarStyle, MessageInputStyle } from "@cometchat/uikit-elements";

    const customAssistBotStyle: AIAssistBotStyle = new AIAssistBotStyle({
    	titleFont: "20px Arial, sans-serif"
    });

    const customBotMessageBubbleStyle: AIBotMessageBubbleStyle = new AIBotMessageBubbleStyle({
      textFont: "20px Arial, sans-serif"
    });

    const customSenderMessageBubbleStyle: AISenderMessageBubbleStyle = new AISenderMessageBubbleStyle({
    	textFont: "20px Arial, sans-serif"
    });

    const customMessageInputStyle: MessageInputStyle = new MessageInputStyle({
    	textFont: "20px Arial, sans-serif"
    });

    const customAvatarStyle: AvatarStyle = new AvatarStyle({
    	borderRadius: "24px"
    });

    configuration = new AIAssistBotConfiguration({
      assistBotStyle: customAssistBotStyle,
    	botMessageBubbleStyle: customBotMessageBubbleStyle,
      senderMessageBubbleStyle: customSenderMessageBubbleStyle,
      messageInputStyle: customMessageInputStyle,
      avatarStyle: customAvatarStyle
    });
    ```
  </Tab>

  <Tab title="Vue">
    ```javascript theme={null}
    import { AIAssistBotConfiguration, AIAssistBotStyle, AIBotMessageBubbleStyle,
    AISenderMessageBubbleStyle } from "@cometchat/uikit-shared"; import {
    AvatarStyle, MessageInputStyle } from "@cometchat/uikit-elements"; const
    customAssistBotStyle: AIAssistBotStyle = new AIAssistBotStyle({ titleFont: "20px
    Arial, sans-serif" }); const customBotMessageBubbleStyle:
    AIBotMessageBubbleStyle = new AIBotMessageBubbleStyle({ textFont: "20px Arial,
    sans-serif" }); const customSenderMessageBubbleStyle: AISenderMessageBubbleStyle
    = new AISenderMessageBubbleStyle({ textFont: "20px Arial, sans-serif" }); const
    customMessageInputStyle: MessageInputStyle = new MessageInputStyle({ textFont:
    "20px Arial, sans-serif" }); const customAvatarStyle: AvatarStyle = new
    AvatarStyle({ borderRadius: "24px" }); configuration = new
    AIAssistBotConfiguration({ assistBotStyle: customAssistBotStyle,
    botMessageBubbleStyle: customBotMessageBubbleStyle, senderMessageBubbleStyle:
    customSenderMessageBubbleStyle, messageInputStyle: customMessageInputStyle,
    avatarStyle: customAvatarStyle });
    ```
  </Tab>
</Tabs>

#### API Configuration Callback

<Tabs>
  <Tab title="React">
    ```javascript theme={null}
    import { AIAssistBotConfiguration, AIAssistBotStyle, AIBotMessageBubbleStyle, AISenderMessageBubbleStyle } from "@cometchat/uikit-shared";
    import { AvatarStyle, MessageInputStyle } from "@cometchat/uikit-elements";

    const customAssistBotStyle: AIAssistBotStyle = new AIAssistBotStyle({
    	titleFont: "20px Arial, sans-serif"
    });

    const customBotMessageBubbleStyle: AIBotMessageBubbleStyle = new AIBotMessageBubbleStyle({
      textFont: "20px Arial, sans-serif"
    });

    const customSenderMessageBubbleStyle: AISenderMessageBubbleStyle = new AISenderMessageBubbleStyle({
    	textFont: "20px Arial, sans-serif"
    });

    const customMessageInputStyle: MessageInputStyle = new MessageInputStyle({
    	textFont: "20px Arial, sans-serif"
    });

    const customAvatarStyle: AvatarStyle = new AvatarStyle({
    	borderRadius: "24px"
    });

    configuration = new AIAssistBotConfiguration({
      assistBotStyle: customAssistBotStyle,
    	botMessageBubbleStyle: customBotMessageBubbleStyle,
      senderMessageBubbleStyle: customSenderMessageBubbleStyle,
      messageInputStyle: customMessageInputStyle,
      avatarStyle: customAvatarStyle
    });
    ```
  </Tab>

  <Tab title="Vue">
    ```javascript theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript"; import {
    AIAssistBotConfiguration } from "@cometchat/uikit-shared"; const
    apiConfiguration = (user?: CometChat.User, group?: CometChat.Group)=> { return
    new Promise((resolve, reject) => { const receiverId = user ? user.getUid() :
    group.getGuid(); const receiverType = user ? 'user' : 'group'; const botUid =
    bot.getUid(); const question = ""; CometChat.askBot(receiverId, receiverType,
    botUid, question).then( (response: any)=>{ return resolve(response) })
    .catch((err: CometChat.CometChatException)=>{ return reject(err) }) }) } const
    configuration = new AIAssistBotConfiguration({apiConfiguration:
    apiConfiguration});
    ```
  </Tab>
</Tabs>