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

# UI Kit Builder Settings

> Configure Next.js UI Kit Builder settings for messaging, AI helpers, calling, layout, theming, and agent tools.

The `CometChatSettings` object controls everything the Next.js UI Kit Builder renders—messaging, AI helpers, calls, layout, theming, and agent tools.

<Info>
  **For developers customizing their chat UI**: Edit `CometChatSettings.ts` to
  enable/disable features like messaging, calls, AI copilot, and theming. See
  [Integration Guide](/chat-builder/nextjs/integration) for setup.
</Info>

## Top-level structure

```ts lines theme={null}
export interface CometChatSettings {
  chatFeatures: { ... }
  callFeatures: { ... }
  layout: { ... }
  style: { ... }
}
```

***

<Tip>
  All boolean settings follow the same pattern: `true` enables the feature and shows its UI elements, `false` hides them completely.
</Tip>

## 1. Chat Features (`chatFeatures`)

### 1.1 Core Messaging Experience (`coreMessagingExperience`)

Essential messaging features: typing indicators, media sharing, message actions, and presence.

| Setting | Type | What It Does |
| - | - | - |
| Typing indicator (`typingIndicator`) | boolean | Shows "typing..." indicator when someone is composing a message |
| Thread conversation & replies (`threadConversationAndReplies`) | boolean | Enables threaded replies to specific messages, creating nested conversation threads |
| Photos sharing (`photosSharing`) | boolean | Allows users to share images from device or camera |
| Video sharing (`videoSharing`) | boolean | Allows users to share video files |
| Audio sharing (`audioSharing`) | boolean | Allows users to share audio files (mp3, wav, etc.) |
| File sharing (`fileSharing`) | boolean | Allows users to share documents (PDF, DOC, etc.) |
| Edit messages (`editMessage`) | boolean | Lets users modify their sent messages; edited messages show "(edited)" label |
| Delete messages (`deleteMessage`) | boolean | Lets users remove their sent messages |
| Message delivery and read receipts (`messageDeliveryAndReadReceipts`) | boolean | Shows delivery (✓) and read (✓✓) status indicators on messages |
| User & friends presence (`userAndFriendsPresence`) | boolean | Shows online/offline status dot next to user avatars |
| Conversation and Advanced Search (`conversationAndAdvancedSearch`) | boolean | Enables search across messages, users, and conversations |
| Quoted Replies (`quotedReplies`) | boolean | Lets users quote a message when replying, showing the original above their response |
| Mark as Unread (`markAsUnread`) | boolean | Lets users mark a conversation as unread to revisit later |

<Tip>
  Empower users with a seamless chat experience—reply to specific messages with
  quoted replies, mark conversations as unread for later, and search across all
  chats instantly. Learn more about [Core
  Features](/ui-kit/react/core-features).
</Tip>

### 1.2 Deeper User Engagement (`deeperUserEngagement`)

Interactive features: mentions, reactions, polls, voice notes, and collaborative tools.

| Setting | Type | What It Does |
| - | - | - |
| Mentions (`mentions`) | boolean | Lets users @mention specific people in a message to notify them |
| Mention All (`mentionAll`) | boolean | Lets users type @all to notify every member in a group chat |
| Reactions (`reactions`) | boolean | Lets users add emoji reactions (👍 ❤️ 😂 etc.) to messages |
| Message Translation (`messageTranslation`) | boolean | Translates messages to user's preferred language. Requires Dashboard setup |
| Polls (`polls`) | boolean | Lets users create polls with multiple options for group voting. Requires Dashboard setup |
| Collaborative Whiteboard (`collaborativeWhiteboard`) | boolean | Opens a shared whiteboard for real-time drawing and collaboration. Requires Dashboard setup |
| Collaborative Document (`collaborativeDocument`) | boolean | Creates shared documents for real-time collaborative editing. Requires Dashboard setup |
| Voice Notes (`voiceNotes`) | boolean | Lets users record and send voice messages |
| Emojis (`emojis`) | boolean | Shows emoji picker in composer for browsing and inserting emojis |
| Stickers (`stickers`) | boolean | Lets users send sticker images from available packs. Requires Dashboard setup |
| User Info (`userInfo`) | boolean | Lets users tap on another user's avatar to view their profile |
| Group Info (`groupInfo`) | boolean | Lets users tap on group header to view group details and member list |
| Report Message (`reportMessage`) | boolean | Lets users flag inappropriate messages for review. Requires moderation setup |

<Tip>
  Configure these features based on your app's requirements. Learn more about
  [Extensions](/ui-kit/react/extensions).
</Tip>

### 1.3 AI User Copilot (`aiUserCopilot`)

AI-powered features to help users start and navigate conversations.

| Setting | Type | What It Does |
| - | - | - |
| Conversation Starter (`conversationStarter`) | boolean | Shows AI-suggested opening messages when starting a new chat. Requires OpenAI API key |
| Conversation Summary (`conversationSummary`) | boolean | Generates an AI-powered summary of the conversation. Requires OpenAI API key |
| Smart Reply (`smartReply`) | boolean | Shows AI-suggested quick reply options based on conversation context. Requires OpenAI API key |

<Tip>
  AI User Copilot features require an OpenAI API key. Configure it in the [CometChat Dashboard](https://app.cometchat.com) under **Chat & Messaging > Settings**. Learn more about [AI Features](/ui-kit/react/ai-features).
</Tip>

### 1.4 User Management (`userManagement`)

| Setting | Type | What It Does |
| - | - | - |
| Friends Only (`friendsOnly`) | boolean | Restricts chat to friends list only; Users tab shows only friends |

### 1.5 Group Management (`groupManagement`)

Control what users can do with groups.

| Setting | Type | What It Does |
| - | - | - |
| Create Group (`createGroup`) | boolean | Lets users create new public or private groups |
| Add Members to Groups (`addMembersToGroups`) | boolean | Lets group admins/owners invite users to join the group |
| Join/Leave Group (`joinLeaveGroup`) | boolean | Lets users join public groups and leave groups they're in |
| Delete Group (`deleteGroup`) | boolean | Lets group owners permanently delete a group and all its messages |
| View Group Members (`viewGroupMembers`) | boolean | Shows member list in group info |

### 1.6 Moderation (`moderatorControls`)

Admin tools for managing group members and content.

| Setting | Type | What It Does |
| - | - | - |
| Blocked message feedback (`moderation`) | boolean | Enables blocked message feedback for blocked messages as per configured moderation rules. Requires Dashboard setup |
| Report Message (`reportMessage`) | boolean | Lets users flag messages for moderator review in Dashboard |
| Kick Users (`kickUsers`) | boolean | Lets admins/moderators remove a user from a group (they can rejoin) |
| Ban Users (`banUsers`) | boolean | Lets admins/moderators permanently remove a user and prevent rejoining |
| Promote/Demote Members (`promoteDemoteMembers`) | boolean | Lets group owners change member roles (member, moderator, admin) |

<Tip>
  To enable content moderation, set `moderation` and `reportMessage` to `true`,
  then configure your moderation rules in the [CometChat
  Dashboard](https://app.cometchat.com). See [Rules
  Management](/moderation/getting-started#setting-up-moderation-rules) for setup
  details.
</Tip>

### 1.7 Private Messaging Within Groups (`privateMessagingWithinGroups`)

Allow direct messages between group members.

| Setting | Type | What It Does |
| - | - | - |
| Send Private Message to Group Members (`sendPrivateMessageToGroupMembers`) | boolean | Lets users start a 1:1 chat with a group member from their profile |

### 1.8 In-App Sounds (`inAppSounds`)

Control sound notifications for incoming and outgoing messages.

| Setting | Type | What It Does |
| - | - | - |
| Incoming Message Sound (`incomingMessageSound`) | boolean | Plays a sound when a new message is received |
| Outgoing Message Sound (`outgoingMessageSound`) | boolean | Plays a sound when a message is sent |

<Tip>
  These toggles control the default message sounds. To use custom audio files or manage sound playback programmatically, see the [Sound Manager](/ui-kit/react/sound-manager).
</Tip>

***

## 2. Call Features (`callFeatures`)

### 2.1 Voice and Video Calling (`voiceAndVideoCalling`)

Enable voice and video calling capabilities.

| Setting | Type | What It Does |
| - | - | - |
| 1:1 Voice Calling (`oneOnOneVoiceCalling`) | boolean | Shows phone icon in 1:1 chat header for starting voice calls |
| 1:1 Video Calling (`oneOnOneVideoCalling`) | boolean | Shows video camera icon in 1:1 chat header for starting video calls |
| Group Video Conference (`groupVideoConference`) | boolean | Shows video camera icon in group chat header for starting group video calls |
| Group Voice Conference (`groupVoiceConference`) | boolean | Shows phone icon in group chat header for starting group voice calls |

<Tip>
  Learn more about [Call Features](/ui-kit/react/call-features#features).
</Tip>

***

## 3. Layout (`layout`)

Control the overall UI structure and navigation.

| Setting | Type | What It Does |
| - | - | - |
| With Sidebar (`withSideBar`) | boolean | Shows navigation sidebar with tabs (Chats, Calls, Users, Groups) on the left side |
| Tabs (`tabs`) | string\[] | Array of tabs to show: `'chats'`, `'calls'`, `'users'`, `'groups'` |
| Chat Type (`chatType`) | string | Default conversation type on load: `'user'` for 1:1 chats, `'group'` for group chats |

<Tip>
  Set `withSideBar: false` for embedded chat widgets or single-conversation
  views where navigation isn't needed.
</Tip>

***

## 4. Style (`style`)

Customize colors, fonts, and theme appearance.

### 4.1 Theme

| Setting | Type | What It Does |
| - | - | - |
| Theme (`theme`) | string | Controls light/dark mode: `'light'`, `'dark'`, or `'system'` (matches device preference) |

<Tip>
  Use `theme: "system"` to automatically match the user's device preference.
  Preview your `brandColor` in both light and dark modes for contrast.

  [Learn more about UI Kit Theming](/ui-kit/react/theme) for additional customizations.
</Tip>

### 4.2 Colors

| Setting | Type | What It Does |
| - | - | - |
| Brand Color (`brandColor`) | string | Primary accent color (hex) for buttons, links, active states. Example: `"#6852D6"` |
| Primary Text Light (`primaryTextLight`) | string | Main text color in light mode (hex). Example: `"#2B2B2B"` |
| Primary Text Dark (`primaryTextDark`) | string | Main text color in dark mode (hex). Example: `"#FFFFFF"` |
| Secondary Text Light (`secondaryTextLight`) | string | Secondary text color in light mode (hex) for timestamps, subtitles. Example: `"#727272"` |
| Secondary Text Dark (`secondaryTextDark`) | string | Secondary text color in dark mode (hex) for timestamps, subtitles. Example: `"#989898"` |

<Tip>
  Match `brandColor` to your website's primary accent color. Use your site's
  existing text colors for `primaryTextLight` and `primaryTextDark` to maintain
  brand consistency.
</Tip>

### 4.3 Typography

| Setting | Type | What It Does |
| - | - | - |
| Font (`font`) | string | Font family: `'roboto'`, `'arial'`, `'inter'`, or `'times new roman'` |
| Size (`size`) | string | Text size and spacing: `'default'`, `'compact'`, or `'comfortable'` |

***

## Settings Overview

Below is the complete settings structure with default values. Update these in `CometChatSettings.ts` to customize your chat experience.

```json lines theme={null}
{
  "chatFeatures": {
    "coreMessagingExperience": {
      "typingIndicator": true,
      "threadConversationAndReplies": true,
      "photosSharing": true,
      "videoSharing": true,
      "audioSharing": true,
      "fileSharing": true,
      "editMessage": true,
      "deleteMessage": true,
      "messageDeliveryAndReadReceipts": true,
      "userAndFriendsPresence": true,
      "conversationAndAdvancedSearch": true,
      "moderation": true,
      "quotedReplies": false,
      "markAsUnread": false
    },
    "deeperUserEngagement": {
      "mentions": true,
      "mentionAll": true,
      "reactions": true,
      "messageTranslation": true,
      "polls": true,
      "collaborativeWhiteboard": true,
      "collaborativeDocument": true,
      "voiceNotes": true,
      "emojis": true,
      "stickers": true,
      "userInfo": true,
      "groupInfo": true
    },
    "aiUserCopilot": {
      "conversationStarter": false,
      "conversationSummary": false,
      "smartReply": false
    },
    "userManagement": {
      "friendsOnly": false
    },
    "groupManagement": {
      "createGroup": true,
      "addMembersToGroups": true,
      "joinLeaveGroup": true,
      "deleteGroup": true,
      "viewGroupMembers": true
    },
    "moderatorControls": {
      "kickUsers": true,
      "banUsers": true,
      "promoteDemoteMembers": true,
      "reportMessage": true
    },
    "privateMessagingWithinGroups": {
      "sendPrivateMessageToGroupMembers": true
    },
    "inAppSounds": {
      "incomingMessageSound": true,
      "outgoingMessageSound": true
    }
  },
  "callFeatures": {
    "voiceAndVideoCalling": {
      "oneOnOneVoiceCalling": true,
      "oneOnOneVideoCalling": true,
      "groupVideoConference": true,
      "groupVoiceConference": true
    }
  },
  "layout": {
    "withSideBar": true,
    "tabs": ["chats", "calls", "users", "groups"],
    "chatType": "user"
  },
  "style": {
    "theme": "system",
    "color": {
      "brandColor": "#6852D6",
      "primaryTextLight": "#141414",
      "primaryTextDark": "#FFFFFF",
      "secondaryTextLight": "#727272",
      "secondaryTextDark": "#989898"
    },
    "typography": {
      "font": "roboto",
      "size": "default"
    }
  }
}
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Directory Structure" href="/chat-builder/nextjs/builder-dir-structure">
    Understand the organization of the builder components and generated code.
  </Card>

  <Card title="Customizations" href="/chat-builder/nextjs/builder-customisations">
    Modify component props, styling, and behavior for deeper customization.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.