diff --git a/chat-builder/android/builder-customisations.mdx b/chat-builder/android/builder-customisations.mdx
new file mode 100644
index 000000000..b57b5f866
--- /dev/null
+++ b/chat-builder/android/builder-customisations.mdx
@@ -0,0 +1,400 @@
+---
+title: "Customizing Your UI Kit Builder"
+sidebarTitle: "Customizations"
+description: "Customize CometChat UI Kit Builder components — modify props, styling, and behavior for Android."
+---
+
+The `CometChatBuilderSettings.kt` file handles basic feature toggles. For deeper customizations, modify component props using `BuilderSettingsHelper` or edit the source code directly.
+
+---
+
+## Understanding the Customization Architecture
+
+The Android UI Kit Builder uses two main files for customization:
+
+| File | Purpose | When to Modify |
+| ---- | ------- | -------------- |
+| `CometChatBuilderSettings.kt` | Auto-generated feature flags and configuration constants | Functional changes (enable/disable features) |
+| `themes.xml` | Theme styles, colors, and typography | UI/visual changes (colors, fonts, spacing) |
+| `BuilderSettingsHelper.kt` | Utility class that applies settings to UI components | Component-level customizations |
+
+
+ `CometChatBuilderSettings.kt` is auto-generated by the Builder plugin from your `cometchat-builder-settings.json` file. You can modify the values directly in the Kotlin file, but changes will be overwritten if you rebuild with the plugin.
+
+
+---
+
+## Using BuilderSettingsHelper
+
+The `BuilderSettingsHelper` is a utility class that applies your Builder configuration to CometChat UI components. It reads values from `CometChatBuilderSettings` and configures component properties accordingly.
+
+### How It Works
+
+1. **Import the helper** into your Activity or Fragment
+2. **Get a reference** to your CometChat UI component
+3. **Call the appropriate method** to apply settings
+
+```kotlin
+import com.yourpackage.BuilderSettingsHelper
+
+// Apply settings to your components
+BuilderSettingsHelper.applySettingsToMessageHeader(messageHeader)
+BuilderSettingsHelper.applySettingsToMessageList(messageList)
+BuilderSettingsHelper.applySettingsToMessageComposer(messageComposer)
+```
+
+---
+
+## Component-Level Customizations
+
+### MessageHeader
+
+The `applySettingsToMessageHeader` method configures call buttons and user status visibility based on your Builder settings.
+
+```kotlin
+import com.cometchat.chatuikit.messageheader.CometChatMessageHeader
+import com.yourpackage.BuilderSettingsHelper
+
+class MessagesActivity : AppCompatActivity() {
+
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+
+ val messageHeader: CometChatMessageHeader = binding.messageHeader
+
+ // Apply Builder settings
+ BuilderSettingsHelper.applySettingsToMessageHeader(messageHeader)
+ }
+}
+```
+
+**Settings Applied:**
+
+| Setting | Property | Description |
+| ------- | -------- | ----------- |
+| `VoiceAndVideoCalling.ONEONONEVOICECALLING` | `voiceCallButtonVisibility` | Shows/hides voice call button for 1:1 chats |
+| `VoiceAndVideoCalling.ONEONONEVIDEOCALLING` | `videoCallButtonVisibility` | Shows/hides video call button for 1:1 chats |
+| `VoiceAndVideoCalling.GROUPVOICECONFERENCE` | `voiceCallButtonVisibility` | Shows/hides voice call button for groups |
+| `VoiceAndVideoCalling.GROUPVIDEOCONFERENCE` | `videoCallButtonVisibility` | Shows/hides video call button for groups |
+| `CoreMessagingExperience.USERANDFRIENDSPRESENCE` | `userStatusVisibility` | Shows/hides online status indicator |
+
+---
+
+### MessageList
+
+The `applySettingsToMessageList` method configures message options, reactions, AI features, and more.
+
+```kotlin
+import com.cometchat.chatuikit.messagelist.CometChatMessageList
+import com.yourpackage.BuilderSettingsHelper
+
+class MessagesActivity : AppCompatActivity() {
+
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+
+ val messageList: CometChatMessageList = binding.messageList
+
+ // Apply Builder settings
+ BuilderSettingsHelper.applySettingsToMessageList(messageList)
+ }
+}
+```
+
+**Settings Applied:**
+
+| Setting | Property | Description |
+| ------- | -------- | ----------- |
+| `CoreMessagingExperience.THREADCONVERSATIONANDREPLIES` | `replyInThreadOptionVisibility` | Shows/hides reply in thread option |
+| `CoreMessagingExperience.EDITMESSAGE` | `editMessageOptionVisibility` | Shows/hides edit message option |
+| `CoreMessagingExperience.DELETEMESSAGE` | `deleteMessageOptionVisibility` | Shows/hides delete message option |
+| `CoreMessagingExperience.MESSAGEDELIVERYANDREADRECEIPTS` | `receiptsVisibility` | Shows/hides read receipts |
+| `CoreMessagingExperience.QUOTEDREPLIES` | `isSwipeToReplyEnabled`, `replyOptionVisibility` | Enables swipe-to-reply and reply option |
+| `DeeperUserEngagement.REACTIONS` | `messageReactionOptionVisibility` | Shows/hides reaction option |
+| `DeeperUserEngagement.MESSAGETRANSLATION` | `translateMessageOptionVisibility` | Shows/hides translate option |
+| `AiUserCopilot.CONVERSATIONSTARTER` | `isEnableConversationStarter` | Enables AI conversation starters |
+| `AiUserCopilot.SMARTREPLY` | `isEnableSmartReplies` | Enables AI smart replies |
+| `PrivateMessagingWithinGroups.SENDPRIVATEMESSAGETOGROUPMEMBERS` | `messagePrivatelyOptionVisibility` | Shows/hides message privately option |
+
+---
+
+### MessageComposer
+
+The `applySettingsToMessageComposer` method configures attachment options, typing indicators, mentions, and more.
+
+```kotlin
+import com.cometchat.chatuikit.messagecomposer.CometChatMessageComposer
+import com.yourpackage.BuilderSettingsHelper
+
+class MessagesActivity : AppCompatActivity() {
+
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+
+ val messageComposer: CometChatMessageComposer = binding.messageComposer
+
+ // Apply Builder settings
+ BuilderSettingsHelper.applySettingsToMessageComposer(messageComposer)
+ }
+}
+```
+
+**Settings Applied:**
+
+| Setting | Property | Description |
+| ------- | -------- | ----------- |
+| `CoreMessagingExperience.TYPINGINDICATOR` | `disableTypingEvents()` | Enables/disables typing indicators |
+| `CoreMessagingExperience.PHOTOSSHARING` | `cameraAttachmentOptionVisibility`, `imageAttachmentOptionVisibility` | Shows/hides photo attachments |
+| `CoreMessagingExperience.VIDEOSHARING` | `videoAttachmentOptionVisibility` | Shows/hides video attachments |
+| `CoreMessagingExperience.AUDIOSHARING` | `audioAttachmentOptionVisibility` | Shows/hides audio attachments |
+| `CoreMessagingExperience.FILESHARING` | `fileAttachmentOptionVisibility` | Shows/hides file attachments |
+| `DeeperUserEngagement.MENTIONS` | `isDisableMentions` | Enables/disables @mentions |
+| `DeeperUserEngagement.MENTIONALL` | `setDisableMentionAll()` | Enables/disables @all mentions |
+| `DeeperUserEngagement.POLLS` | `pollAttachmentOptionVisibility` | Shows/hides polls option |
+| `DeeperUserEngagement.COLLABORATIVEWHITEBOARD` | `collaborativeWhiteboardOptionVisibility` | Shows/hides whiteboard option |
+| `DeeperUserEngagement.COLLABORATIVEDOCUMENT` | `collaborativeDocumentOptionVisibility` | Shows/hides document option |
+| `DeeperUserEngagement.VOICENOTES` | `voiceNoteButtonVisibility` | Shows/hides voice notes button |
+| `DeeperUserEngagement.STICKERS` | `stickersButtonVisibility` | Shows/hides stickers button |
+
+---
+
+### Users
+
+The `applySettingsToUsers` method configures user list display options.
+
+```kotlin
+import com.cometchat.chatuikit.users.CometChatUsers
+import com.yourpackage.BuilderSettingsHelper
+
+class UsersActivity : AppCompatActivity() {
+
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+
+ val users: CometChatUsers = binding.users
+
+ // Apply Builder settings
+ BuilderSettingsHelper.applySettingsToUsers(users)
+ }
+}
+```
+
+**Settings Applied:**
+
+| Setting | Property | Description |
+| ------- | -------- | ----------- |
+| `CoreMessagingExperience.USERANDFRIENDSPRESENCE` | `userStatusVisibility` | Shows/hides online status indicator |
+
+---
+
+### CallLogs
+
+The `applySettingsToCallLogs` method configures call log display and call buttons.
+
+```kotlin
+import com.cometchat.chatuikit.calls.calllogs.CometChatCallLogs
+import com.yourpackage.BuilderSettingsHelper
+
+class CallsActivity : AppCompatActivity() {
+
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+
+ val callLogs: CometChatCallLogs = binding.callLogs
+
+ // Apply Builder settings
+ BuilderSettingsHelper.applySettingsToCallLogs(callLogs)
+ }
+}
+```
+
+**Settings Applied:**
+
+| Setting | Property | Description |
+| ------- | -------- | ----------- |
+| `VoiceAndVideoCalling.ONEONONEVIDEOCALLING` | `itemVideoCallIcon` | Shows/hides video call icon |
+| `VoiceAndVideoCalling.ONEONONEVOICECALLING` | `itemIncomingCallIcon` | Shows/hides voice call icon |
+
+---
+
+### GroupMembers
+
+The `applySettingToGroupMembers` method configures moderator controls and member display options.
+
+```kotlin
+import com.cometchat.chatuikit.groupmembers.CometChatGroupMembers
+import com.yourpackage.BuilderSettingsHelper
+
+class GroupMembersActivity : AppCompatActivity() {
+
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+
+ val groupMembers: CometChatGroupMembers = binding.groupMembers
+
+ // Apply Builder settings
+ BuilderSettingsHelper.applySettingToGroupMembers(groupMembers)
+ }
+}
+```
+
+**Settings Applied:**
+
+| Setting | Property | Description |
+| ------- | -------- | ----------- |
+| `ModeratorControls.KICKUSERS` | `kickMemberOptionVisibility` | Shows/hides kick member option |
+| `ModeratorControls.BANUSERS` | `banMemberOptionVisibility` | Shows/hides ban member option |
+| `ModeratorControls.PROMOTEDEMOTEMEMBERS` | `scopeChangeOptionVisibility` | Shows/hides promote/demote option |
+| `CoreMessagingExperience.USERANDFRIENDSPRESENCE` | `userStatusVisibility` | Shows/hides online status indicator |
+
+---
+
+## Functional Changes via CometChatBuilderSettings
+
+For functional changes (enabling/disabling features), you can directly access the `CometChatBuilderSettings` object:
+
+```kotlin
+import com.cometchat.builder.CometChatBuilderSettings
+
+// Check if a feature is enabled
+if (CometChatBuilderSettings.ChatFeatures.CoreMessagingExperience.PHOTOSSHARING) {
+ // Photo sharing is enabled
+}
+
+// Check AI features
+if (CometChatBuilderSettings.ChatFeatures.AiUserCopilot.SMARTREPLY) {
+ // Smart reply is enabled
+}
+
+// Check call features
+if (CometChatBuilderSettings.CallFeatures.VoiceAndVideoCalling.ONEONONEVIDEOCALLING) {
+ // 1:1 video calling is enabled
+}
+
+// Access layout settings
+val tabs = CometChatBuilderSettings.Layout.TABS // List of enabled tabs
+val chatType = CometChatBuilderSettings.Layout.CHATTYPE // "user" or "group"
+
+// Access style settings
+val brandColor = CometChatBuilderSettings.Style.Color.BRANDCOLOR
+val theme = CometChatBuilderSettings.Style.THEME // "light", "dark", or "system"
+```
+
+### Modifying Feature Flags at Runtime
+
+You can modify feature flags at runtime by directly setting the values:
+
+```kotlin
+// Disable photo sharing at runtime
+CometChatBuilderSettings.ChatFeatures.CoreMessagingExperience.PHOTOSSHARING = false
+
+// Enable AI smart replies
+CometChatBuilderSettings.ChatFeatures.AiUserCopilot.SMARTREPLY = true
+
+// Then re-apply settings to your components
+BuilderSettingsHelper.applySettingsToMessageComposer(messageComposer)
+BuilderSettingsHelper.applySettingsToMessageList(messageList)
+```
+
+
+ Runtime changes to `CometChatBuilderSettings` are not persisted. They will reset to the original values when the app restarts.
+
+
+---
+
+## UI/Theme Changes via themes.xml
+
+For visual customizations (colors, fonts, spacing), modify the `themes.xml` file in your `res/values` directory.
+
+### Customizing Colors
+
+```xml themes.xml
+
+```
+
+### Customizing Typography
+
+```xml themes.xml
+
+```
+
+### Pre-built Font Themes
+
+The Builder includes pre-built font themes you can use:
+
+```xml themes.xml
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Customizing Component Styles
+
+You can customize individual component styles by overriding their style attributes:
+
+```xml themes.xml
+
+
+
+
+
+
+
+
+```
+
+---
+
+## Next Steps
+
+
+
+ Understand all available feature toggles and configuration options.
+
+
+ Explore all available UI components and their customization options.
+
+
+ Deep dive into colors, typography, and advanced styling.
+
+
+ Understand how the exported code is organized.
+
+
diff --git a/chat-builder/android/builder-dir-structure.mdx b/chat-builder/android/builder-dir-structure.mdx
new file mode 100644
index 000000000..aaed3d2f9
--- /dev/null
+++ b/chat-builder/android/builder-dir-structure.mdx
@@ -0,0 +1,204 @@
+---
+title: "Directory Structure"
+sidebarTitle: "Directory Structure"
+description: "Overview of the CometChat UI Kit Builder directory layout for Android — understand where to find and customize components, settings, and styles."
+---
+
+The exported UI Kit Builder code lives in `chat-builder/src/main/java/com/cometchat/builder/`. This guide helps you navigate the structure so you know exactly where to make changes.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+---
+
+## Root Files
+
+| File | Purpose |
+| ------------------------------ | ---------------------------------------------------------------------- |
+| `CometChatBuilderSettings.kt` | Auto-generated feature flags and configuration constants from Builder |
+| `BuilderSettingsHelper.kt` | Utility class for applying Builder settings to CometChat UI components |
+| `AppCredentials.kt` | CometChat app credentials (APP_ID, AUTH_KEY, REGION) |
+
+---
+
+## Key Folders
+
+### `data/`
+
+Contains data layer components including enums, interfaces, and repositories.
+
+
+
+
+
+
+
+
+
+### `ui/`
+
+Contains all UI-related components organized by type.
+
+
+
+
+
+
+
+
+
+
+### `utils/`
+
+Utility functions and application-level helpers.
+
+
+
+
+
+
+
+
+
+### `viewmodels/`
+
+ViewModels for managing UI state and business logic.
+
+
+
+
+
+
+
+
+
+
+
+---
+
+## res/ Folder Structure
+
+### `layout/`
+
+XML layout files for activities, fragments, and custom views.
+
+
+
+
+
+
+
+
+
+
+
+
+
+### `values/`
+
+Resource values including strings, colors, and themes.
+
+
+
+
+
+
+
+
+
+### `font/`
+
+Font resources for typography customization.
+
+
+
+
+
+
+
+
+
+
+
+
+### `drawable/`
+
+Drawable resources including icons, shapes, and backgrounds.
+
+
+
+
+
+
+
+
+
+
+
+---
+
+## Quick Reference: Where to Customize
+
+| What you want to change | Where to look |
+| ------------------------------- | -------------------------------------------------- |
+| Enable/disable features | `CometChatBuilderSettings.kt` |
+| Apply settings to components | `BuilderSettingsHelper.kt` |
+| Theme colors & styles | `res/values/themes.xml`, `res/values/colors.xml` |
+| Typography & fonts | `res/font/` |
+| Screen layouts | `res/layout/` |
+| Text & translations | `res/values/strings.xml`, `res/values-/` |
+| Activity behavior | `ui/activity/` |
+| Fragment behavior | `ui/fragments/` |
+| App credentials | `AppCredentials.kt` |
+
+
+ Prefer using `CometChatBuilderSettings.kt` for feature toggles and `themes.xml` for styling. For extensive changes, extend existing components instead of modifying core files directly.
+
+
+---
+
+## Next Steps
+
+
+
+ Configure feature toggles and behavior
+
+
+ Modify component props, styling, and behavior
+
+
+ Customize colors, typography, and styling
+
+
+ Add multi-language support
+
+
diff --git a/chat-builder/android/builder-settings.mdx b/chat-builder/android/builder-settings.mdx
new file mode 100644
index 000000000..b322aa58b
--- /dev/null
+++ b/chat-builder/android/builder-settings.mdx
@@ -0,0 +1,404 @@
+---
+title: "UI Kit Builder Settings"
+sidebarTitle: "UI Kit Builder Settings"
+description: "Comprehensive reference for all CometChatBuilderSettings options in the Android UI Kit Builder."
+---
+
+The `CometChatBuilderSettings` object controls everything the Android UI Kit Builder renders—messaging, AI helpers, calls, layout, theming, and more. This object is auto-generated by the UI Kit Builder Settings Gradle plugin from your `cometchat-builder-settings.json` configuration file.
+
+
+ **For developers customizing their chat UI**: The `CometChatBuilderSettings.kt` file is generated automatically when you build your project. Edit the `cometchat-builder-settings.json` file to enable/disable features like messaging, calls, AI copilot, and theming. See the [Integration Guide](/chat-builder/android/integration) for setup.
+
+
+## Top-level Structure
+
+The generated `CometChatBuilderSettings` object in Kotlin follows this structure:
+
+```kotlin
+object CometChatBuilderSettings {
+ object ChatFeatures {
+ object CoreMessagingExperience { /* Boolean constants */ }
+ object DeeperUserEngagement { /* Boolean constants */ }
+ object AiUserCopilot { /* Boolean constants */ }
+ object UserManagement { /* Boolean constants */ }
+ object GroupManagement { /* Boolean constants */ }
+ object ModeratorControls { /* Boolean constants */ }
+ object PrivateMessagingWithinGroups { /* Boolean constants */ }
+ object InAppSounds { /* Boolean constants */ }
+ }
+ object CallFeatures {
+ object VoiceAndVideoCalling { /* Boolean constants */ }
+ }
+ object Layout { /* Layout constants */ }
+ object Style {
+ object Color { /* Color constants */ }
+ object Typography { /* Typography constants */ }
+ }
+}
+```
+
+---
+
+
+All boolean settings follow the same pattern: `true` enables the feature and shows its UI elements, `false` hides them completely.
+
+
+## 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 |
+| Moderation (`moderation`) | boolean | Enables blocked message feedback for messages blocked by moderation rules |
+| 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 |
+
+
+ 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/android/core-features).
+
+
+### 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 |
+
+
+ Configure these features based on your app's requirements. Learn more about
+ [Extensions](/ui-kit/android/extensions).
+
+
+### 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 |
+
+
+AI User Copilot features require an OpenAI API key. Configure it in the [CometChat Dashboard](https://app.cometchat.com) under **AI > Settings**. Learn more about [AI Features](/ui-kit/android/ai-features).
+
+
+### 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 Moderator Controls (`moderatorControls`)
+
+Admin tools for managing group members and content.
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| 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) |
+
+
+ To enable content moderation, set `moderation` to `true` in Core Messaging Experience and `reportMessage` to `true` in Moderator Controls,
+ 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.
+
+
+### 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 |
+
+
+These toggles control the default message sounds. To use custom audio files or manage sound playback programmatically, see the [Sound Manager](/ui-kit/android/sound-manager).
+
+
+---
+
+## 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 |
+
+
+ Learn more about [Call Features](/ui-kit/android/call-features).
+
+
+---
+
+## 3. Layout (`layout`)
+
+Control the overall UI structure and navigation.
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| With Sidebar (`withSideBar`) | boolean | Shows navigation bar with tabs (Chats, Calls, Users, Groups) |
+| 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 |
+
+
+ Set `withSideBar: false` for embedded chat widgets or single-conversation
+ views where navigation isn't needed.
+
+
+---
+
+## 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) |
+
+
+ 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/android/theme) for additional customizations.
+
+
+### 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: `"#141414"` |
+| 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"` |
+
+
+ Match `brandColor` to your app's primary accent color. Use your app's
+ existing text colors for `primaryTextLight` and `primaryTextDark` to maintain
+ brand consistency.
+
+
+### 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 your `cometchat-builder-settings.json` file to customize your chat experience.
+
+```json
+{
+ "builderId": "your-builder-id",
+ "settings": {
+ "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"
+ }
+ }
+ }
+}
+```
+
+---
+
+## Dashboard Feature Requirements
+
+Some features require additional configuration in the [CometChat Dashboard](https://app.cometchat.com) before they can be used:
+
+
+**AI Copilot Features** (Conversation Starter, Conversation Summary, Smart Reply)
+- Requires an OpenAI API key configured in the Dashboard under **AI > Settings**
+- Enable the specific AI features you want to use
+
+
+
+**Stickers**
+- Requires sticker packs to be configured in the Dashboard under **Chat & Messaging > Stickers**
+- Upload or select sticker packs for your users
+
+
+
+**Polls**
+- Requires the Polls extension to be enabled in the Dashboard under **Extensions > Polls**
+
+
+
+**Collaborative Whiteboard & Document**
+- Requires the respective extensions to be enabled in the Dashboard under **Extensions**
+
+
+
+**Message Translation**
+- Requires the Message Translation extension to be enabled in the Dashboard under **Extensions > Message Translation**
+- Configure your preferred translation provider
+
+
+
+**Moderation**
+- Requires moderation rules to be configured in the Dashboard under **Moderation > Rules**
+- Set up content filtering and blocking rules
+
+
+---
+
+## Next Steps
+
+
+
+ Understand the organization of the builder components and generated code.
+
+
+ Modify component props, styling, and behavior for deeper customization.
+
+
diff --git a/chat-builder/android/integration.mdx b/chat-builder/android/integration.mdx
index a99fbbb5d..b31ffc0c6 100644
--- a/chat-builder/android/integration.mdx
+++ b/chat-builder/android/integration.mdx
@@ -1,240 +1,503 @@
---
-title: "Getting Started With UI Kit Builder"
+title: "UI Kit Builder Integration"
sidebarTitle: "Integration"
+description: "Step-by-step guide to integrating CometChat's UI Kit Builder into your Android application using either the Gradle Plugin or Module Import method."
---
-UI Kit Builder streamlines integrating CometChat’s Android UI Kit into your app. Design the experience visually, export platform‑ready assets and settings, and wire them into your Android project with a few steps.
+This guide demonstrates how to integrate the **UI Kit Builder** configuration system into your Android application. You can easily integrate the same configuration system into your own Android application by following these guided steps.
- 
+ 
+---
+
+## Prerequisites
+
+Before getting started, make sure you have:
+
+- **Android Studio** (latest version recommended)
+- **Android Device or Emulator** with Android API level 26 (Android 8.0) or above
+- **Java 11** or above
+- **Internet connection** (required for CometChat services)
+
+---
+
## Complete Integration Workflow
-1. Design your chat experience in UI Kit Builder.
-2. Export your code and settings package.
-3. Enable extra features in the CometChat Dashboard if needed.
-4. Optionally preview the experience in a sample app.
-5. Integrate into your Android project.
-6. Customize further with UI Kit styling and components.
+1. **Design Your Chat Experience** - Use the UI Kit Builder to customize layouts, features, and styling.
+2. **Review and Export** - Review which features will be enabled in your Dashboard, toggle them on/off, and download the generated code package.
+3. **Preview Customizations** - Optionally, preview the chat experience before integrating it into your project.
+4. **Integration** - Integrate into your existing application using either the Gradle Plugin or Module Import method.
+5. **Customize Further** - Explore advanced customization options to tailor the chat experience.
-***
+---
## Launch the UI Kit Builder
-1. Log in to your CometChat Dashboard: https://app.cometchat.com
-2. Select your application.
-3. Go to Integrate → Android → Launch UI Kit Builder.
+1. Log in to your [CometChat Dashboard](https://app.cometchat.com).
+2. Select your application from the list.
+3. Navigate to **Chat & Messaging** → **Get Started / Integrate** → **Android** → **Launch UI Kit Builder**.
-***
+---
-## Enable Features in CometChat Dashboard
+## Integration Options
-If your app needs any of these, enable them from your Dashboard: https://app.cometchat.com
+Choose one of the following integration methods based on your needs:
-- Stickers
-- Polls
-- Collaborative whiteboard
-- Collaborative document
-- Message translation
-- AI User Copilot: Conversation starter, Conversation summary, Smart reply
+| Option | Best For | Complexity |
+| ------ | -------- | ---------- |
+| **Gradle Plugin** (Recommended) | New projects or existing projects where you want full control over customization | Medium |
+| **Module Import** | Quick integration when you want a ready-made module to plug-and-play | Easy |
-How to enable:
+---
-
- 
-
+## Option 1: Gradle Plugin Integration (Recommended)
+
+This method gives you full control over customization and is recommended for most projects.
-1. Log in to the Dashboard.
-2. Select your app.
-3. Navigate to Chat → Features.
-4. Toggle ON the required features and Save.
+### Step 1: Add CometChat Repository
-***
+Add the CometChat Maven repository to your project-level `settings.gradle.kts` file in both `pluginManagement` and `dependencyResolutionManagement`:
-## Integration with CometChat UI Kit Builder (Android)
+```kotlin
+pluginManagement {
+ repositories {
+ google()
+ mavenCentral()
+ gradlePluginPortal()
+ maven("https://dl.cloudsmith.io/public/cometchat/cometchat/maven/")
+ }
+}
-Follow these steps in your existing Android app (from README):
+dependencyResolutionManagement {
+ repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
+ repositories {
+ google()
+ mavenCentral()
+ maven("https://jitpack.io")
+ maven("https://dl.cloudsmith.io/public/cometchat/cometchat/maven/")
+ }
+}
+```
-### Step 1: Add CometChat Maven repository
+### Step 2: Add Jetifier Flag
-Add to `settings.gradle.kts` (dependencyResolutionManagement):
+Add the Jetifier flag to your `gradle.properties` file:
-```kotlin
-maven("https://dl.cloudsmith.io/public/cometchat/cometchat/maven/")
+```properties
+android.enableJetifier=true
```
-### Step 2: Add UI Kit dependencies
+### Step 3: Add UI Kit Dependencies
-In your app module `build.gradle`:
+Add the CometChat UI Kit dependencies to your app-level `build.gradle.kts`:
-```gradle
+```kotlin
dependencies {
- // CometChat UIKit
- implementation 'com.cometchat:chat-uikit-android:5.2.7'
+ // CometChat UIKit
+ implementation("com.cometchat:chat-uikit-android:5.2.+")
- // Optional: voice/video calling
- implementation 'com.cometchat:calls-sdk-android:4.3.3'
+ // (Optional) Include this if your app uses voice/video calling features
+ implementation("com.cometchat:calls-sdk-android:4.3.+")
}
```
-### Step 3: Apply the Builder Settings plugin
+
+ Version 5.2.+ is required for all BuilderSettingsHelper APIs to work correctly.
+
+
+### Step 4: Apply the Builder Settings Plugin
-In your app module `build.gradle` plugins block:
+Add the UI Kit Builder Settings plugin to your app-level `build.gradle.kts`:
-```gradle
+```kotlin
plugins {
- id("com.cometchat.builder.settings") version "5.0.1"
+ id("com.android.application")
+ kotlin("android")
+ // Apply the UI Kit Builder settings plugin
+ id("com.cometchat.builder.settings") version "5.0.1"
}
```
-Sync the project to download plugin dependencies.
+Sync your project to download the plugin dependencies.
-### Step 4: Add Builder configuration JSON
+### Step 5: Add Configuration JSON File
-Place `cometchat-builder-settings.json` at your app module root (same level as `build.gradle`).
+Copy the `cometchat-builder-settings.json` file from your exported code into your app module's root directory (same level as `build.gradle.kts`).
-### Step 5: Build to generate settings and styles
+
+ The `cometchat-builder-settings.json` file contains all your feature toggles, layout settings, and styling configuration from the UI Kit Builder.
+
-Run a build to generate `CometChatBuilderSettings.kt` and add required theme styles:
+### Step 6: Build to Generate Settings
+
+Build your project using Android Studio or run:
```bash
./gradlew build
```
-### Step 6: Copy the helper utility
+The Builder plugin will automatically generate:
+- `CometChatBuilderSettings.kt` — Contains all feature flags and configuration constants
+- Necessary styles in your theme
+
+### Step 7: Copy BuilderSettingsHelper
+
+Copy the `BuilderSettingsHelper.kt` file from the sample app to your project:
+
+- **Source:** `src/main/java/com/cometchat/builder/BuilderSettingsHelper.kt`
+- **Destination:** `src/main/java/com/yourpackage/BuilderSettingsHelper.kt`
+
+
+ Update the package declaration in `BuilderSettingsHelper.kt` to match your project's package name. Also remove the `applySettingsToBottomNavigationView` method if you're not using the sample app's navigation structure.
+
+
+### Step 7.1: Add Bottom Navigation Menu Resource
+
+If you're using the sample app's navigation structure, copy the menu folder from the sample app to your project's resources:
-Copy `BuilderSettingsHelper.kt` from the sample app into your project package (adjust package name):
+- **Source:** `src/main/res/menu/builder_bottom_nav_menu.xml`
+- **Destination:** `src/main/res/menu/builder_bottom_nav_menu.xml`
-- Source: `src/main/java/com/cometchat/sampleapp/kotlin/buildersetup/BuilderSettingsHelper.kt`
-- Destination: `src/main/java//BuilderSettingsHelper.kt`
+
+ This menu resource is required if `BuilderSettingsHelper.kt` references `R.id.nav_chats`, `R.id.nav_calls`, `R.id.nav_users`, or `R.id.nav_groups`.
+
-### Step 7: Add font resources
+### Step 8: Add Font Resources
-Copy the `font` folder from the sample app into your project under `src/main/res/font`.
+Copy the `font` folder from the sample app to your project's resources:
-### Step 8: Set the Builder theme
+- **Source:** `src/main/res/font`
+- **Destination:** `src/main/res/font`
-In `AndroidManifest.xml`:
+### Step 8.1: Add Required Permissions
+
+Add the following permissions to your `AndroidManifest.xml` for camera, audio, storage, and internet access:
+
+```xml
+
+
+
+
+
+
+
+
+```
+
+### Step 9: Set the Builder Theme
+
+Update your `AndroidManifest.xml` to use the UI Kit Builder theme:
```xml
- ...
+ android:theme="@style/CometChat.Builder.Theme"
+ ...>
```
-### Step 9: Apply settings to UI components
+### Step 9.1: Initialize CometChat UIKit
+
+Before using any CometChat UI components, initialize the UIKit in your Application class or before launching any CometChat activities:
+
+```kotlin
+val uiKitSettings = UIKitSettings.UIKitSettingsBuilder()
+ .setAppId("YOUR_APP_ID")
+ .setRegion("YOUR_REGION")
+ .setAuthKey("YOUR_AUTH_KEY")
+ .subscribePresenceForAllUsers()
+ .build()
+
+CometChatUIKit.init(context, uiKitSettings, object : CometChat.CallbackListener() {
+ override fun onSuccess(successMessage: String?) {
+ // UIKit initialized successfully
+ }
+ override fun onError(e: CometChatException?) {
+ // Handle initialization error
+ }
+})
+```
+
+
+ Replace `YOUR_APP_ID`, `YOUR_REGION`, and `YOUR_AUTH_KEY` with your actual CometChat credentials from the Dashboard.
+
+
+### Step 10: Apply Settings to UI Components
-Use the helper to apply settings on CometChat UI components:
+Use the `BuilderSettingsHelper` to apply your configuration to CometChat UI components:
```kotlin
-BuilderSettingsHelper.applySettingsToMessageHeader(binding.messageHeader)
-BuilderSettingsHelper.applySettingsToMessageList(binding.messageList)
-BuilderSettingsHelper.applySettingsToMessageComposer(binding.messageComposer)
+import com.yourpackage.BuilderSettingsHelper
+
+class MessagesActivity : AppCompatActivity() {
+
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+
+ // Apply Builder settings to your UI components
+ BuilderSettingsHelper.applySettingsToMessageHeader(binding.messageHeader)
+ BuilderSettingsHelper.applySettingsToMessageList(binding.messageList)
+ BuilderSettingsHelper.applySettingsToMessageComposer(binding.messageComposer)
+ }
+}
+```
+
+**Apply settings to other components:**
-// Other components
+```kotlin
+// For Users component
BuilderSettingsHelper.applySettingsToUsers(binding.users)
+
+// For Call Logs
BuilderSettingsHelper.applySettingsToCallLogs(binding.callLog)
+
+// For Group Members
BuilderSettingsHelper.applySettingToGroupMembers(binding.groupMembers)
```
-### Step 10: Access generated constants directly
+### Step 11: Access Generated Constants
+
+You can access the generated constants directly in your code:
```kotlin
import com.cometchat.builder.CometChatBuilderSettings
+// Check if a feature is enabled
if (CometChatBuilderSettings.ChatFeatures.CoreMessagingExperience.PHOTOSSHARING) {
- // Enable photo sharing logic
+ // Enable photo sharing functionality
}
+// Access styling constants
val brandColor = CometChatBuilderSettings.Style.Color.BRANDCOLOR
+val fontSize = CometChatBuilderSettings.Style.Typography.SIZE
+```
+
+---
+
+## Option 2: Import Sample App as Module
+
+This method is ideal if you want a ready-made module to plug-and-play, or wish to migrate features from the sample app to your main app.
+
+### Step 1: Run the Sample App
+
+First, run the exported sample app from the CometChat Dashboard to verify it works correctly.
+
+### Step 2: Update AndroidManifest.xml
+
+In the sample app's `AndroidManifest.xml`:
+- In the `` tag, **remove all attributes except** `android:name`
+- If your app already has its own `Application` class, remove the sample app's `android:name` from the `` tag and extend your application class with `BuilderApplication`
+
+### Step 3: Update build.gradle.kts
+
+Modify the sample app's `build.gradle.kts`:
+- Remove `com.cometchat.builder.settings` from the `plugins` block
+- Change `id("com.android.application")` to `id("com.android.library")`
+
+```kotlin
+plugins {
+ id("com.android.library")
+ kotlin("android")
+}
+```
+
+
+ If you have a Java project, change `kotlin("android")` to `id("org.jetbrains.kotlin.android") version "2.2.20"`.
+
+
+### Step 4: Import as Module
+
+In Android Studio:
+1. Go to **File** → **New** → **Import Module**
+2. Select the sample app folder
+3. Click **Finish**
+
+
+ 
+
+
+
+ 
+
+
+### Step 5: Add Module Dependency
+
+Add the module dependency to your app's `build.gradle.kts`:
+
+```kotlin
+dependencies {
+ implementation(project(":chat-builder"))
+}
+```
+
+### Step 5.1: Set Builder Theme
+
+In your app's `AndroidManifest.xml`, set the theme to use the UI Kit Builder theme:
+
+```xml
+
+
+```
+
+### Step 6: Add Jetifier Flag
+
+Add to your `gradle.properties`:
+
+```properties
+android.enableJetifier=true
+```
+
+### Step 7: Add CometChat Repository
+
+Add the CometChat repository to `settings.gradle.kts`:
+
+```kotlin
+dependencyResolutionManagement {
+ repositories {
+ // ... other repositories
+ maven("https://dl.cloudsmith.io/public/cometchat/cometchat/maven/")
+ }
+}
```
-***
+### Step 8: Verify the Module
+
+Ensure the imported module is visible in your project and contains all necessary files.
+
+### Step 9: Launch Activities
-## Alternative: Import the Sample App as a Module
+Launch CometChat activities based on your app's state. Here's a complete MainActivity example:
-Prefer plug‑and‑play? Import the preconfigured Builder sample app (from README):
+```kotlin
+class MainActivity : AppCompatActivity() {
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+
+ // Check login state and navigate accordingly
+ if (CometChatUIKit.isInitialized() && CometChat.getLoggedInUser() != null) {
+ startActivity(Intent(this, HomeActivity::class.java))
+ } else {
+ startActivity(Intent(this, SplashActivity::class.java))
+ }
+ finish()
+ }
+}
+```
+
+**If CometChat is not initialized or user is not logged in:**
+
+```kotlin
+val intent = Intent(this@YourActivity, SplashActivity::class.java)
+startActivity(intent)
+```
-1. Download the sample from your CometChat Dashboard.
-2. In the imported module’s `AndroidManifest.xml`, keep only `android:name` under `` (or extend your `Application` from `BuilderApplication`).
-3. In project Gradle, comment out any CometChat Builder plugin config in the sample.
-4. In the sample’s `build.gradle`, remove `com.cometchat.builder.settings`, and change `id("com.android.application")` → `id("com.android.library")`.
-5. Import module in Android Studio: File → New → Import Module.
-6. Add dependency in your app module: `implementation(project(":builder-android"))`.
-7. Add Jetifier in `gradle.properties`: `android.enableJetifier=true`.
-8. Ensure CometChat Maven repository is present in `settings.gradle.kts`.
-9. Launch activities:
- - Not initialized / not logged in → `SplashActivity`
- - Logged in → `HomeActivity`
+**If the user is already logged in:**
-### Launch Messages screen (examples)
+```kotlin
+val intent = Intent(this@YourActivity, HomeActivity::class.java)
+startActivity(intent)
+```
-For a User:
+**Open Messages screen for a User:**
```kotlin
val UID: String = "UID"
-val intent = Intent(this, MessagesActivity::class.java)
+val intent = Intent(this@YourActivity, MessagesActivity::class.java)
CometChat.getUser(UID, object : CometChat.CallbackListener() {
- override fun onSuccess(user: User?) {
- intent.putExtra("user", com.google.gson.Gson().toJson(user))
- startActivity(intent)
- }
- override fun onError(e: CometChatException?) {
- Log.e("TAG", "Error fetching user: ${e?.message}")
- }
+ override fun onSuccess(user: User?) {
+ intent.putExtra("user", com.google.gson.Gson().toJson(user))
+ startActivity(intent)
+ }
+
+ override fun onError(e: CometChatException?) {
+ Log.e("TAG", "Error fetching user: ${e?.message}")
+ }
})
```
-For a Group:
+**Open Messages screen for a Group:**
```kotlin
val GUID: String = "GUID"
-val intent = Intent(this, MessagesActivity::class.java)
+val intent = Intent(this@YourActivity, MessagesActivity::class.java)
CometChat.getGroup(GUID, object : CometChat.CallbackListener() {
- override fun onSuccess(group: Group?) {
- intent.putExtra("group", com.google.gson.Gson().toJson(group))
- startActivity(intent)
- }
- override fun onError(e: CometChatException?) {
- Log.e("TAG", "Error fetching group: ${e?.message}")
- }
+ override fun onSuccess(group: Group?) {
+ intent.putExtra("group", com.google.gson.Gson().toJson(group))
+ startActivity(intent)
+ }
+
+ override fun onError(e: CometChatException?) {
+ Log.e("TAG", "Error fetching group: ${e?.message}")
+ }
})
```
-***
+---
-## Run the App
+## Important Guidelines for Changes
-Build and run on a device/emulator from Android Studio. Ensure a CometChat user is created and logged in via your app logic.
+
+**Functional Changes:**
+For enabling or disabling features and adjusting configurations, make the necessary updates in the `CometChatBuilderSettings.kt` file. This file contains all the feature flags and configuration constants.
+
-***
+
+**UI and Theme-related Changes:**
+For any updates related to UI, such as colors, fonts, and styles, you should apply your changes in the `themes.xml` file of the module itself.
+
-## Additional Notes
+---
-- Ensure features (translation, polls, stickers, whiteboard, document, AI copilot) are enabled in Dashboard → Chat → Features.
-- If Gradle sync fails to fetch the plugin, verify the plugin version and Maven repo are configured correctly.
+## Troubleshooting
-***
+### Plugin Not Found
-## Understanding Your Generated Code
+- Ensure you have internet connectivity during Gradle sync
+- Check that the plugin version is correct: `5.0.1`
+- Verify the CometChat Maven repository is added to `pluginManagement` in `settings.gradle.kts`
-- `CometChatBuilderSettings.kt`: Type‑safe flags and styling constants generated from your Builder config.
-- Theme updates: The plugin injects required styles for Builder themes.
+### CometChatBuilderSettings Not Generated
-***
+- Make sure `cometchat-builder-settings.json` is in the correct location (app module root directory)
+- Clean and rebuild your project: **Build > Clean Project > Rebuild Project**
+- Check the Gradle build output for any errors
-## Troubleshooting
+### BuilderSettingsHelper Import Errors
-- Plugin not found: Check internet connectivity and use `5.0.0`.
-- Settings not generated: Confirm JSON path and rebuild (Clean/Build).
-- Import errors: Verify package names and imports for `BuilderSettingsHelper` and `CometChatBuilderSettings`.
+- Verify you've updated the package declaration to match your project
+- Check that all `CometChatBuilderSettings` imports are correct
+- Ensure the Builder plugin has generated the settings file
-***
+---
## Next Steps
-- UI Kit Theme: [Theme introduction](/ui-kit/android/theme-introduction)
-- Components Overview: [UI Kit overview](/ui-kit/android/overview)
-- Methods & APIs: [Methods & APIs](/ui-kit/android/methods)
+
+
+ Understand the settings file and feature toggles.
+
+
+ Adjust component props, behavior, and UI elements.
+
+
+ See how the exported code is organized.
+
+
+ Customize colors, typography, and styling to match your brand.
+
+
diff --git a/chat-builder/android/overview.mdx b/chat-builder/android/overview.mdx
index 828ac7883..661c9dd5b 100644
--- a/chat-builder/android/overview.mdx
+++ b/chat-builder/android/overview.mdx
@@ -1,139 +1,113 @@
---
-title: "CometChat Builder For Android"
+title: "CometChat UI Kit Builder For Android"
sidebarTitle: "Overview"
+description: "CometChat UI Kit Builder for Android provides a pre-built user interface kit that developers can use to quickly integrate a reliable & fully-featured chat experience into an existing or a new app."
---
-The CometChat Builder for Android is a powerful way to ship chat faster with native UI that’s modular, customizable, and production‑ready. Configure features visually, export code and styles, and drop them into your Android app with minimal wiring.
+The CometChat UI Kit Builder for Android provides a pre-built user interface kit that developers can use to quickly integrate a reliable & fully-featured chat experience into an existing or a new app.
-***
-
-## Prerequisites
-
-- Android Studio (latest recommended)
-- Android device/emulator with API level 26+ (Android 8.0)
-- Java 11+
-- Internet connectivity (for CometChat services)
-
-***
+
+ 
+
-## Why Choose CometChat Builder?
+---
-- Rapid integration: Prebuilt native UI and generated settings.
-- Customizable: Theme, typography, features — all configurable.
-- Scalable: Built on CometChat’s reliable chat infrastructure.
-- Native UX: Components designed for Kotlin/Android.
+## What is UI Kit Builder?
-***
+UI Kit Builder is CometChat's configuration system that allows you to customize chat features, UI components, and styling through a simple JSON configuration file. The builder plugin automatically generates Kotlin constants and applies styling based on your configuration.
-## Setup Options
+---
-Choose one of the following paths to integrate:
+## Benefits of Using UI Kit Builder
-
-
- Get full customization with generated settings using the Gradle plugin.
-
+| Benefit | Description |
+| ------- | ----------- |
+| Easy Configuration | Change features without modifying code |
+| Type-Safe Constants | Auto-generated Kotlin constants |
+| Consistent Styling | Automatic theme generation |
+| Feature Toggling | Enable/disable features dynamically |
+| No Code Changes | Modify behavior through JSON configuration |
-
- Start quickly with a plug-and-play approach by importing the sample module.
-
-
+---
-***
+## Available Builder Settings Categories
-## User Interface Preview
+The Builder configuration supports the following categories:
-
-
-
+| Category | Description |
+| -------- | ----------- |
+| Core Messaging Experience | Basic chat features (typing, file sharing, etc.) |
+| Deeper User Engagement | Advanced features (reactions, polls, translation) |
+| AI User Copilot | AI-powered features (smart replies, conversation starters) |
+| Group Management | Group creation, member management |
+| Moderator Controls | User moderation (kick, ban, promote) |
+| Voice & Video Calling | Call-related features |
+| Layout & Styling | UI customization and theming |
-***
+---
## Try Live Demo
Experience the CometChat UI Kit Builder in action:
-
-
-
+
-***
-
-## Integration
-
-A ready‑to‑use chat experience configured via UI Kit Builder and powered by our Android UI Kit.
-
-**How It Works**
-
-- Toggle features like mentions, reactions, media uploads, polls, and more.
-- Export code, styles, and settings for your app.
-- Keep iterating — update configs without deep refactors.
-
-**Why It’s Great**
-
-- Fastest setup with minimal boilerplate.
-- Continuous customization with a visual configuration.
-- Fewer moving parts — reliable, pre‑assembled UI.
-
-***
+---
-## Next Steps for Developers
+## Next Steps
-1. Learn the basics — Key Concepts: [Key Concepts](/fundamentals/key-concepts)
-2. Follow the setup guide — UI Kit Builder (Android): [Integration](/chat-builder/android/integration)
-3. Customize UI — Theme and components: [Theme introduction](/ui-kit/android/theme-introduction), [UI Kit overview](/ui-kit/android/overview)
-4. Test & ship — Run on device/emulator and deploy.
+
+
+ Step-by-step instructions to integrate the UI Kit Builder into your Android project.
+
+
+ Complete reference of all configuration options available in CometChatBuilderSettings.
+
+
+ Learn how to customize components using BuilderSettingsHelper.
+
+
+ Understand the organization of the exported Builder code.
+
+
-***
+---
## Helpful Resources
-Explore these resources to go deeper with CometChat on Android.
-
-
-
-
- Experience the power of CometChat UI Kit with this interactive app
-
-
-
-
-
- Access the complete Android UI Kit source code.
-
-
-
-
-
- UI design resources for customization and prototyping.
-
- View on Figma
-
-
-
+
+ Experience the power of CometChat UI Kit with this interactive app
+
+
+ Access the complete Android UI Kit source code
+
+
+ UI design resources for customization and prototyping
+
+
+ Get assistance from our support team with any questions or issues
+
-
-***
-
-## Need Help?
-
-If you need assistance, check out:
-
-- Developer Community: http://community.cometchat.com/
-- Support Portal: https://help.cometchat.com/hc/en-us/requests/new
-
diff --git a/chat-builder/flutter/builder-customisations.mdx b/chat-builder/flutter/builder-customisations.mdx
new file mode 100644
index 000000000..6492f31b2
--- /dev/null
+++ b/chat-builder/flutter/builder-customisations.mdx
@@ -0,0 +1,460 @@
+---
+title: "Customizing Your UI Kit Builder"
+sidebarTitle: "Customizations"
+description: "Customize CometChat UI Kit Builder components — modify props, styling, and behavior for Flutter."
+---
+
+The `BuilderSettingsHelper` handles basic feature toggles. For deeper customizations, modify the configuration JSON, theme settings, or component props directly.
+
+---
+
+## Understanding the Customization Architecture
+
+The Flutter UI Kit Builder uses these main files for customization:
+
+| File | Purpose | When to Modify |
+| ---- | ------- | -------------- |
+| `cometchat-builder-settings.json` | Feature flags and configuration constants | Functional changes (enable/disable features) |
+| `BuilderSettingsHelper` | Utility class for loading and accessing settings | Runtime configuration access |
+| `pubspec.yaml` | Font and asset declarations | Adding custom fonts or assets |
+
+
+ The `cometchat-builder-settings.json` file is the source of truth for your Builder configuration. Update it and reload to apply changes.
+
+
+---
+
+## Using BuilderSettingsHelper
+
+The `BuilderSettingsHelper` provides access to your Builder configuration throughout your app.
+
+### Loading Configuration
+
+```dart
+import 'package:chat_builder/utils/builder_settings_helper.dart';
+
+Future main() async {
+ WidgetsFlutterBinding.ensureInitialized();
+
+ // Load settings from assets
+ await BuilderSettingsHelper.loadFromAsset();
+
+ runApp(const MyApp());
+}
+```
+
+### Accessing Settings
+
+```dart
+import 'package:chat_builder/utils/builder_settings_helper.dart';
+
+class MyWidget extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ final settings = BuilderSettingsHelper.settings;
+
+ // Access chat features
+ final chatFeatures = settings.chatFeatures;
+ final isPhotosEnabled = chatFeatures.coreMessagingExperience.photosSharing;
+
+ // Access style settings
+ final style = settings.style;
+ final brandColor = style.color.brandColor;
+
+ // Access layout settings
+ final layout = settings.layout;
+ final tabs = layout.tabs;
+
+ return Container(/* ... */);
+ }
+}
+```
+
+---
+
+## Theme Customization
+
+### Applying Builder Theme to UI Kit
+
+Apply the Builder configuration colors to your Flutter theme:
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:chat_builder/utils/builder_settings_helper.dart';
+
+class MyApp extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ final style = BuilderSettingsHelper.settings.style;
+
+ return MaterialApp(
+ theme: ThemeData(
+ primaryColor: Color(int.parse(style.color.brandColor.replaceFirst('#', '0xFF'))),
+ colorScheme: ColorScheme.light(
+ primary: Color(int.parse(style.color.brandColor.replaceFirst('#', '0xFF'))),
+ ),
+ textTheme: TextTheme(
+ bodyLarge: TextStyle(
+ color: Color(int.parse(style.color.primaryTextLight.replaceFirst('#', '0xFF'))),
+ ),
+ bodyMedium: TextStyle(
+ color: Color(int.parse(style.color.secondaryTextLight.replaceFirst('#', '0xFF'))),
+ ),
+ ),
+ fontFamily: style.typography.font,
+ ),
+ darkTheme: ThemeData.dark().copyWith(
+ primaryColor: Color(int.parse(style.color.brandColor.replaceFirst('#', '0xFF'))),
+ colorScheme: ColorScheme.dark(
+ primary: Color(int.parse(style.color.brandColor.replaceFirst('#', '0xFF'))),
+ ),
+ textTheme: TextTheme(
+ bodyLarge: TextStyle(
+ color: Color(int.parse(style.color.primaryTextDark.replaceFirst('#', '0xFF'))),
+ ),
+ bodyMedium: TextStyle(
+ color: Color(int.parse(style.color.secondaryTextDark.replaceFirst('#', '0xFF'))),
+ ),
+ ),
+ fontFamily: style.typography.font,
+ ),
+ themeMode: _getThemeMode(style.theme),
+ home: HomeScreen(),
+ );
+ }
+
+ ThemeMode _getThemeMode(String theme) {
+ switch (theme) {
+ case 'light':
+ return ThemeMode.light;
+ case 'dark':
+ return ThemeMode.dark;
+ default:
+ return ThemeMode.system;
+ }
+ }
+}
+```
+
+### Custom Color Utilities
+
+Create a utility class for working with Builder colors:
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:chat_builder/utils/builder_settings_helper.dart';
+
+class BuilderColors {
+ static Color get brandColor {
+ final hex = BuilderSettingsHelper.settings.style.color.brandColor;
+ return _hexToColor(hex);
+ }
+
+ static Color get primaryTextLight {
+ final hex = BuilderSettingsHelper.settings.style.color.primaryTextLight;
+ return _hexToColor(hex);
+ }
+
+ static Color get primaryTextDark {
+ final hex = BuilderSettingsHelper.settings.style.color.primaryTextDark;
+ return _hexToColor(hex);
+ }
+
+ static Color get secondaryTextLight {
+ final hex = BuilderSettingsHelper.settings.style.color.secondaryTextLight;
+ return _hexToColor(hex);
+ }
+
+ static Color get secondaryTextDark {
+ final hex = BuilderSettingsHelper.settings.style.color.secondaryTextDark;
+ return _hexToColor(hex);
+ }
+
+ static Color _hexToColor(String hex) {
+ return Color(int.parse(hex.replaceFirst('#', '0xFF')));
+ }
+}
+```
+
+---
+
+## Custom Font Integration
+
+### Step 1: Add Font Files
+
+Add your custom font files to the `assets/fonts/` directory.
+
+### Step 2: Update pubspec.yaml
+
+Register your custom fonts:
+
+```yaml
+flutter:
+ fonts:
+ - family: YourCustomFont
+ fonts:
+ - asset: assets/fonts/your_font_regular.ttf
+ - asset: assets/fonts/your_font_medium.ttf
+ weight: 500
+ - asset: assets/fonts/your_font_bold.ttf
+ weight: 700
+```
+
+### Step 3: Apply Custom Font
+
+Update the configuration JSON or apply programmatically:
+
+```dart
+// In your theme configuration
+ThemeData(
+ fontFamily: 'YourCustomFont',
+ // ... other theme settings
+)
+```
+
+---
+
+## Component-Level Customizations
+
+### Conditional Rendering Based on Features
+
+Use the configuration to conditionally render UI elements:
+
+```dart
+import 'package:chat_builder/utils/builder_settings_helper.dart';
+
+class MessageComposer extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ final chatFeatures = BuilderSettingsHelper.settings.chatFeatures;
+ final core = chatFeatures.coreMessagingExperience;
+ final engagement = chatFeatures.deeperUserEngagement;
+
+ return Row(
+ children: [
+ // Always show text input
+ Expanded(child: TextField()),
+
+ // Conditionally show attachment options
+ if (core.photosSharing)
+ IconButton(
+ icon: Icon(Icons.photo),
+ onPressed: () => _attachPhoto(),
+ ),
+
+ if (core.fileSharing)
+ IconButton(
+ icon: Icon(Icons.attach_file),
+ onPressed: () => _attachFile(),
+ ),
+
+ if (engagement.voiceNotes)
+ IconButton(
+ icon: Icon(Icons.mic),
+ onPressed: () => _recordVoiceNote(),
+ ),
+
+ if (engagement.stickers)
+ IconButton(
+ icon: Icon(Icons.emoji_emotions),
+ onPressed: () => _showStickers(),
+ ),
+ ],
+ );
+ }
+}
+```
+
+### Customizing Message Options
+
+Control which message options appear based on configuration:
+
+```dart
+class MessageOptionsSheet extends StatelessWidget {
+ final Message message;
+
+ const MessageOptionsSheet({required this.message});
+
+ @override
+ Widget build(BuildContext context) {
+ final chatFeatures = BuilderSettingsHelper.settings.chatFeatures;
+ final core = chatFeatures.coreMessagingExperience;
+ final engagement = chatFeatures.deeperUserEngagement;
+ final moderator = chatFeatures.moderatorControls;
+
+ return Column(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ if (core.quotedReplies)
+ ListTile(
+ leading: Icon(Icons.reply),
+ title: Text('Reply'),
+ onTap: () => _handleReply(),
+ ),
+
+ if (core.threadConversationAndReplies)
+ ListTile(
+ leading: Icon(Icons.forum),
+ title: Text('Reply in Thread'),
+ onTap: () => _handleThreadReply(),
+ ),
+
+ if (engagement.reactions)
+ ListTile(
+ leading: Icon(Icons.add_reaction),
+ title: Text('React'),
+ onTap: () => _handleReaction(),
+ ),
+
+ if (core.editMessage && _isOwnMessage())
+ ListTile(
+ leading: Icon(Icons.edit),
+ title: Text('Edit'),
+ onTap: () => _handleEdit(),
+ ),
+
+ if (core.deleteMessage && _isOwnMessage())
+ ListTile(
+ leading: Icon(Icons.delete),
+ title: Text('Delete'),
+ onTap: () => _handleDelete(),
+ ),
+
+ if (moderator.reportMessage)
+ ListTile(
+ leading: Icon(Icons.flag),
+ title: Text('Report'),
+ onTap: () => _handleReport(),
+ ),
+ ],
+ );
+ }
+}
+```
+
+---
+
+## Layout Customization
+
+### Dynamic Tab Configuration
+
+```dart
+import 'package:chat_builder/utils/builder_settings_helper.dart';
+
+class HomeScreen extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ final layout = BuilderSettingsHelper.settings.layout;
+
+ if (!layout.withSideBar) {
+ return SingleChatView();
+ }
+
+ final tabs = layout.tabs;
+
+ return DefaultTabController(
+ length: tabs.length,
+ child: Scaffold(
+ appBar: AppBar(
+ bottom: TabBar(
+ tabs: [
+ if (tabs.contains('chats'))
+ Tab(icon: Icon(Icons.chat), text: 'Chats'),
+ if (tabs.contains('calls'))
+ Tab(icon: Icon(Icons.call), text: 'Calls'),
+ if (tabs.contains('users'))
+ Tab(icon: Icon(Icons.people), text: 'Users'),
+ if (tabs.contains('groups'))
+ Tab(icon: Icon(Icons.group), text: 'Groups'),
+ ],
+ ),
+ ),
+ body: TabBarView(
+ children: [
+ if (tabs.contains('chats')) ChatsScreen(),
+ if (tabs.contains('calls')) CallsScreen(),
+ if (tabs.contains('users')) UsersScreen(),
+ if (tabs.contains('groups')) GroupsScreen(),
+ ],
+ ),
+ ),
+ );
+ }
+}
+```
+
+---
+
+## Call Features Customization
+
+### Conditional Call Buttons
+
+```dart
+class ChatHeader extends StatelessWidget {
+ final bool isGroup;
+
+ const ChatHeader({required this.isGroup});
+
+ @override
+ Widget build(BuildContext context) {
+ final callFeatures = BuilderSettingsHelper.settings.callFeatures;
+ final calling = callFeatures.voiceAndVideoCalling;
+
+ return AppBar(
+ actions: [
+ if (isGroup) ...[
+ if (calling.groupVoiceConference)
+ IconButton(
+ icon: Icon(Icons.call),
+ onPressed: () => _startGroupVoiceCall(),
+ ),
+ if (calling.groupVideoConference)
+ IconButton(
+ icon: Icon(Icons.videocam),
+ onPressed: () => _startGroupVideoCall(),
+ ),
+ ] else ...[
+ if (calling.oneOnOneVoiceCalling)
+ IconButton(
+ icon: Icon(Icons.call),
+ onPressed: () => _startVoiceCall(),
+ ),
+ if (calling.oneOnOneVideoCalling)
+ IconButton(
+ icon: Icon(Icons.videocam),
+ onPressed: () => _startVideoCall(),
+ ),
+ ],
+ ],
+ );
+ }
+}
+```
+
+---
+
+## Reloading Configuration
+
+### Refresh Settings at Runtime
+
+```dart
+import 'package:chat_builder/utils/builder_settings_helper.dart';
+
+class SettingsScreen extends StatelessWidget {
+ Future _reloadConfiguration() async {
+ // Reload from assets
+ await BuilderSettingsHelper.loadFromAsset();
+
+ // Trigger UI rebuild
+ // Use a state management solution to notify listeners
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return ElevatedButton(
+ onPressed: _reloadConfiguration,
+ child: Text('Reload Configuration'),
+ );
+ }
+}
+```
diff --git a/chat-builder/flutter/builder-dir-structure.mdx b/chat-builder/flutter/builder-dir-structure.mdx
new file mode 100644
index 000000000..7a947325f
--- /dev/null
+++ b/chat-builder/flutter/builder-dir-structure.mdx
@@ -0,0 +1,240 @@
+---
+title: "Directory Structure"
+sidebarTitle: "Directory Structure"
+description: "Overview of the CometChat UI Kit Builder directory layout for Flutter — understand where to find and customize components, settings, and styles."
+---
+
+The UI Kit Builder for Flutter organizes code into a modular structure with the `chat_builder` package containing all Builder-specific code. This guide helps you navigate the structure so you know exactly where to make changes.
+
+```
+your_app/
+├── lib/ # Your app's Dart code
+├── assets/
+│ ├── fonts/ # Font files (TTF, OTF)
+│ ├── sample_app/ # Sample app assets
+│ └── cometchat-builder-settings.json # Builder configuration
+├── chat_builder/
+│ ├── lib/
+│ │ ├── screens/ # UI screens
+│ │ ├── utils/ # Utilities and helpers
+│ │ ├── widgets/ # Reusable widgets
+│ │ └── chat_builder.dart # Main entry point
+│ └── pubspec.yaml # Builder dependencies
+├── ios/ # iOS native code
+├── android/ # Android native code
+└── pubspec.yaml # App dependencies
+```
+
+---
+
+## Root Files
+
+| File | Purpose |
+| ---- | ------- |
+| `pubspec.yaml` | Project dependencies, assets, and font declarations |
+| `lib/main.dart` | Main application entry point |
+
+---
+
+## Key Folders
+
+### `chat_builder/`
+
+The Builder module containing all UI Kit Builder functionality.
+
+```
+chat_builder/
+├── lib/
+│ ├── screens/ # UI screens (home, messages, login)
+│ ├── utils/ # Utilities including BuilderSettingsHelper
+│ ├── widgets/ # Reusable UI widgets
+│ └── chat_builder.dart # Main entry point with ChatBuilder class
+└── pubspec.yaml # Module dependencies
+```
+
+### `chat_builder/lib/utils/`
+
+Utility classes and helpers.
+
+```
+utils/
+├── builder_settings_helper.dart # Loads and provides access to Builder settings
+├── app_constants.dart # CometChat credentials and constants
+└── theme_helper.dart # Theme utilities
+```
+
+| File | Purpose |
+| ---- | ------- |
+| `builder_settings_helper.dart` | Loads configuration from JSON and provides access to settings |
+| `app_constants.dart` | CometChat APP_ID, AUTH_KEY, REGION |
+| `theme_helper.dart` | Helper functions for applying Builder theme |
+
+### `chat_builder/lib/screens/`
+
+UI screens for different features.
+
+```
+screens/
+├── home/ # Home screen with tab navigation
+├── messages/ # Chat and messaging screens
+├── calls/ # Call logs and call screens
+├── users/ # User list and profiles
+├── groups/ # Group list and management
+└── login/ # Authentication screens
+```
+
+### `chat_builder/lib/widgets/`
+
+Reusable UI widgets.
+
+```
+widgets/
+├── message_composer.dart # Message input widget
+├── message_list.dart # Message list widget
+├── user_avatar.dart # User avatar widget
+└── presence_indicator.dart # Online status indicator
+```
+
+---
+
+## Assets Directory
+
+Static assets including configuration, fonts, and images.
+
+```
+assets/
+├── fonts/
+│ ├── arial_regular.ttf
+│ ├── arial_medium.ttf
+│ ├── arial_bold.ttf
+│ ├── inter_regular.otf
+│ ├── inter_medium.otf
+│ ├── inter_bold.otf
+│ ├── roboto_regular.ttf
+│ ├── roboto_medium.ttf
+│ ├── roboto_bold.ttf
+│ ├── times_new_roman_regular.ttf
+│ ├── times_new_roman_medium.otf
+│ └── times_new_roman_bold.otf
+├── sample_app/ # Sample app specific assets
+└── cometchat-builder-settings.json # Builder configuration file
+```
+
+---
+
+## Platform Directories
+
+### `ios/`
+
+iOS-specific native code and configuration.
+
+```
+ios/
+├── Runner/
+│ ├── AppDelegate.swift # iOS app delegate
+│ └── Info.plist # iOS app configuration
+└── Podfile # CocoaPods dependencies
+```
+
+### `android/`
+
+Android-specific native code and configuration.
+
+```
+android/
+├── app/
+│ ├── src/main/
+│ │ ├── AndroidManifest.xml # Android app manifest
+│ │ ├── kotlin/ # Native Android code
+│ │ └── res/ # Android resources
+│ └── build.gradle.kts # App-level Gradle config
+├── build.gradle.kts # Project-level Gradle config
+└── settings.gradle.kts # Gradle settings
+```
+
+---
+
+## Quick Reference: Where to Customize
+
+| What you want to change | Where to look |
+| ----------------------- | ------------- |
+| Enable/disable features | `assets/cometchat-builder-settings.json` |
+| Access configuration at runtime | `chat_builder/lib/utils/builder_settings_helper.dart` |
+| CometChat credentials | `chat_builder/lib/utils/app_constants.dart` |
+| Theme colors & styles | `lib/main.dart` (MaterialApp theme) |
+| Custom fonts | `assets/fonts/`, `pubspec.yaml` |
+| Chat UI screens | `chat_builder/lib/screens/messages/` |
+| Call UI screens | `chat_builder/lib/screens/calls/` |
+| User management UI | `chat_builder/lib/screens/users/` |
+| Group management UI | `chat_builder/lib/screens/groups/` |
+| Reusable widgets | `chat_builder/lib/widgets/` |
+
+
+ Prefer using `cometchat-builder-settings.json` for feature toggles and the MaterialApp theme for styling. For extensive changes, create new widgets rather than modifying core files directly.
+
+
+---
+
+## pubspec.yaml Configuration
+
+Ensure your `pubspec.yaml` includes the Builder module and assets:
+
+```yaml
+dependencies:
+ flutter:
+ sdk: flutter
+ chat_builder:
+ path: ./chat_builder
+
+flutter:
+ uses-material-design: true
+ assets:
+ - assets/
+ - assets/sample_app/
+ fonts:
+ - family: arial
+ fonts:
+ - asset: assets/fonts/arial_regular.ttf
+ - asset: assets/fonts/arial_medium.ttf
+ - asset: assets/fonts/arial_bold.ttf
+ - family: inter
+ fonts:
+ - asset: assets/fonts/inter_regular.otf
+ - asset: assets/fonts/inter_medium.otf
+ - asset: assets/fonts/inter_bold.otf
+ - family: roboto
+ fonts:
+ - asset: assets/fonts/roboto_regular.ttf
+ - asset: assets/fonts/roboto_medium.ttf
+ - asset: assets/fonts/roboto_bold.ttf
+ - family: times New Roman
+ fonts:
+ - asset: assets/fonts/times_new_roman_regular.ttf
+ - asset: assets/fonts/times_new_roman_medium.otf
+ - asset: assets/fonts/times_new_roman_bold.otf
+```
+
+---
+
+## Next Steps
+
+
+
+ Configure feature toggles and behavior.
+
+
+ Modify component props, styling, and behavior.
+
+
+ Customize colors, typography, and styling.
+
+
+ Explore available UI components.
+
+
diff --git a/chat-builder/flutter/builder-settings.mdx b/chat-builder/flutter/builder-settings.mdx
new file mode 100644
index 000000000..cd2c835a0
--- /dev/null
+++ b/chat-builder/flutter/builder-settings.mdx
@@ -0,0 +1,358 @@
+---
+title: "UI Kit Builder Settings"
+sidebarTitle: "UI Kit Builder Settings"
+description: "Comprehensive reference for all Builder configuration options in the Flutter UI Kit Builder."
+---
+
+The Builder configuration controls everything the Flutter UI Kit Builder renders—messaging, AI helpers, calls, layout, theming, and more. This configuration is loaded from the `cometchat-builder-settings.json` file via `BuilderSettingsHelper`.
+
+
+ **For developers customizing their chat UI**: The configuration JSON file contains all your feature toggles, layout settings, and styling configuration. Edit this file to enable/disable features like messaging, calls, AI copilot, and theming. See the [Integration Guide](/chat-builder/flutter/integration) for setup.
+
+
+## Top-level Structure
+
+The configuration JSON follows this structure:
+
+```json
+{
+ "builderId": "unique-builder-id",
+ "settings": {
+ "chatFeatures": {
+ "coreMessagingExperience": { /* Boolean settings */ },
+ "deeperUserEngagement": { /* Boolean settings */ },
+ "aiUserCopilot": { /* Boolean settings */ },
+ "userManagement": { /* Boolean settings */ },
+ "groupManagement": { /* Boolean settings */ },
+ "moderatorControls": { /* Boolean settings */ },
+ "privateMessagingWithinGroups": { /* Boolean settings */ },
+ "inAppSounds": { /* Boolean settings */ }
+ },
+ "callFeatures": {
+ "voiceAndVideoCalling": { /* Boolean settings */ }
+ },
+ "layout": { /* Layout settings */ },
+ "style": {
+ "theme": "system",
+ "color": { /* Color settings */ },
+ "typography": { /* Typography settings */ }
+ }
+ }
+}
+```
+
+---
+
+
+All boolean settings follow the same pattern: `true` enables the feature and shows its UI elements, `false` hides them completely.
+
+
+## 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 |
+| ------- | ---- | ------------ |
+| `typingIndicator` | boolean | Shows "typing..." indicator when someone is composing a message |
+| `threadConversationAndReplies` | boolean | Enables threaded replies to specific messages, creating nested conversation threads |
+| `photosSharing` | boolean | Allows users to share images from device or camera |
+| `videoSharing` | boolean | Allows users to share video files |
+| `audioSharing` | boolean | Allows users to share audio files (mp3, wav, etc.) |
+| `fileSharing` | boolean | Allows users to share documents (PDF, DOC, etc.) |
+| `editMessage` | boolean | Lets users modify their sent messages; edited messages show "(edited)" label |
+| `deleteMessage` | boolean | Lets users remove their sent messages |
+| `messageDeliveryAndReadReceipts` | boolean | Shows delivery (✓) and read (✓✓) status indicators on messages |
+| `userAndFriendsPresence` | boolean | Shows online/offline status dot next to user avatars |
+| `conversationAndAdvancedSearch` | boolean | Enables search across messages, users, and conversations |
+| `moderation` | boolean | Enables blocked message feedback for messages blocked by moderation rules |
+| `quotedReplies` | boolean | Lets users quote a message when replying, showing the original above their response |
+| `markAsUnread` | boolean | Lets users mark a conversation as unread to revisit later |
+
+
+ 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/flutter/core-features).
+
+
+### 1.2 Deeper User Engagement (`deeperUserEngagement`)
+
+Interactive features: mentions, reactions, polls, voice notes, and collaborative tools.
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `mentions` | boolean | Lets users @mention specific people in a message to notify them |
+| `mentionAll` | boolean | Lets users type @all to notify every member in a group chat |
+| `reactions` | boolean | Lets users add emoji reactions (👍 ❤️ 😂 etc.) to messages |
+| `messageTranslation` | boolean | Translates messages to user's preferred language. Requires Dashboard setup |
+| `polls` | boolean | Lets users create polls with multiple options for group voting. Requires Dashboard setup |
+| `collaborativeWhiteboard` | boolean | Opens a shared whiteboard for real-time drawing and collaboration. Requires Dashboard setup |
+| `collaborativeDocument` | boolean | Creates shared documents for real-time collaborative editing. Requires Dashboard setup |
+| `voiceNotes` | boolean | Lets users record and send voice messages |
+| `emojis` | boolean | Shows emoji picker in composer for browsing and inserting emojis |
+| `stickers` | boolean | Lets users send sticker images from available packs. Requires Dashboard setup |
+| `userInfo` | boolean | Lets users tap on another user's avatar to view their profile |
+| `groupInfo` | boolean | Lets users tap on group header to view group details and member list |
+
+
+ Configure these features based on your app's requirements. Learn more about
+ [Extensions](/ui-kit/flutter/extensions).
+
+
+### 1.3 AI User Copilot (`aiUserCopilot`)
+
+AI-powered features to help users start and navigate conversations.
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `conversationStarter` | boolean | Shows AI-suggested opening messages |
+| `conversationSummary` | boolean | Generates AI-powered conversation summary |
+| `smartReply` | boolean | Shows AI-suggested quick reply options |
+
+
+AI User Copilot features require an OpenAI API key. Configure it in the [CometChat Dashboard](https://app.cometchat.com) under **AI > Settings**.
+
+
+### 1.4 User Management (`userManagement`)
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `friendsOnly` | boolean | Restricts chat to friends list only |
+
+### 1.5 Group Management (`groupManagement`)
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `createGroup` | boolean | Lets users create new groups |
+| `addMembersToGroups` | boolean | Lets admins invite users to groups |
+| `joinLeaveGroup` | boolean | Lets users join/leave groups |
+| `deleteGroup` | boolean | Lets owners delete groups |
+| `viewGroupMembers` | boolean | Shows member list in group info |
+
+### 1.6 Moderator Controls (`moderatorControls`)
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `reportMessage` | boolean | Lets users flag messages for review |
+| `kickUsers` | boolean | Lets admins remove users from groups |
+| `banUsers` | boolean | Lets admins permanently ban users |
+| `promoteDemoteMembers` | boolean | Lets owners change member roles |
+
+### 1.7 Private Messaging Within Groups (`privateMessagingWithinGroups`)
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `sendPrivateMessageToGroupMembers` | boolean | Lets users start 1:1 chats with group members |
+
+### 1.8 In-App Sounds (`inAppSounds`)
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `incomingMessageSound` | boolean | Plays sound for new messages |
+| `outgoingMessageSound` | boolean | Plays sound when sending messages |
+
+---
+
+## 2. Call Features (`callFeatures`)
+
+### 2.1 Voice and Video Calling (`voiceAndVideoCalling`)
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `oneOnOneVoiceCalling` | boolean | Shows phone icon in 1:1 chat header for starting voice calls |
+| `oneOnOneVideoCalling` | boolean | Shows video camera icon in 1:1 chat header for starting video calls |
+| `groupVideoConference` | boolean | Shows video camera icon in group chat header for starting group video calls |
+| `groupVoiceConference` | boolean | Shows phone icon in group chat header for starting group voice calls |
+
+
+ Learn more about [Call Features](/ui-kit/flutter/call-features).
+
+
+---
+
+## 3. Layout (`layout`)
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `withSideBar` | boolean | Shows navigation sidebar with tabs (Chats, Calls, Users, Groups) |
+| `tabs` | string[] | Array of tabs to show: `'chats'`, `'calls'`, `'users'`, `'groups'` |
+| `chatType` | string | Default conversation type on load: `'user'` for 1:1 chats, `'group'` for group chats, `'both'` for all |
+
+
+ Set `withSideBar: false` for embedded chat widgets or single-conversation
+ views where navigation isn't needed.
+
+
+---
+
+## 4. Style (`style`)
+
+### 4.1 Theme
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `theme` | string | Controls light/dark mode: `'light'`, `'dark'`, or `'system'` |
+
+### 4.2 Colors
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `brandColor` | string | Primary accent color (hex). Example: `"#6852D6"` |
+| `primaryTextLight` | string | Main text color in light mode |
+| `primaryTextDark` | string | Main text color in dark mode |
+| `secondaryTextLight` | string | Secondary text color in light mode |
+| `secondaryTextDark` | string | Secondary text color in dark mode |
+
+### 4.3 Typography
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `font` | string | Font family: `'roboto'`, `'arial'`, `'inter'`, or `'times new roman'` |
+| `size` | string | Text size: `'default'`, `'compact'`, or `'comfortable'` |
+
+---
+
+## Complete Settings Example
+
+```json
+{
+ "builderId": "your-builder-id",
+ "settings": {
+ "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": "both"
+ },
+ "style": {
+ "theme": "system",
+ "color": {
+ "brandColor": "#6852D6",
+ "primaryTextLight": "#141414",
+ "primaryTextDark": "#FFFFFF",
+ "secondaryTextLight": "#727272",
+ "secondaryTextDark": "#989898"
+ },
+ "typography": {
+ "font": "roboto",
+ "size": "default"
+ }
+ }
+ }
+}
+```
+
+---
+
+## Accessing Settings in Code
+
+Use the `BuilderSettingsHelper` to access settings in your Flutter code:
+
+```dart
+import 'package:chat_builder/utils/builder_settings_helper.dart';
+
+// Access settings after loading
+final settings = BuilderSettingsHelper.settings;
+
+// Check if a feature is enabled
+if (settings.chatFeatures.coreMessagingExperience.photosSharing) {
+ // Enable photo sharing functionality
+}
+
+// Access style settings
+final brandColor = settings.style.color.brandColor;
+final theme = settings.style.theme;
+
+// Access layout settings
+final tabs = settings.layout.tabs;
+final withSideBar = settings.layout.withSideBar;
+```
+
+---
+
+## Dashboard Feature Requirements
+
+Some features require additional configuration in the [CometChat Dashboard](https://app.cometchat.com):
+
+
+**AI Copilot Features** (Conversation Starter, Conversation Summary, Smart Reply)
+- Requires an OpenAI API key configured in the Dashboard under **AI > Settings**
+
+
+
+**Stickers, Polls, Collaborative Tools, Message Translation**
+- Requires the respective extensions to be enabled in the Dashboard under **Extensions**
+
+
+
+**Moderation**
+- Requires moderation rules to be configured in the Dashboard under **Moderation > Rules**
+
diff --git a/chat-builder/flutter/integration.mdx b/chat-builder/flutter/integration.mdx
index d2f18e7dc..066162b1d 100644
--- a/chat-builder/flutter/integration.mdx
+++ b/chat-builder/flutter/integration.mdx
@@ -1,72 +1,95 @@
---
-title: "Getting Started With UI Kit Builder"
+title: "UI Kit Builder Integration"
sidebarTitle: "Integration"
+description: "Step-by-step guide to integrating CometChat's UI Kit Builder into your Flutter application."
---
-UI Kit Builder streamlines integrating CometChat’s Flutter UI Kit into your cross-platform app. Design the experience visually, export platform-ready assets, and connect them to your Flutter project with just a few steps.
+UI Kit Builder streamlines integrating CometChat's Flutter UI Kit into your cross-platform app. Design the experience visually, export platform-ready assets, and connect them to your Flutter project with just a few steps.
-## Complete Integration Workflow
+---
-1. Design your chat experience in UI Kit Builder.
-2. Export your Flutter package with configuration JSON, assets, and helper files.
-3. Enable advanced features in the CometChat Dashboard if your experience requires them.
-4. Optionally explore the sample module to preview the UI Kit Builder experience.
-5. Integrate the UI Kit Builder module into your Flutter project.
-6. Customize the UI further with the Flutter UI Kit components and styling APIs.
+## Prerequisites
-***
+Before running this project, make sure you have:
-## Launch the UI Kit Builder
+- **Flutter SDK** (stable channel) with Dart 3+
+- **macOS, Windows, or Linux** with Flutter tooling (Android Studio, VS Code, or IntelliJ)
+- **For iOS builds**: Xcode, CocoaPods, and an iOS 13+ simulator or device
+- **For Android builds**: Android Studio and an Android 5.0 (API 21)+ emulator or device
+- **Internet connection** (required for CometChat services)
-1. Log in to your CometChat Dashboard: https://app.cometchat.com
-2. Select your application.
-3. Go to Integrate → Flutter → Launch UI Kit Builder.
+---
-***
+## Platform Requirements
-## Enable Features in CometChat Dashboard
+### iOS
-If your app needs any of these, enable them from your Dashboard: https://app.cometchat.com
+Update your `Podfile` and set the iOS platform to 13.0 or higher:
-- Stickers
-- Polls
-- Collaborative whiteboard
-- Collaborative document
-- Message translation
-- AI User Copilot: Conversation starter, Conversation summary, Smart reply
+```ruby
+platform :ios, '13.0'
+```
-How to enable:
+### Android
-
-
-
+Change the `ndkVersion` and `minSdk` in your `android/app/build.gradle.kts`:
-1. Log in to the Dashboard.
-2. Select your app.
-3. Navigate to Chat → Features.
-4. Toggle ON the required features and Save.
+```kotlin
+android {
+ // Other Settings
+ ndkVersion = "27.0.12077973"
+
+ defaultConfig {
+ // Other Settings
+ minSdk = 24
+ }
+}
+```
+
+---
+
+## Complete Integration Workflow
+
+1. **Design Your Chat Experience** - Use the UI Kit Builder to customize layouts, features, and styling.
+2. **Review and Export** - Review which features will be enabled in your Dashboard, toggle them on/off, and download the generated code package.
+3. **Preview Customizations** - Optionally, preview the chat experience before integrating it into your project.
+4. **Integration** - Integrate into your existing application using the Module Import method.
+5. **Customize Further** - Explore advanced customization options to tailor the chat experience.
+
+---
-***
+## Launch the UI Kit Builder
+
+1. Log in to your [CometChat Dashboard](https://app.cometchat.com).
+2. Select your application from the list.
+3. Navigate to **Integrate** → **Flutter** → **Launch UI Kit Builder**.
+
+---
## Integration with CometChat UI Kit Builder
Follow these steps to wire the Builder output into your existing Flutter app.
-### Step 1: Download the Builder package
+### Step 1: Download the Builder Package
-From the Dashboard export, download the Flutter Builder bundle. Inside you will find a `chat_builder` module, assets, and helper utilities.
+Download the Chat Builder app from the CometChat Dashboard. Inside you will find a `chat_builder` module, assets, and helper utilities.
-### Step 2: Add the Builder module to your project
+### Step 2: Add the Builder Module to Your Project
-Copy the `chat_builder` directory into the root of your Flutter project (for example, next to your `lib`, `ios`, and `android` folders).
+Copy the `chat_builder` project directory and paste it in your app's root directory (next to your `lib`, `ios`, and `android` folders).
-### Step 3: Copy Builder assets
+### Step 3: Copy Builder Assets
-Move the contents of `chat_builder/assets/` into your app’s `assets/` directory. Keep the folder structure intact so fonts, JSON files, and images resolve correctly.
+Copy all the contents from the assets directory of the `chat_builder` and add it to your project assets:
+
+- **Source:** `chat_builder/assets/`
+- **Destination:** `assets/`
+
+Keep the folder structure intact so fonts, JSON files, and images resolve correctly.
### Step 4: Update `pubspec.yaml`
@@ -106,9 +129,11 @@ flutter:
- asset: assets/fonts/times_new_roman_bold.otf
```
-Ensure indentation is consistent—Flutter’s asset and font declarations are whitespace sensitive.
+
+ Ensure indentation is consistent—Flutter's asset and font declarations are whitespace sensitive.
+
-### Step 5: Install dependencies
+### Step 5: Install Dependencies
Run the following commands at the root of your project:
@@ -117,11 +142,9 @@ flutter pub get
cd ios && pod install
```
-If your project uses scripting for iOS installs, adapt the second command accordingly.
+### Step 6: Initialize Builder Settings
-### Step 6: Initialize Builder settings before `runApp`
-
-Import the helper from the Builder module and load settings during app startup:
+In the main file of your project, add the following lines before `runApp()`:
```dart
import 'package:flutter/widgets.dart';
@@ -136,102 +159,131 @@ Future main() async {
This ensures generated constants, themes, and resources are ready when your widgets build.
-### Step 7: Launch UI Kit Builder screens as needed
+### Step 7: Launch UI Kit Builder Screens
Use the `ChatBuilder` APIs to open preconfigured experiences.
-- If CometChat is **not initialized** or the user is **not logged in**:
+**If CometChat is not initialized or user is not logged in:**
+
+```dart
+import 'package:chat_builder/chat_builder.dart';
+
+ChatBuilder.launchBuilder(context);
+```
- ```dart
- import 'package:chat_builder/chat_builder.dart';
+**If CometChat is initialized and user is logged in:**
- ChatBuilder.launchBuilder(context);
- ```
+Open Messages screen for a User:
-- If CometChat is initialized and the user is logged in:
+```dart
+ChatBuilder.launchMessages(
+ context: context,
+ user: user, // instance of CometChatUser
+);
+```
- ```dart
- ChatBuilder.launchMessages(
- context: context,
- user: user, // instance of CometChatUser
- );
+Open Messages screen for a Group:
- ChatBuilder.launchMessages(
- context: context,
- group: group, // instance of CometChatGroup
- );
- ```
+```dart
+ChatBuilder.launchMessages(
+ context: context,
+ group: group, // instance of CometChatGroup
+);
+```
-### Step 8: Refresh settings after configuration updates
+### Step 8: Refresh Settings After Updates
Whenever you export a new Builder configuration, replace the generated JSON, fonts, and assets in your project, then rerun `flutter pub get` to pick up changes.
-***
+---
-## Available Builder Settings Categories
+## Enable Features in CometChat Dashboard
-- Core Messaging Experience — typing indicators, attachments, media, polls.
-- Deeper User Engagement — reactions, message translation, stickers, extensions.
-- AI User Copilot — smart replies, conversation starters, summaries.
-- Group Management — creation, roles, member controls.
-- Moderator Controls — kick, ban, mute, report workflows.
-- Voice & Video Calling — one-to-one and group calling toggles.
-- Layout & Styling — colors, fonts, corner radii, spacing.
+If your app needs any of these features, enable them from your [Dashboard](https://app.cometchat.com):
-***
+- Stickers
+- Polls
+- Collaborative whiteboard
+- Collaborative document
+- Message translation
+- AI User Copilot: Conversation starter, Conversation summary, Smart reply
-## Benefits of Using CometChat UI Kit Builder
+**How to enable:**
-- Easy configuration: Update experiences without touching Flutter code.
-- Type-safe constants: Generated Dart helpers keep settings discoverable.
-- Consistent styling: Centralized theming across modules.
-- Feature toggling: Enable or disable capabilities dynamically.
-- Faster iteration: Designers and developers stay aligned via visual config.
+
+
+
-***
+1. Log in to the Dashboard.
+2. Select your app.
+3. Navigate to **Chat → Features**.
+4. Toggle ON the required features and Save.
-## Alternative: Import the CometChatBuilder Sample App as a Module
+---
-Prefer a plug-and-play starting point? Import the preconfigured sample module to explore the experience before wiring it into production.
+## Important Guidelines for Changes
-1. Download the sample from the CometChat Dashboard.
-2. Open the sample in your IDE and run `flutter pub get` followed by `flutter run` to preview the flows.
-3. When ready, add the sample module to your workspace and reference it from your main app via `path` dependencies.
-4. Gradually migrate screens or copy utilities (like `BuilderSettingsHelper`) into your production package.
+
+**Functional Changes:**
+For enabling or disabling features and adjusting configurations, update the `BuilderSettingsHelper` or modify the configuration JSON. This controls all feature flags and configuration constants.
+
-***
+
+**UI and Theme-related Changes:**
+For any updates related to UI, such as colors, fonts, and styles, modify the theme configuration in the Builder or update the `pubspec.yaml` font definitions.
+
-## Run the App
+---
-After integrating the module, run your Flutter project on an emulator or device:
+## Troubleshooting
-```bash
-flutter run
-```
+### Builder Package Not Found
-Ensure a CometChat user is created and logged in via your authentication flow before launching message screens.
+- Confirm the `chat_builder` directory path in `pubspec.yaml` is correct
+- Ensure the module is at the root level of your project
-***
+### Assets Missing at Runtime
-## Additional Notes
+- Verify the asset paths in `pubspec.yaml`
+- Rerun `flutter pub get` after any changes
-- Keep the Builder assets in sync with the latest export whenever you change configuration in the dashboard.
-- Fonts supplied by the Builder can be swapped for your brand fonts—update the font family definitions in `pubspec.yaml`.
-- For macOS or web targets, guard Builder-specific code with platform checks until those exports are supported.
+### iOS Build Issues
-***
+- Make sure you ran `pod install` inside the `ios` directory after adding the new dependency
+- Check that the iOS platform version in `Podfile` is 13.0 or higher
-## Troubleshooting
+### Undefined Symbols
-- Builder package not found: Confirm the `chat_builder` directory path in `pubspec.yaml` is correct.
-- Assets missing at runtime: Verify the asset paths in `pubspec.yaml` and rerun `flutter pub get`.
-- iOS build issues: Make sure you ran `pod install` inside the `ios` directory after adding the new dependency.
-- Undefined symbols: Reimport or regenerate the `BuilderSettingsHelper` if package paths changed.
+- Reimport or regenerate the `BuilderSettingsHelper` if package paths changed
+- Clean and rebuild: `flutter clean && flutter pub get`
-***
+---
## Next Steps
-- Customize theming with the Flutter UI Kit: [Theme introduction](/ui-kit/flutter/theme-introduction)
-- Explore available components: [Components overview](/ui-kit/flutter/components-overview)
-- Dig into API usage: [Methods & APIs](/ui-kit/flutter/methods)
+
+
+ Understand the settings file and feature toggles.
+
+
+ Adjust component props, behavior, and UI elements.
+
+
+ See how the exported code is organized.
+
+
+ Customize colors, typography, and styling to match your brand.
+
+
diff --git a/chat-builder/flutter/overview.mdx b/chat-builder/flutter/overview.mdx
index a0ca9b739..0cc1899c0 100644
--- a/chat-builder/flutter/overview.mdx
+++ b/chat-builder/flutter/overview.mdx
@@ -1,133 +1,139 @@
---
title: "CometChat UI Kit Builder For Flutter"
sidebarTitle: "Overview"
+description: "CometChat UI Kit Builder for Flutter is a visual development tool that helps you design and configure chat experiences for Flutter applications without building the interface from scratch."
---
-The CometChat UI Kit Builder for Flutter helps you deliver a polished chat experience across iOS and Android with prebuilt, customizable UI. Configure features visually, export ready-to-use assets, and plug everything into your Flutter project with minimal boilerplate.
+It provides a set of prebuilt, production-ready messaging components backed by CometChat's real-time infrastructure.
-***
+With CometChat UI Kit Builder, you can:
-## Prerequisites
+- Configure chat and calling features
+- Apply theming and layout options
+- Export Flutter-ready code
-- Flutter SDK (stable channel) with Dart 3+
-- macOS, Windows, or Linux with Flutter tooling (Android Studio, VS Code, or IntelliJ)
-- For iOS builds: Xcode, CocoaPods, and an iOS 13+ simulator or device
-- For Android builds: Android Studio and an Android 5.0 (API 21)+ emulator or device
-- Internet connectivity for CometChat services
+The exported UI connects to CometChat's SDK and infrastructure, which manages message transport, sync, and backend scaling.
-***
+## What You Can Configure
-## Why Choose CometChat UI Kit Builder?
+Toggle these features on or off directly in the UI Kit Builder. For a full reference of each setting, see [UI Kit Builder Settings](/chat-builder/flutter/builder-settings).
-- Rapid integration: Export module-ready code and settings for Flutter.
-- Cross-platform: One configuration powers iOS and Android builds.
-- Customizable: Tune colors, typography, and feature toggles from the Builder.
-- Scalable: Backed by CometChat’s reliable messaging infrastructure.
+### Chat Features
-***
+| Category | Includes |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Core Messaging Experience | Typing indicators, threads, media sharing (photos, video, audio, files), edit & delete messages, read receipts, search, quoted replies, mark as unread |
+| Deeper User Engagement | Mentions, @all mentions, reactions, message translation, polls, collaborative whiteboard & document, voice notes, emojis, stickers, user & group info |
+| AI User Copilot | Conversation starters, conversation summaries, smart replies |
+| User Management | Friends-only mode |
+| Group Management | Create groups, add members, join/leave, delete groups, view members |
+| Moderation | Content moderation, report messages, kick/ban users, promote/demote members |
+| Private Messaging Within Groups | Direct messages between group members |
+| In-App Sounds | Incoming & outgoing message sounds |
-## Setup Options
+### Call Features
-Choose one of the following paths to integrate:
+| Category | Includes |
+| --------------------- | ------------------------------------------------------------------------------------ |
+| Voice & Video Calling | 1:1 voice calling, 1:1 video calling, group voice conference, group video conference |
-
-
- Copy the generated Builder module into your Flutter project and load settings from assets.
-
+### Layout
-
- Import the sample module for a plug-and-play experience, then migrate features into your main app.
-
-
+| Category | Includes |
+| -------- | --------------------------------------- |
+| Sidebar | With Sidebar or Without Sidebar mode |
+| Tabs | Conversations, Call Logs, Users, Groups |
-***
+### Theming
-## User Interface Preview
+| Category | Includes |
+| ---------- | ----------------------------------------------------------- |
+| Theme | System, Light, or Dark mode |
+| Colors | Brand color, primary & secondary text colors (light & dark) |
+| Typography | Font family, text sizing (default, compact, comfortable) |
-
-
-
+---
-***
+## How to Use UI Kit Builder
-## Try Live Demo
+### 1. Design
-Experience the CometChat UI Kit Builder in action:
+Configure your chat layout, toggle features, and pick a theme using the UI Kit Builder.
-
+
+
+
-
+### 2. Export
-
+Click **Export Code** to generate a production-ready Flutter module based on your configuration.
-***
+### 3. Integrate
-## Integration
+Drop the exported module into your Flutter project, add your CometChat credentials, and run the app. See the [Integration Guide](/chat-builder/flutter/integration) for full steps.
-A ready-to-use chat experience configured in the Builder and powered by our Flutter UI Kit.
-
-**How It Works**
+---
-- Toggle features such as reactions, polls, message translation, calling, and more.
-- Export code, assets, and configuration JSON for your Flutter project.
-- Iterate quickly without rewriting UI or state management.
+## Try Live Demo
-**Why It’s Great**
+Experience the CometChat UI Kit Builder in action:
-- Minimal setup with reusable modules.
-- Visual configuration keeps design and engineering aligned.
-- Includes sensible defaults for typography, colors, and layout.
+
+
+
-***
+---
-## Next Steps for Developers
+## Next Steps
-1. Learn the basics — Key Concepts: [Key Concepts](/fundamentals/key-concepts)
-2. Follow the setup guide — Chat UI Kit Builder (Flutter): [Integration](/chat-builder/flutter/integration)
-3. Customize UI — Theme and components: [Theme introduction](/ui-kit/flutter/theme-introduction), [Components overview](/ui-kit/flutter/components-overview)
-4. Test & ship — Run on device/emulator and deploy.
+
+
+ Step-by-step guide to integrate the UI Kit Builder.
+
+
+ Understand the settings file and feature toggles.
+
+
+ Adjust component props, behavior, and UI elements.
+
+
+ See how the exported code is organized.
+
+
-***
+---
## Helpful Resources
-Explore these resources to go deeper with CometChat on Flutter.
-
-
-
-
- Try the fully featured Flutter sample for reference implementations.
-
-
-
-
-
- Explore the complete Flutter UI Kit source code.
-
-
-
-
-
- Configure features, manage users, and launch the UI Kit Builder.
-
-
-
+
+ Try the fully featured Flutter sample for reference implementations.
+
+
+ Explore the complete Flutter UI Kit source code.
+
+
+ Configure features, manage users, and launch the UI Kit Builder.
+
-***
+---
## Need Help?
diff --git a/chat-builder/ios/builder-customisations.mdx b/chat-builder/ios/builder-customisations.mdx
new file mode 100644
index 000000000..52327f261
--- /dev/null
+++ b/chat-builder/ios/builder-customisations.mdx
@@ -0,0 +1,305 @@
+---
+title: "Customizing Your UI Kit Builder"
+sidebarTitle: "Customizations"
+description: "Customize CometChat UI Kit Builder components — modify props, styling, and behavior for iOS."
+---
+
+The `CometChatBuilderSettings` object handles feature toggles and styling configuration. For deeper customizations, you can access settings directly and apply them to CometChat UI components.
+
+---
+
+## Understanding the Customization Architecture
+
+The iOS UI Kit Builder uses the following for customization:
+
+| Component | Purpose | When to Modify |
+| --------- | ------- | -------------- |
+| `CometChatBuilderSettings` | Feature flags and configuration loaded from JSON | Functional changes (enable/disable features) |
+| `CometChatTheme` | Theme colors and styling | UI/visual changes (colors) |
+| `CometChatTypography` | Font family and text styling | Typography changes |
+
+
+ `CometChatBuilderSettings` is loaded from your `cometchat-builder-settings.json` file at app launch using `CometChatBuilderSettings.loadFromJSON()`.
+
+
+---
+
+## Applying Theme Settings
+
+Apply your Builder configuration to CometChat theme at app launch:
+
+```swift
+import CometChatBuilder
+
+func application(_ application: UIApplication,
+ didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+
+ // Load JSON config
+ CometChatBuilderSettings.loadFromJSON()
+
+ // Apply brand color
+ CometChatTheme.primaryColor = UIColor.dynamicColor(
+ lightModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.brandColor),
+ darkModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.brandColor)
+ )
+
+ // Apply text colors
+ CometChatTheme.textColorPrimary = UIColor.dynamicColor(
+ lightModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.primaryTextLight),
+ darkModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.primaryTextDark)
+ )
+
+ CometChatTheme.textColorSecondary = UIColor.dynamicColor(
+ lightModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.secondaryTextLight),
+ darkModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.secondaryTextDark)
+ )
+
+ // Apply typography
+ CometChatTypography.customFontFamilyName = CometChatBuilderSettings.shared.style.typography.font
+
+ return true
+}
+```
+
+---
+
+## Accessing Feature Flags
+
+You can access feature flags directly from `CometChatBuilderSettings.shared`:
+
+### Chat Features
+
+```swift
+import CometChatBuilder
+
+// Core Messaging Experience
+let typingEnabled = CometChatBuilderSettings.shared.chatFeatures.coreMessagingExperience.typingIndicator
+let threadsEnabled = CometChatBuilderSettings.shared.chatFeatures.coreMessagingExperience.threadConversationAndReplies
+let photosEnabled = CometChatBuilderSettings.shared.chatFeatures.coreMessagingExperience.photosSharing
+
+// Deeper User Engagement
+let mentionsEnabled = CometChatBuilderSettings.shared.chatFeatures.deeperUserEngagement.mentions
+let reactionsEnabled = CometChatBuilderSettings.shared.chatFeatures.deeperUserEngagement.reactions
+let pollsEnabled = CometChatBuilderSettings.shared.chatFeatures.deeperUserEngagement.polls
+
+// AI User Copilot
+let smartReplyEnabled = CometChatBuilderSettings.shared.chatFeatures.aiUserCopilot.smartReply
+let conversationStarterEnabled = CometChatBuilderSettings.shared.chatFeatures.aiUserCopilot.conversationStarter
+
+// Group Management
+let createGroupEnabled = CometChatBuilderSettings.shared.chatFeatures.groupManagement.createGroup
+let deleteGroupEnabled = CometChatBuilderSettings.shared.chatFeatures.groupManagement.deleteGroup
+
+// Moderator Controls
+let kickUsersEnabled = CometChatBuilderSettings.shared.chatFeatures.moderatorControls.kickUsers
+let banUsersEnabled = CometChatBuilderSettings.shared.chatFeatures.moderatorControls.banUsers
+```
+
+### Call Features
+
+```swift
+// Voice and Video Calling
+let voiceCallEnabled = CometChatBuilderSettings.shared.callFeatures.voiceAndVideoCalling.oneOnOneVoiceCalling
+let videoCallEnabled = CometChatBuilderSettings.shared.callFeatures.voiceAndVideoCalling.oneOnOneVideoCalling
+let groupVideoEnabled = CometChatBuilderSettings.shared.callFeatures.voiceAndVideoCalling.groupVideoConference
+let groupVoiceEnabled = CometChatBuilderSettings.shared.callFeatures.voiceAndVideoCalling.groupVoiceConference
+```
+
+### Layout Settings
+
+```swift
+// Layout
+let withSidebar = CometChatBuilderSettings.shared.layout.withSideBar
+let tabs = CometChatBuilderSettings.shared.layout.tabs
+let chatType = CometChatBuilderSettings.shared.layout.chatType
+```
+
+### Style Settings
+
+```swift
+// Style
+let theme = CometChatBuilderSettings.shared.style.theme
+let brandColor = CometChatBuilderSettings.shared.style.color.brandColor
+let font = CometChatBuilderSettings.shared.style.typography.font
+let fontSize = CometChatBuilderSettings.shared.style.typography.size
+```
+
+---
+
+## Conditional Feature Implementation
+
+Use feature flags to conditionally show/hide UI elements:
+
+```swift
+import CometChatBuilder
+
+class MessagesViewController: UIViewController {
+
+ override func viewDidLoad() {
+ super.viewDidLoad()
+
+ // Conditionally show voice call button
+ if CometChatBuilderSettings.shared.callFeatures.voiceAndVideoCalling.oneOnOneVoiceCalling {
+ setupVoiceCallButton()
+ }
+
+ // Conditionally show video call button
+ if CometChatBuilderSettings.shared.callFeatures.voiceAndVideoCalling.oneOnOneVideoCalling {
+ setupVideoCallButton()
+ }
+
+ // Conditionally enable reactions
+ if CometChatBuilderSettings.shared.chatFeatures.deeperUserEngagement.reactions {
+ enableReactions()
+ }
+ }
+}
+```
+
+---
+
+## Customizing Colors Programmatically
+
+You can customize colors beyond the JSON configuration:
+
+```swift
+import CometChatUIKitSwift
+
+// Override primary color
+CometChatTheme.primaryColor = UIColor.systemBlue
+
+// Override text colors
+CometChatTheme.textColorPrimary = UIColor.dynamicColor(
+ lightModeColor: .black,
+ darkModeColor: .white
+)
+
+CometChatTheme.textColorSecondary = UIColor.dynamicColor(
+ lightModeColor: .gray,
+ darkModeColor: .lightGray
+)
+
+// Override background colors
+CometChatTheme.backgroundColor01 = UIColor.dynamicColor(
+ lightModeColor: .white,
+ darkModeColor: .black
+)
+```
+
+---
+
+## Customizing Typography
+
+Customize fonts and text styling:
+
+```swift
+import CometChatUIKitSwift
+
+// Set custom font family
+CometChatTypography.customFontFamilyName = "Helvetica"
+
+// Or use system fonts
+CometChatTypography.customFontFamilyName = nil // Uses system default
+```
+
+---
+
+## Component-Level Customizations
+
+### Message List Configuration
+
+```swift
+import CometChatUIKitSwift
+
+let messageListConfiguration = MessageListConfiguration()
+
+// Configure based on Builder settings
+if CometChatBuilderSettings.shared.chatFeatures.coreMessagingExperience.threadConversationAndReplies {
+ messageListConfiguration.showThreadReplies = true
+}
+
+if CometChatBuilderSettings.shared.chatFeatures.deeperUserEngagement.reactions {
+ messageListConfiguration.showReactions = true
+}
+
+let messagesVC = CometChatMessages()
+messagesVC.set(messageListConfiguration: messageListConfiguration)
+```
+
+### Message Composer Configuration
+
+```swift
+import CometChatUIKitSwift
+
+let composerConfiguration = MessageComposerConfiguration()
+
+// Configure attachments based on Builder settings
+composerConfiguration.hideAttachmentButton = !(
+ CometChatBuilderSettings.shared.chatFeatures.coreMessagingExperience.photosSharing ||
+ CometChatBuilderSettings.shared.chatFeatures.coreMessagingExperience.videoSharing ||
+ CometChatBuilderSettings.shared.chatFeatures.coreMessagingExperience.fileSharing
+)
+
+if CometChatBuilderSettings.shared.chatFeatures.deeperUserEngagement.voiceNotes {
+ composerConfiguration.hideVoiceRecording = false
+}
+
+let messagesVC = CometChatMessages()
+messagesVC.set(messageComposerConfiguration: composerConfiguration)
+```
+
+---
+
+## Modifying the JSON Configuration
+
+To change feature settings, edit your `cometchat-builder-settings.json` file:
+
+```json
+{
+ "settings": {
+ "chatFeatures": {
+ "coreMessagingExperience": {
+ "typingIndicator": true,
+ "photosSharing": false, // Disable photo sharing
+ "videoSharing": false // Disable video sharing
+ },
+ "deeperUserEngagement": {
+ "reactions": true,
+ "polls": false // Disable polls
+ }
+ },
+ "style": {
+ "theme": "dark", // Force dark mode
+ "color": {
+ "brandColor": "#FF5733" // Custom brand color
+ }
+ }
+ }
+}
+```
+
+
+ Changes to the JSON file require rebuilding the app to take effect.
+
+
+---
+
+## Next Steps
+
+
+
+ Understand all available feature toggles and configuration options.
+
+
+ Explore all available UI components and their customization options.
+
+
+ Deep dive into colors, typography, and advanced styling.
+
+
+ Understand how the exported code is organized.
+
+
diff --git a/chat-builder/ios/builder-dir-structure.mdx b/chat-builder/ios/builder-dir-structure.mdx
new file mode 100644
index 000000000..3927d0e3a
--- /dev/null
+++ b/chat-builder/ios/builder-dir-structure.mdx
@@ -0,0 +1,197 @@
+---
+title: "Directory Structure"
+sidebarTitle: "Directory Structure"
+description: "Overview of the CometChat UI Kit Builder directory layout for iOS — understand where to find and customize components, settings, and styles."
+---
+
+The exported UI Kit Builder code is organized in a standard iOS project structure. This guide helps you navigate the structure so you know exactly where to make changes.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+---
+
+## Root Files
+
+| File | Purpose |
+| ---- | ------- |
+| `AppDelegate.swift` | App lifecycle, CometChat initialization, and Builder settings loading |
+| `SceneDelegate.swift` | Scene lifecycle management for iOS 13+ |
+| `AppConstants.swift` | CometChat credentials (APP_ID, AUTH_KEY, REGION) |
+| `FrameworkManager.swift` | Helper for initializing CometChat framework |
+| `cometchat-builder-settings.json` | Builder configuration with feature flags, layout, and styling |
+
+---
+
+## Key Folders
+
+### `Assets.xcassets/`
+
+Contains all image and color assets for the app.
+
+
+
+
+
+
+
+
+
+
+### `Base.lproj/`
+
+Contains storyboards and localization base files.
+
+
+
+
+
+
+
+### `Helper/`
+
+Utility classes and Swift extensions.
+
+
+
+
+
+
+
+
+### `View Controllers/`
+
+All view controllers organized by feature.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+---
+
+## Configuration Files
+
+### `cometchat-builder-settings.json`
+
+The main configuration file containing all Builder settings:
+
+```json
+{
+ "builderId": "your-builder-id",
+ "settings": {
+ "chatFeatures": { ... },
+ "callFeatures": { ... },
+ "layout": { ... },
+ "style": { ... }
+ }
+}
+```
+
+### `AppConstants.swift`
+
+Contains CometChat credentials:
+
+```swift
+struct AppConstants {
+ static let APP_ID = "YOUR_APP_ID"
+ static let AUTH_KEY = "YOUR_AUTH_KEY"
+ static let REGION = "YOUR_REGION"
+}
+```
+
+---
+
+## Quick Reference: Where to Customize
+
+| What you want to change | Where to look |
+| ----------------------- | ------------- |
+| Enable/disable features | `cometchat-builder-settings.json` |
+| CometChat credentials | `AppConstants.swift` |
+| Theme colors & styles | `cometchat-builder-settings.json` → `style` section |
+| App icons | `Assets.xcassets/AppIcon.appiconset/` |
+| Launch screen | `Base.lproj/LaunchScreen.storyboard` |
+| Messages screen behavior | `View Controllers/CometChat Components/MessagesVC.swift` |
+| Login flow | `View Controllers/LoginVC/` |
+| Home screen layout | `View Controllers/HomeScreenViewController.swift` |
+| Custom UI extensions | `Helper/Extentions.swift` |
+
+
+ Prefer using `cometchat-builder-settings.json` for feature toggles and styling. For extensive changes, extend existing view controllers instead of modifying core files directly.
+
+
+---
+
+## CometChat Components
+
+The `CometChat Components` folder contains wrappers around CometChat UI Kit components:
+
+| Component | File | Purpose |
+| --------- | ---- | ------- |
+| Messages | `MessagesVC.swift` | Main messaging interface |
+| Threaded Messages | `ThreadedMessagesVC.swift` | Thread view for replies |
+| Create Conversation | `CreateConversations.swift` | Start new conversations |
+| Add Members | `Add Members/` | Add users to groups |
+| Banned Members | `Banned Members/` | View/manage banned users |
+| Call Log Details | `Call Log Details/` | Call history details |
+| Details Page | `DetailsPage/` | User/Group profile details |
+| Group Component | `Group Component/` | Group management views |
+| Transfer Ownership | `Transfer ownership/` | Transfer group ownership |
+
+---
+
+## Next Steps
+
+
+
+ Configure feature toggles and behavior
+
+
+ Modify component props, styling, and behavior
+
+
+ Customize colors, typography, and styling
+
+
+ Explore all available UI components
+
+
diff --git a/chat-builder/ios/builder-settings.mdx b/chat-builder/ios/builder-settings.mdx
new file mode 100644
index 000000000..77b859299
--- /dev/null
+++ b/chat-builder/ios/builder-settings.mdx
@@ -0,0 +1,337 @@
+---
+title: "UI Kit Builder Settings"
+sidebarTitle: "UI Kit Builder Settings"
+description: "Comprehensive reference for all CometChatBuilderSettings options in the iOS UI Kit Builder."
+---
+
+The `CometChatBuilderSettings` object controls everything the iOS UI Kit Builder renders—messaging, AI helpers, calls, layout, theming, and more. This object is loaded from your `cometchat-builder-settings.json` configuration file.
+
+
+ **For developers customizing their chat UI**: Edit `cometchat-builder-settings.json` to enable/disable features like messaging, calls, AI copilot, and theming. See the [Integration Guide](/chat-builder/ios/integration) for setup.
+
+
+## Top-level Structure
+
+The `CometChatBuilderSettings` object in Swift follows this structure:
+
+```swift
+CometChatBuilderSettings.shared.chatFeatures
+CometChatBuilderSettings.shared.callFeatures
+CometChatBuilderSettings.shared.layout
+CometChatBuilderSettings.shared.style
+```
+
+---
+
+
+All boolean settings follow the same pattern: `true` enables the feature and shows its UI elements, `false` hides them completely.
+
+
+## 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 |
+| Moderation (`moderation`) | boolean | Enables blocked message feedback for messages blocked by moderation rules |
+| 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 |
+
+### 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 |
+
+### 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 |
+
+
+AI User Copilot features require an OpenAI API key. Configure it in the [CometChat Dashboard](https://app.cometchat.com) under **AI > Settings**.
+
+
+### 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 Moderator Controls (`moderatorControls`)
+
+Admin tools for managing group members and content.
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| 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) |
+
+### 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 |
+
+---
+
+## 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 |
+
+---
+
+## 3. Layout (`layout`)
+
+Control the overall UI structure and navigation.
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| With Sidebar (`withSideBar`) | boolean | Shows navigation bar with tabs (Chats, Calls, Users, Groups) |
+| 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 |
+
+---
+
+## 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) |
+
+### 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: `"#141414"` |
+| 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"` |
+
+### 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 your `cometchat-builder-settings.json` file to customize your chat experience.
+
+```json
+{
+ "builderId": "your-builder-id",
+ "settings": {
+ "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"
+ }
+ }
+ }
+}
+```
+
+---
+
+## Dashboard Feature Requirements
+
+Some features require additional configuration in the [CometChat Dashboard](https://app.cometchat.com) before they can be used:
+
+
+**AI Copilot Features** (Conversation Starter, Conversation Summary, Smart Reply)
+- Requires an OpenAI API key configured in the Dashboard under **AI > Settings**
+
+
+
+**Stickers**
+- Requires sticker packs to be configured in the Dashboard under **Chat & Messaging > Stickers**
+
+
+
+**Polls**
+- Requires the Polls extension to be enabled in the Dashboard under **Extensions > Polls**
+
+
+
+**Collaborative Whiteboard & Document**
+- Requires the respective extensions to be enabled in the Dashboard under **Extensions**
+
+
+
+**Message Translation**
+- Requires the Message Translation extension to be enabled in the Dashboard under **Extensions > Message Translation**
+
+
+---
+
+## Next Steps
+
+
+
+ Understand the organization of the builder components and generated code.
+
+
+ Modify component props, styling, and behavior for deeper customization.
+
+
diff --git a/chat-builder/ios/integration.mdx b/chat-builder/ios/integration.mdx
index f51a89b6f..1c9eeb6ab 100644
--- a/chat-builder/ios/integration.mdx
+++ b/chat-builder/ios/integration.mdx
@@ -1,149 +1,298 @@
---
-title: "Getting Started With UI Kit Builder"
+title: "UI Kit Builder Integration"
sidebarTitle: "Integration"
+description: "Step-by-step guide to integrating CometChat's UI Kit Builder into your iOS application using UI Kit Builder configuration."
---
-UI Kit Builder simplifies integrating CometChat’s iOS UI Kit using Visual UI Kit Builder configuration. Design your experience, export settings, and wire them into your app via JSON or QR‑based live sync.
+This guide demonstrates how to integrate the **CometChat UI Kit Builder** configuration system into your iOS application. The configuration can be loaded into your app using a local JSON file.
-
+ 
+---
+
+## Prerequisites
+
+Before running this project on iOS, make sure you have:
+
+- **Xcode** (latest version recommended)
+- **macOS device** with macOS 12.0 or above
+- **iOS Device or Simulator** with iOS 13.0 or above
+- **CocoaPods** (latest version installed)
+- **Internet connection** (required for CometChat services)
+
+---
+
## Complete Integration Workflow
-1. Design your chat experience in UI Kit Builder.
-2. Export your code/settings or connect via QR.
-3. Enable extra features in the CometChat Dashboard if needed.
-4. Optionally preview on device/simulator.
-5. Integrate into your Xcode project.
-6. Customize further with UI Kit styling and components.
+1. **Download the Project** - Download the project zip from the CometChat Dashboard and extract it.
+2. **Install Dependencies** - Install CocoaPods dependencies.
+3. **Configure Settings** - Load UI Kit Builder settings from JSON file.
+4. **Build & Run** - Build and run the project in Xcode.
-***
+---
## Launch the UI Kit Builder
-1. Log in to your CometChat Dashboard: https://app.cometchat.com
-2. Select your application.
-3. Go to Integrate → iOS → Launch UI Kit Builder.
+1. Log in to your [CometChat Dashboard](https://app.cometchat.com).
+2. Select your application from the list.
+3. Navigate to **Chat & Messaging** → **Get Started**.
+4. Navigate to **Integrate** → **iOS** → **Launch UI Kit Builder**.
-***
+---
-## Enable Features in CometChat Dashboard
+## Integration Options
-If your app needs any of these, enable them from your Dashboard: https://app.cometchat.com
+Choose one of the following integration methods based on your needs:
-- Stickers
-- Polls
-- Collaborative whiteboard
-- Collaborative document
-- Message translation
-- AI User Copilot: Conversation starter, Conversation summary, Smart reply
+| Option | Best For | Complexity |
+| ------ | -------- | ---------- |
+| **Run Sample App** | Quick preview and testing of Builder configurations | Easy |
+| **Integrate Config Store** (Recommended) | Production apps where you want full control over customization | Medium |
-How to enable:
+---
-
-
-
+## Option 1: Run the Sample App
-1. Log in to the Dashboard.
-2. Select your app.
-3. Navigate to Chat → Features.
-4. Toggle ON the required features and Save.
+### Setup
+
+### Step 1: Download and Extract Project
+
+Download the project zip from the CometChat Dashboard and extract it.
+
+### Step 2: Navigate to Project Folder
+
+```bash
+cd
+```
+
+### Step 3: Open Xcode Project
+
+Open the `.xcodeproj` file once to let Xcode configure the project.
+
+### Step 4: Install Dependencies
+
+Install dependencies using CocoaPods:
+
+```bash
+pod install
+```
+
+### Step 5: Open Workspace
+
+Open the `.xcworkspace` file instead of `.xcodeproj` from now on:
+
+```bash
+open .xcworkspace
+```
+
+### Step 6: Build & Run
+
+Build and run the project in Xcode.
+
+---
-***
+## Option 2: Integrate Builder Configuration into Your iOS App
-## Integration with CometChat UI Kit Builder (iOS)
+This method gives you full control over customization and is recommended for production apps.
-Installation and configuration options from README‑iOS:
+### Installation (CometChatBuilder)
-### Install the Builder package
+### CocoaPods
-
-
+Add to your `Podfile`:
```ruby
pod 'CometChatBuilder'
```
+Then run:
+
```bash
pod install
```
-
-
+### Swift Package Manager (SPM)
+
+1. Open your Xcode project.
+2. Go to **File → Add Packages**.
+3. Enter the URL of your Git repository (or local path) where `CometChatBuilder` code is hosted.
+4. Select the `CometChatBuilder` package and add it to your app target.
+
+---
+
+## Load Settings from JSON
+
+Use this method if you are shipping a `.json` configuration file with your app.
-1. In Xcode: File → Add Packages.
-2. Enter your repository URL (or local path) for `CometChatBuilder`.
-3. Add the package to your app target.
+### Step 1: Add Your JSON File
-
-
+Place your `cometchat-builder-settings.json` inside your app target and make sure:
-### Option 1: Load from JSON (no‑code)
+- It's added to your target membership.
-1. Add `cometchat-builder-settings.json` to your app target (ensure it’s in Target Membership).
-2. Load settings at launch:
+### Step 2: Load Settings at Launch
```swift
import CometChatBuilder
func application(_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
- CometChatBuilderSettings.loadFromJSON()
- return true
+
+ // This automatically loads JSON config
+ CometChatBuilderSettings.loadFromJSON()
+
+ CometChatTheme.primaryColor = UIColor.dynamicColor(
+ lightModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.brandColor),
+ darkModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.brandColor)
+ )
+
+ CometChatTheme.textColorPrimary = UIColor.dynamicColor(
+ lightModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.primaryTextLight),
+ darkModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.primaryTextDark)
+ )
+
+ CometChatTheme.textColorSecondary = UIColor.dynamicColor(
+ lightModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.secondaryTextLight),
+ darkModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.secondaryTextDark)
+ )
+
+ CometChatTypography.customFontFamilyName = CometChatBuilderSettings.shared.style.typography.font
+
+ return true
}
```
-### Option 2: Load via QR Code (live Builder sync)
+---
-1. Start scanning from a view controller to sync settings for the current device build:
+## Important Guidelines for Changes
-```swift
-import CometChatBuilder
+
+**Functional Changes:**
+For enabling or disabling features and adjusting configurations, update the `cometchat-builder-settings.json` file. This controls all feature flags and configuration constants.
+
-CometChatBuilder.startScanning(from: self) { appliedStyle in
- // Apply theme or reload UI if needed
- print("UI Kit Builder Style Applied:", appliedStyle.theme)
-}
-```
+
+**UI and Theme-related Changes:**
+For any updates related to UI, such as colors, fonts, and styles, modify the `CometChatTheme` and `CometChatTypography` properties in your AppDelegate.
+
-The SDK will open a QR scanner, fetch settings, and apply them. It handles loading UI and error fallbacks.
+---
-***
+## Enable Features in CometChat Dashboard
-## Run the App
+If your app needs any of these features, enable them from your [Dashboard](https://app.cometchat.com):
-Build and run on simulator or device from Xcode. Ensure your CometChat initialization and user login logic are in place in your app.
+- Stickers
+- Polls
+- Collaborative whiteboard
+- Collaborative document
+- Message translation
+- AI User Copilot: Conversation starter, Conversation summary, Smart reply
-***
+**How to enable:**
-## Understanding Your Builder Settings
+
+
+
-VCB configuration spans:
+1. Log in to the Dashboard.
+2. Select your app.
+3. Navigate to **Chat → Features**.
+4. Toggle ON the required features and Save.
+
+---
+
+## What You Can Configure
+
+Toggle these features on or off directly in the UI Kit Builder. For a full reference of each setting, see [UI Kit Builder Settings](/chat-builder/ios/builder-settings).
+
+### Chat Features
+
+| Category | Includes |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Core Messaging Experience | Typing indicators, threads, media sharing (photos, video, audio, files), edit & delete messages, read receipts, search, quoted replies, mark as unread |
+| Deeper User Engagement | Mentions, @all mentions, reactions, message translation, polls, collaborative whiteboard & document, voice notes, emojis, stickers, user & group info |
+| AI User Copilot | Conversation starters, conversation summaries, smart replies |
+| User Management | Friends-only mode |
+| Group Management | Create groups, add members, join/leave, delete groups, view members |
+| Moderation | Content moderation, report messages, kick/ban users, promote/demote members |
+| Private Messaging Within Groups | Direct messages between group members |
+| In-App Sounds | Incoming & outgoing message sounds |
+
+### Call Features
+
+| Category | Includes |
+| --------------------- | ------------------------------------------------------------------------------------ |
+| Voice & Video Calling | 1:1 voice calling, 1:1 video calling, group voice conference, group video conference |
-- Core messaging experience (typing, media sharing, replies)
-- Deeper user engagement (reactions, mentions, translation, polls)
-- AI User Copilot (smart replies, summaries, starters)
-- Group management
-- Moderator controls
-- Voice & video calling
-- Layout & styling (theme, typography, layout)
+### Layout
-***
+| Category | Includes |
+| -------- | --------------------------------------- |
+| Sidebar | With Sidebar or Without Sidebar mode |
+| Tabs | Conversations, Call Logs, Users, Groups |
+
+### Theming
+
+| Category | Includes |
+| ---------- | ----------------------------------------------------------- |
+| Theme | System, Light, or Dark mode |
+| Colors | Brand color, primary & secondary text colors (light & dark) |
+| Typography | Font family, text sizing (default, compact, comfortable) |
+
+---
## Troubleshooting
-- For JSON: ensure the file is included in your app bundle’s Target Membership.
-- For QR: confirm a valid code from the Builder and active network.
-- For SPM: confirm package resources are available to your target.
+### JSON File Not Found
+
+- Ensure your `cometchat-builder-settings.json` is added to the app bundle.
+- Confirm the file is included in your app target's Target Membership.
+
+### Network Errors
-If you need a reference app to compare against, see the iOS UI Kit Sample App:
-https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp
+- Network errors will fallback to user alerts.
+- Ensure you have an active internet connection.
-***
+### SPM Resource Issues
+
+- For SPM: make sure resources (images) are in `CometChatBuilder.bundle`.
+- Confirm package resources are available to your target.
+
+### QR Code Issues
+
+- Ensure your QR code is valid and generated from the official builder.
+- Confirm active network connectivity.
+
+---
## Next Steps
-- UI Kit Theme: [Theme introduction](/ui-kit/ios/theme-introduction)
-- Components Overview: [Components overview](/ui-kit/ios/overview)
-- Methods & APIs: [Methods & APIs](/ui-kit/ios/methods)
+
+
+ Understand the settings file and feature toggles.
+
+
+ Adjust component props, behavior, and UI elements.
+
+
+ See how the exported code is organized.
+
+
+ Customize colors, typography, and styling to match your brand.
+
+
diff --git a/chat-builder/ios/overview.mdx b/chat-builder/ios/overview.mdx
index 4eeca9a8e..dd30755b5 100644
--- a/chat-builder/ios/overview.mdx
+++ b/chat-builder/ios/overview.mdx
@@ -1,145 +1,101 @@
---
-title: "CometChat Builder For iOS"
+title: "CometChat UI Kit Builder For iOS"
sidebarTitle: "Overview"
+description: "CometChat UI Kit Builder for iOS provides a pre-built user interface that developers can use to quickly integrate a reliable & fully-featured chat experience into an existing or new iOS app."
---
-The CometChat Builder for iOS helps you deliver a complete chat experience quickly with prebuilt, customizable native UI. Configure features visually, export platform‑ready settings, and integrate them into your iOS app.
-
-***
-
-## Prerequisites
-
-- Xcode (latest recommended)
-- iOS 14+ target (or your project’s minimum supported iOS)
-- Swift 5.7+ (or compatible Swift toolchain)
-- CocoaPods or Swift Package Manager
-- Internet connectivity (for CometChat services)
-
-***
-
-## Why Choose CometChat Builder?
-
-- Rapid integration: Prebuilt native UI and generated settings.
-- Customizable: Theme, typography, and features via configuration.
-- Scalable: Backed by CometChat’s reliable chat infrastructure.
-- Native UX: Components built for iOS.
-
-***
-
-## Setup Options
-
-Choose one of the following paths to integrate:
-
-- **Load settings via Builder (recommended)**: Use the CometChatBuilder package and load settings via JSON or live QR sync.
-
-See: [Install the Builder package](/chat-builder/ios/integration#integration-with-cometchat-chat-builder-ios),
-
-
-
-Configure settings quickly by importing a JSON file, no coding required.
-
-
-
- Sync settings directly from the Builder using a live QR code.
-
-
-
-- **Start from the iOS Sample App**: Use the UI Kit sample to explore structure and patterns, then add the Builder package.
-
-See: [iOS Sample App](https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleApp)
-
-***
-
-## User Interface Preview
+The CometChat iOS UI Kit provides a pre-built user interface that developers can use to quickly integrate a reliable & fully-featured chat experience into an existing or new iOS app using **UI Kit Builder** configuration.
-***
-
-## Try Live Demo
-
-Experience the CometChat Builder in action:
-
-
-
-
-
-
-
-***
-
-## Integration
-
-Ship a ready‑to‑use chat experience configured in the Builder and powered by our iOS UI Kit.
+---
-**How It Works**
+## What is UI Kit Builder?
-- Toggle features like mentions, reactions, media uploads, polls, and more.
-- Export settings/styles and wire them into your iOS app.
-- Iterate quickly without large refactors.
+UI Kit Builder is CometChat's configuration system that allows you to customize chat features, UI components, and styling through a simple JSON configuration file. The configuration can be loaded into your app using a local JSON file.
-**Why It’s Great**
+---
-- Fastest setup with minimal wiring.
-- Visual configuration for continuous customization.
-- Reliable, pre‑assembled UI.
+## Builder Settings Categories
-***
+Your Builder configuration supports the following categories:
-## Next Steps for Developers
+| Category | Description |
+| -------- | ----------- |
+| Core Messaging Experience | Typing, media sharing, replies, etc. |
+| Deeper User Engagement | Reactions, mentions, translation, polls |
+| AI User Copilot | Smart replies, summaries, starters |
+| Group Management | Create/delete group, add members |
+| Moderator Controls | Ban/kick/promote members |
+| Voice & Video Calling | 1:1 and group calling support |
+| Layout & Styling | Theme, typography, layout mode |
-1. Learn the basics — Key Concepts: [Key Concepts](/fundamentals/key-concepts)
-2. Follow the setup guide — UI Kit Builder (iOS): [UI Kit Builder (iOS)](/chat-builder/ios/integration)
-3. Customize UI — Theme and components: [Theme introduction](/ui-kit/ios/theme-introduction), [Components overview](/ui-kit/ios/overview)
-4. Test & ship — Run on device/simulator and deploy.
+---
-***
+## Try Live Demo
-## Helpful Resources
+Experience the CometChat UI Kit Builder in action:
+
+
-
-
- Experience the power of CometChat UI Kit with this interactive app.
-
-
-
-
-
- Explore the complete iOS UI Kit source code.
-
- View on GitHub
-
-
-
-
-
- UI design resources for customization and prototyping.
-
- View on Figma
+---
-
+## Next Steps
+
+
+ Step-by-step instructions to integrate the UI Kit Builder into your iOS project.
+
+
+ Complete reference of all configuration options available in CometChatBuilderSettings.
+
+
+ Learn how to customize components and styling.
+
+
+ Understand the organization of the exported Builder code.
+
-***
-
-## Need Help?
+---
-- Developer Community: http://community.cometchat.com/
-- Support Portal: https://help.cometchat.com/hc/en-us/requests/new
+## Helpful Resources
+
+
+ Experience the power of CometChat UI Kit with this interactive app
+
+
+ Explore the complete iOS UI Kit source code
+
+
+ UI design resources for customization and prototyping
+
+
+ Get assistance from our support team with any questions or issues
+
+
\ No newline at end of file
diff --git a/chat-builder/react-native/builder-customisations.mdx b/chat-builder/react-native/builder-customisations.mdx
new file mode 100644
index 000000000..d51646bfb
--- /dev/null
+++ b/chat-builder/react-native/builder-customisations.mdx
@@ -0,0 +1,382 @@
+---
+title: "Customizing Your UI Kit Builder"
+sidebarTitle: "Customizations"
+description: "Customize CometChat UI Kit Builder components — modify props, styling, and behavior for React Native."
+---
+
+The `config.json` file handles basic feature toggles. For deeper customizations, modify the Zustand store, theme configuration, or component props directly.
+
+---
+
+## Understanding the Customization Architecture
+
+The React Native UI Kit Builder uses these main files for customization:
+
+| File | Purpose | When to Modify |
+| ---- | ------- | -------------- |
+| `config.json` | Feature flags and configuration constants | Functional changes (enable/disable features) |
+| `store.ts` | Zustand store for state management | Runtime configuration updates |
+| Theme object | Colors, typography, and styling | UI/visual changes |
+
+
+ The `config.json` file is the source of truth for your Builder configuration. You can update it manually or by scanning a QR code with new settings.
+
+
+---
+
+## Using the Configuration Store
+
+The Zustand store manages your Builder configuration at runtime. Access it anywhere in your app to read or update settings.
+
+### Reading Configuration
+
+```tsx
+import { useConfig } from './src/config/store';
+
+const MyComponent = () => {
+ // Access entire settings object
+ const settings = useConfig((state) => state.settings);
+
+ // Access specific feature category
+ const chatFeatures = useConfig((state) => state.settings.chatFeatures);
+
+ // Access style configuration
+ const styleConfig = useConfig((state) => state.settings.style);
+
+ return (/* ... */);
+};
+```
+
+### Updating Configuration at Runtime
+
+```tsx
+import { useConfigStore } from './src/config/store';
+
+// Update a specific setting
+const updateFeature = () => {
+ const store = useConfigStore.getState();
+ store.updateSettings({
+ ...store.settings,
+ chatFeatures: {
+ ...store.settings.chatFeatures,
+ coreMessagingExperience: {
+ ...store.settings.chatFeatures.coreMessagingExperience,
+ photosSharing: false,
+ },
+ },
+ });
+};
+```
+
+
+ Runtime changes to the store are not persisted by default. Use AsyncStorage to save and restore configurations.
+
+
+---
+
+## Theme Customization
+
+### Applying Builder Theme to UI Kit
+
+The Builder configuration includes style settings that should be applied to the CometChat UI Kit theme:
+
+```tsx
+import React from 'react';
+import { CometChatThemeProvider } from '@cometchat/chat-uikit-react-native';
+import { useConfig } from './src/config/store';
+
+const App = () => {
+ const styleConfig = useConfig((state) => state.settings.style);
+
+ const theme = {
+ light: {
+ color: {
+ primary: styleConfig.color.brandColor,
+ textPrimary: styleConfig.color.primaryTextLight,
+ textSecondary: styleConfig.color.secondaryTextLight,
+ background: '#FFFFFF',
+ border: '#E8E8E8',
+ },
+ typography: {
+ fontFamily: getFontFamily(styleConfig.typography.font),
+ },
+ },
+ dark: {
+ color: {
+ primary: styleConfig.color.brandColor,
+ textPrimary: styleConfig.color.primaryTextDark,
+ textSecondary: styleConfig.color.secondaryTextDark,
+ background: '#141414',
+ border: '#3D3D3D',
+ },
+ typography: {
+ fontFamily: getFontFamily(styleConfig.typography.font),
+ },
+ },
+ };
+
+ return (
+
+ {/* Your app components */}
+
+ );
+};
+```
+
+### Custom Color Palette
+
+Override the default colors by modifying the theme object:
+
+```tsx
+const customTheme = {
+ light: {
+ color: {
+ primary: '#FF6B6B', // Custom brand color
+ textPrimary: '#2D3436', // Custom primary text
+ textSecondary: '#636E72', // Custom secondary text
+ success: '#00B894', // Success state
+ error: '#D63031', // Error state
+ warning: '#FDCB6E', // Warning state
+ },
+ },
+ dark: {
+ color: {
+ primary: '#FF6B6B',
+ textPrimary: '#DFE6E9',
+ textSecondary: '#B2BEC3',
+ success: '#00B894',
+ error: '#FF7675',
+ warning: '#FFEAA7',
+ },
+ },
+};
+```
+
+---
+
+## Custom Font Integration
+
+### Step 1: Add Font Files
+
+Add your custom font files to the appropriate platform directories:
+
+- **iOS:** `ios//Resources/Fonts/`
+- **Android:** `android/app/src/main/assets/fonts/`
+
+### Step 2: Link Fonts (React Native CLI)
+
+For React Native CLI projects, create or update `react-native.config.js`:
+
+```js
+module.exports = {
+ assets: ['./assets/fonts'],
+};
+```
+
+Then run:
+
+```bash
+npx react-native-asset
+```
+
+### Step 3: Map Font Family
+
+Create a font mapping utility:
+
+```tsx
+import { Platform } from 'react-native';
+
+const FONT_MAP = {
+ 'roboto': {
+ regular: Platform.OS === 'ios' ? 'Roboto-Regular' : 'roboto_regular',
+ medium: Platform.OS === 'ios' ? 'Roboto-Medium' : 'roboto_medium',
+ bold: Platform.OS === 'ios' ? 'Roboto-Bold' : 'roboto_bold',
+ },
+ 'inter': {
+ regular: Platform.OS === 'ios' ? 'Inter-Regular' : 'inter_regular',
+ medium: Platform.OS === 'ios' ? 'Inter-Medium' : 'inter_medium',
+ bold: Platform.OS === 'ios' ? 'Inter-Bold' : 'inter_bold',
+ },
+ 'your-custom-font': {
+ regular: Platform.OS === 'ios' ? 'YourFont-Regular' : 'your_font_regular',
+ medium: Platform.OS === 'ios' ? 'YourFont-Medium' : 'your_font_medium',
+ bold: Platform.OS === 'ios' ? 'YourFont-Bold' : 'your_font_bold',
+ },
+};
+
+export const getFontFamily = (fontName: string) => {
+ return FONT_MAP[fontName] || FONT_MAP['roboto'];
+};
+```
+
+---
+
+## Component-Level Customizations
+
+### Conditional Rendering Based on Features
+
+Use the configuration store to conditionally render UI elements:
+
+```tsx
+import { useConfig } from './src/config/store';
+
+const MessageComposer = () => {
+ const chatFeatures = useConfig((state) => state.settings.chatFeatures);
+ const { coreMessagingExperience, deeperUserEngagement } = chatFeatures;
+
+ return (
+
+ {/* Always show text input */}
+
+
+ {/* Conditionally show attachment options */}
+ {coreMessagingExperience.photosSharing && (
+
+ )}
+
+ {coreMessagingExperience.fileSharing && (
+
+ )}
+
+ {deeperUserEngagement.voiceNotes && (
+
+ )}
+
+ {deeperUserEngagement.stickers && (
+
+ )}
+
+ );
+};
+```
+
+### Customizing Message Options
+
+Control which message options appear based on configuration:
+
+```tsx
+const MessageOptions = ({ message }) => {
+ const chatFeatures = useConfig((state) => state.settings.chatFeatures);
+ const { coreMessagingExperience, deeperUserEngagement, moderatorControls } = chatFeatures;
+
+ const options = [];
+
+ if (coreMessagingExperience.quotedReplies) {
+ options.push({ label: 'Reply', action: 'reply' });
+ }
+
+ if (coreMessagingExperience.threadConversationAndReplies) {
+ options.push({ label: 'Reply in Thread', action: 'thread' });
+ }
+
+ if (deeperUserEngagement.reactions) {
+ options.push({ label: 'React', action: 'react' });
+ }
+
+ if (coreMessagingExperience.editMessage && message.sender.uid === currentUser.uid) {
+ options.push({ label: 'Edit', action: 'edit' });
+ }
+
+ if (coreMessagingExperience.deleteMessage && message.sender.uid === currentUser.uid) {
+ options.push({ label: 'Delete', action: 'delete' });
+ }
+
+ if (moderatorControls.reportMessage) {
+ options.push({ label: 'Report', action: 'report' });
+ }
+
+ return ;
+};
+```
+
+---
+
+## Persisting Configuration
+
+### Save Configuration to AsyncStorage
+
+```tsx
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useConfigStore } from './src/config/store';
+
+const CONFIG_KEY = '@cometchat_builder_config';
+
+export const saveConfig = async () => {
+ try {
+ const config = useConfigStore.getState();
+ await AsyncStorage.setItem(CONFIG_KEY, JSON.stringify(config));
+ } catch (error) {
+ console.error('Failed to save config:', error);
+ }
+};
+
+export const loadConfig = async () => {
+ try {
+ const savedConfig = await AsyncStorage.getItem(CONFIG_KEY);
+ if (savedConfig) {
+ const parsed = JSON.parse(savedConfig);
+ useConfigStore.getState().updateConfig(parsed);
+ }
+ } catch (error) {
+ console.error('Failed to load config:', error);
+ }
+};
+```
+
+### Auto-save on Configuration Changes
+
+```tsx
+import { useEffect } from 'react';
+import { useConfigStore } from './src/config/store';
+
+const ConfigPersistence = () => {
+ const config = useConfigStore((state) => state);
+
+ useEffect(() => {
+ // Debounce saves to avoid excessive writes
+ const timeoutId = setTimeout(() => {
+ saveConfig();
+ }, 1000);
+
+ return () => clearTimeout(timeoutId);
+ }, [config]);
+
+ return null;
+};
+```
+
+---
+
+## Layout Customization
+
+### Dynamic Tab Configuration
+
+```tsx
+import { useConfig } from './src/config/store';
+
+const TabNavigator = () => {
+ const layout = useConfig((state) => state.settings.layout);
+ const { tabs, withSideBar } = layout;
+
+ if (!withSideBar) {
+ return ;
+ }
+
+ return (
+
+ {tabs.includes('chats') && (
+
+ )}
+ {tabs.includes('calls') && (
+
+ )}
+ {tabs.includes('users') && (
+
+ )}
+ {tabs.includes('groups') && (
+
+ )}
+
+ );
+};
+```
\ No newline at end of file
diff --git a/chat-builder/react-native/builder-dir-structure.mdx b/chat-builder/react-native/builder-dir-structure.mdx
new file mode 100644
index 000000000..d52adf262
--- /dev/null
+++ b/chat-builder/react-native/builder-dir-structure.mdx
@@ -0,0 +1,180 @@
+---
+title: "Directory Structure"
+sidebarTitle: "Directory Structure"
+description: "Overview of the CometChat UI Kit Builder directory layout for React Native — understand where to find and customize components, settings, and styles."
+---
+
+The UI Kit Builder for React Native organizes code into logical directories for components, configuration, navigation, and utilities. This guide helps you navigate the structure so you know exactly where to make changes.
+
+```
+src/
+├── components/
+│ ├── conversations/ # Chat and messaging components
+│ ├── calls/ # Voice/video calling components
+│ ├── groups/ # Group management components
+│ ├── users/ # User management components
+│ └── login/ # Authentication components
+├── config/
+│ ├── store.ts # Zustand store for configuration
+│ └── config.json # Default configuration template
+├── navigation/ # App navigation setup
+├── utils/ # Helper utilities and constants
+└── assets/ # Icons, images, and fonts
+```
+
+---
+
+## Root Files
+
+| File | Purpose |
+| ---- | ------- |
+| `App.tsx` | Main application entry point with theme provider setup |
+| `package.json` | Project dependencies and npm scripts |
+| `metro.config.js` | Metro bundler configuration |
+| `babel.config.js` | Babel transpiler configuration |
+
+---
+
+## Key Folders
+
+### `config/`
+
+Configuration management for the Builder settings.
+
+```
+config/
+├── store.ts # Zustand store managing Builder settings state
+└── config.json # Default configuration with all feature toggles
+```
+
+| File | Purpose |
+| ---- | ------- |
+| `store.ts` | Zustand store that manages Builder settings, provides hooks for accessing configuration |
+| `config.json` | Default configuration template with all feature flags, layout, and style settings |
+
+### `components/`
+
+Each component folder contains the main component file and associated hooks. These are the building blocks of your chat UI.
+
+```
+components/
+├── conversations/ # Conversation list, message threads, chat UI
+├── calls/ # Call screens, call logs, call controls
+├── groups/ # Group list, group details, member management
+├── users/ # User list, user profiles, presence indicators
+└── login/ # Login screen, authentication flow
+```
+
+### `navigation/`
+
+Navigation configuration using React Navigation.
+
+```
+navigation/
+├── AppNavigator.tsx # Main navigation stack
+├── TabNavigator.tsx # Bottom tab navigation
+└── types.ts # Navigation type definitions
+```
+
+### `utils/`
+
+Utility functions and application constants.
+
+```
+utils/
+├── AppConstants.tsx # CometChat credentials (APP_ID, AUTH_KEY, REGION)
+└── helpers.ts # General utility functions
+```
+
+### `assets/`
+
+Static assets including icons, images, and fonts.
+
+```
+assets/
+├── icons/ # App icons and UI icons
+├── images/ # Illustrations and backgrounds
+└── fonts/ # Custom font files
+```
+
+---
+
+## Platform Directories
+
+### `ios/`
+
+iOS-specific native code and configuration.
+
+```
+ios/
+├── YourApp/
+│ ├── AppDelegate.mm # iOS app delegate
+│ ├── Info.plist # iOS app configuration
+│ └── Resources/
+│ └── Fonts/ # iOS font files
+└── Podfile # CocoaPods dependencies
+```
+
+### `android/`
+
+Android-specific native code and configuration.
+
+```
+android/
+├── app/
+│ ├── src/main/
+│ │ ├── AndroidManifest.xml # Android app manifest
+│ │ ├── assets/
+│ │ │ └── fonts/ # Android font files
+│ │ ├── java/ # Native Android code
+│ │ └── res/ # Android resources
+│ └── build.gradle # App-level Gradle config
+├── build.gradle # Project-level Gradle config
+└── settings.gradle # Gradle settings
+```
+
+---
+
+## Quick Reference: Where to Customize
+
+| What you want to change | Where to look |
+| ----------------------- | ------------- |
+| Enable/disable features | `src/config/config.json` |
+| Access configuration at runtime | `src/config/store.ts` |
+| CometChat credentials | `src/utils/AppConstants.tsx` |
+| Theme colors & styles | `App.tsx` (theme provider) |
+| Custom fonts | `src/assets/fonts/`, platform font directories |
+| Navigation structure | `src/navigation/` |
+| Chat UI components | `src/components/conversations/` |
+| Call UI components | `src/components/calls/` |
+| User management UI | `src/components/users/` |
+| Group management UI | `src/components/groups/` |
+
+
+ Prefer using `config.json` for feature toggles and the theme provider in `App.tsx` for styling. For extensive changes, create new components rather than modifying core files directly.
+
+
+---
+
+## Next Steps
+
+
+
+ Configure feature toggles and behavior.
+
+
+ Modify component props, styling, and behavior.
+
+
+ Customize colors, typography, and styling.
+
+
+ Explore available UI components.
+
+
diff --git a/chat-builder/react-native/builder-settings.mdx b/chat-builder/react-native/builder-settings.mdx
new file mode 100644
index 000000000..997e69aff
--- /dev/null
+++ b/chat-builder/react-native/builder-settings.mdx
@@ -0,0 +1,361 @@
+---
+title: "UI Kit Builder Settings"
+sidebarTitle: "Builder Settings"
+description: "Comprehensive reference for all Builder configuration options in the React Native UI Kit Builder."
+---
+
+The Builder configuration controls everything the React Native UI Kit Builder renders—messaging, AI helpers, calls, layout, theming, and more. This configuration is stored in `config.json` and managed through the Zustand store.
+
+
+ **For developers customizing their chat UI**: The `config.json` file contains all your feature toggles, layout settings, and styling configuration. Edit this file or use the QR code scanner to update settings dynamically. See the [Integration Guide](/chat-builder/react-native/integration) for setup.
+
+
+## Top-level Structure
+
+The configuration JSON follows this structure:
+
+```json
+{
+ "builderId": "unique-builder-id",
+ "settings": {
+ "chatFeatures": {
+ "coreMessagingExperience": { /* Boolean settings */ },
+ "deeperUserEngagement": { /* Boolean settings */ },
+ "aiUserCopilot": { /* Boolean settings */ },
+ "userManagement": { /* Boolean settings */ },
+ "groupManagement": { /* Boolean settings */ },
+ "moderatorControls": { /* Boolean settings */ },
+ "privateMessagingWithinGroups": { /* Boolean settings */ },
+ "inAppSounds": { /* Boolean settings */ }
+ },
+ "callFeatures": {
+ "voiceAndVideoCalling": { /* Boolean settings */ }
+ },
+ "layout": { /* Layout settings */ },
+ "style": {
+ "theme": "system",
+ "color": { /* Color settings */ },
+ "typography": { /* Typography settings */ }
+ }
+ }
+}
+```
+
+---
+
+
+All boolean settings follow the same pattern: `true` enables the feature and shows its UI elements, `false` hides them completely.
+
+
+## 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 |
+| ------- | ---- | ------------ |
+| `typingIndicator` | boolean | Shows "typing..." indicator when someone is composing a message |
+| `threadConversationAndReplies` | boolean | Enables threaded replies to specific messages, creating nested conversation threads |
+| `photosSharing` | boolean | Allows users to share images from device or camera |
+| `videoSharing` | boolean | Allows users to share video files |
+| `audioSharing` | boolean | Allows users to share audio files (mp3, wav, etc.) |
+| `fileSharing` | boolean | Allows users to share documents (PDF, DOC, etc.) |
+| `editMessage` | boolean | Lets users modify their sent messages; edited messages show "(edited)" label |
+| `deleteMessage` | boolean | Lets users remove their sent messages |
+| `messageDeliveryAndReadReceipts` | boolean | Shows delivery (✓) and read (✓✓) status indicators on messages |
+| `userAndFriendsPresence` | boolean | Shows online/offline status dot next to user avatars |
+| `conversationAndAdvancedSearch` | boolean | Enables search across messages, users, and conversations |
+| `moderation` | boolean | Enables blocked message feedback for messages blocked by moderation rules |
+| `quotedReplies` | boolean | Lets users quote a message when replying, showing the original above their response |
+| `markAsUnread` | boolean | Lets users mark a conversation as unread to revisit later |
+
+
+ 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-native/core-features).
+
+
+### 1.2 Deeper User Engagement (`deeperUserEngagement`)
+
+Interactive features: mentions, reactions, polls, voice notes, and collaborative tools.
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `mentions` | boolean | Lets users @mention specific people in a message to notify them |
+| `mentionAll` | boolean | Lets users type @all to notify every member in a group chat |
+| `reactions` | boolean | Lets users add emoji reactions (👍 ❤️ 😂 etc.) to messages |
+| `messageTranslation` | boolean | Translates messages to user's preferred language. Requires Dashboard setup |
+| `polls` | boolean | Lets users create polls with multiple options for group voting. Requires Dashboard setup |
+| `collaborativeWhiteboard` | boolean | Opens a shared whiteboard for real-time drawing and collaboration. Requires Dashboard setup |
+| `collaborativeDocument` | boolean | Creates shared documents for real-time collaborative editing. Requires Dashboard setup |
+| `voiceNotes` | boolean | Lets users record and send voice messages |
+| `emojis` | boolean | Shows emoji picker in composer for browsing and inserting emojis |
+| `stickers` | boolean | Lets users send sticker images from available packs. Requires Dashboard setup |
+| `userInfo` | boolean | Lets users tap on another user's avatar to view their profile |
+| `groupInfo` | boolean | Lets users tap on group header to view group details and member list |
+
+
+ Configure these features based on your app's requirements. Learn more about
+ [Extensions](/ui-kit/react-native/extensions).
+
+
+### 1.3 AI User Copilot (`aiUserCopilot`)
+
+AI-powered features to help users start and navigate conversations.
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `conversationStarter` | boolean | Shows AI-suggested opening messages |
+| `conversationSummary` | boolean | Generates AI-powered conversation summary |
+| `smartReply` | boolean | Shows AI-suggested quick reply options |
+
+
+AI User Copilot features require an OpenAI API key. Configure it in the [CometChat Dashboard](https://app.cometchat.com) under **AI > Settings**.
+
+
+### 1.4 User Management (`userManagement`)
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `friendsOnly` | boolean | Restricts chat to friends list only |
+
+### 1.5 Group Management (`groupManagement`)
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `createGroup` | boolean | Lets users create new groups |
+| `addMembersToGroups` | boolean | Lets admins invite users to groups |
+| `joinLeaveGroup` | boolean | Lets users join/leave groups |
+| `deleteGroup` | boolean | Lets owners delete groups |
+| `viewGroupMembers` | boolean | Shows member list in group info |
+
+### 1.6 Moderator Controls (`moderatorControls`)
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `reportMessage` | boolean | Lets users flag messages for review |
+| `kickUsers` | boolean | Lets admins remove users from groups |
+| `banUsers` | boolean | Lets admins permanently ban users |
+| `promoteDemoteMembers` | boolean | Lets owners change member roles |
+
+### 1.7 Private Messaging Within Groups (`privateMessagingWithinGroups`)
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `sendPrivateMessageToGroupMembers` | boolean | Lets users start 1:1 chats with group members |
+
+### 1.8 In-App Sounds (`inAppSounds`)
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `incomingMessageSound` | boolean | Plays sound for new messages |
+| `outgoingMessageSound` | boolean | Plays sound when sending messages |
+
+---
+
+## 2. Call Features (`callFeatures`)
+
+### 2.1 Voice and Video Calling (`voiceAndVideoCalling`)
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `oneOnOneVoiceCalling` | boolean | Shows phone icon in 1:1 chat header for starting voice calls |
+| `oneOnOneVideoCalling` | boolean | Shows video camera icon in 1:1 chat header for starting video calls |
+| `groupVideoConference` | boolean | Shows video camera icon in group chat header for starting group video calls |
+| `groupVoiceConference` | boolean | Shows phone icon in group chat header for starting group voice calls |
+
+
+ Learn more about [Call Features](/ui-kit/react-native/call-features).
+
+
+---
+
+## 3. Layout (`layout`)
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `withSideBar` | boolean | Shows navigation sidebar with tabs (Chats, Calls, Users, Groups) |
+| `tabs` | string[] | Array of tabs to show: `'chats'`, `'calls'`, `'users'`, `'groups'` |
+| `chatType` | string | Default conversation type on load: `'user'` for 1:1 chats, `'group'` for group chats, `'both'` for all |
+
+
+ Set `withSideBar: false` for embedded chat widgets or single-conversation
+ views where navigation isn't needed.
+
+
+---
+
+## 4. Style (`style`)
+
+### 4.1 Theme
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `theme` | string | Controls light/dark mode: `'light'`, `'dark'`, or `'system'` |
+
+### 4.2 Colors
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `brandColor` | string | Primary accent color (hex). Example: `"#6852D6"` |
+| `primaryTextLight` | string | Main text color in light mode |
+| `primaryTextDark` | string | Main text color in dark mode |
+| `secondaryTextLight` | string | Secondary text color in light mode |
+| `secondaryTextDark` | string | Secondary text color in dark mode |
+
+### 4.3 Typography
+
+| Setting | Type | What It Does |
+| ------- | ---- | ------------ |
+| `font` | string | Font family: `'roboto'`, `'arial'`, `'inter'`, or `'times new roman'` |
+| `size` | string | Text size: `'default'`, `'compact'`, or `'comfortable'` |
+
+---
+
+## Complete Settings Example
+
+```json
+{
+ "builderId": "your-builder-id",
+ "settings": {
+ "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": "both"
+ },
+ "style": {
+ "theme": "system",
+ "color": {
+ "brandColor": "#6852D6",
+ "primaryTextLight": "#141414",
+ "primaryTextDark": "#FFFFFF",
+ "secondaryTextLight": "#727272",
+ "secondaryTextDark": "#989898"
+ },
+ "typography": {
+ "font": "roboto",
+ "size": "default"
+ }
+ }
+ }
+}
+```
+
+---
+
+## Accessing Settings in Code
+
+Use the Zustand store to access settings in your React Native components:
+
+```tsx
+import { useConfig } from './src/config/store';
+
+const MyComponent = () => {
+ // Access style settings
+ const styleConfig = useConfig((state) => state.settings.style);
+
+ // Access chat features
+ const chatFeatures = useConfig((state) => state.settings.chatFeatures);
+
+ // Check if a feature is enabled
+ if (chatFeatures.coreMessagingExperience.photosSharing) {
+ // Enable photo sharing functionality
+ }
+
+ // Access layout settings
+ const layout = useConfig((state) => state.settings.layout);
+ const tabs = layout.tabs;
+
+ return (/* ... */);
+};
+```
+
+---
+
+## Dashboard Feature Requirements
+
+Some features require additional configuration in the [CometChat Dashboard](https://app.cometchat.com):
+
+
+**AI Copilot Features** (Conversation Starter, Conversation Summary, Smart Reply)
+- Requires an OpenAI API key configured in the Dashboard under **AI > Settings**
+
+
+
+**Stickers, Polls, Collaborative Tools, Message Translation**
+- Requires the respective extensions to be enabled in the Dashboard under **Extensions**
+
+
+
+**Moderation**
+- Requires moderation rules to be configured in the Dashboard under **Moderation > Rules**
+
diff --git a/chat-builder/react-native/integration.mdx b/chat-builder/react-native/integration.mdx
index d54aa37fe..054aee2ec 100644
--- a/chat-builder/react-native/integration.mdx
+++ b/chat-builder/react-native/integration.mdx
@@ -1,28 +1,62 @@
---
-title: "Getting Started With UI Kit Builder"
+title: "UI Kit Builder Integration"
sidebarTitle: "Integration"
+description: "Step-by-step guide to integrating CometChat's UI Kit Builder into your React Native application."
---
-UI Kit Builder for React Native streamlines how you configure CometChat’s React Native UI Kit. Build themes, toggles, and layouts visually, export the settings JSON, and keep your production app synced by reading the same configuration at runtime.
+UI Kit Builder for React Native streamlines how you configure CometChat's React Native UI Kit. Build themes, toggles, and layouts visually, export the settings JSON, and keep your production app synced by reading the same configuration at runtime.
+---
+
+## Prerequisites
+
+Before getting started, make sure you have:
+
+- **Node.js** 18 or higher
+- **React Native** 0.77+ (CLI or Expo bare workflow)
+- **iOS tooling**: macOS with Xcode 14+, CocoaPods, iOS 12+ simulator/device
+- **Android tooling**: Android Studio with SDK 33+, Android 5.0+ device/emulator
+- **Internet connection** (required for CometChat services)
+- An active CometChat app (App ID, Auth Key, and Region)
+
+---
+
## Complete Integration Workflow
-1. Clone the React Native Builder sample.
-2. Install dependencies (Node modules + CocoaPods) and add your CometChat credentials.
-3. Run the sample on iOS/Android, scan/import a QR configuration, and validate the experience.
-4. Copy the generated config store files into your own React Native app.
-5. Wrap UI Kit components with the Builder-provided theme/settings.
-6. Extend with fonts, persistence, and feature toggles as needed.
+1. **Design Your Chat Experience** - Use the UI Kit Builder to customize layouts, features, and styling.
+2. **Review and Export** - Review which features will be enabled in your Dashboard, toggle them on/off, and download the generated code package.
+3. **Preview Customizations** - Optionally, preview the chat experience before integrating it into your project.
+4. **Integration** - Integrate into your existing application using either the Sample App or Configuration Store method.
+5. **Customize Further** - Explore advanced customization options to tailor the chat experience.
-***
+---
+
+## Launch the UI Kit Builder
-## Run the CometChat UIKit Builder Sample App
+1. Log in to your [CometChat Dashboard](https://app.cometchat.com).
+2. Select your application from the list.
+3. Navigate to **Integrate** → **React Native** → **Launch UI Kit Builder**.
+
+---
-### 1. Download & Install
+## Integration Options
+
+Choose one of the following integration methods based on your needs:
+
+| Option | Best For | Complexity |
+| ------ | -------- | ---------- |
+| **Run Sample App** | Quick preview and testing of Builder configurations | Easy |
+| **Integrate Config Store** (Recommended) | Production apps where you want full control over customization | Medium |
+
+---
+
+## Option 1: Run the CometChat UIKit Builder Sample App
+
+### Step 1: Download & Install
```bash
git clone https://github.com/cometchat-team/uikit-builder-app-react-native.git
@@ -30,7 +64,7 @@ cd uikit-builder-app-react-native
npm install
```
-### 2. iOS Dependencies
+### Step 2: iOS Dependencies
```bash
cd ios
@@ -38,7 +72,7 @@ pod install
cd ..
```
-### 3. Configure CometChat credentials
+### Step 3: Configure CometChat Credentials
Edit `src/utils/AppConstants.tsx`:
@@ -50,7 +84,7 @@ export const AppConstants = {
};
```
-### 4. Run the Builder sample
+### Step 4: Run the Builder Sample
```bash
# Start Metro
@@ -63,26 +97,27 @@ npm run android
With the sample running you can scan QR codes, import JSON, and preview Builder-generated layouts before you copy them into another project.
-***
+---
-## Integrate Builder Configuration into Your React Native App
+## Option 2: Integrate Builder Configuration into Your React Native App
-### 1. Install shared dependencies
+This method gives you full control over customization and is recommended for production apps.
+
+### Step 1: Install Shared Dependencies
```bash
npm install zustand @react-native-async-storage/async-storage
```
-### 2. Copy configuration files
-
-From the sample project, copy:
+### Step 2: Copy Configuration Files
-- `src/config/store.ts` (Zustand store that manages Builder settings)
-- `src/config/config.json` (default configuration template)
+From the sample project, copy these essential files to your existing React Native project:
-Place them inside `yourProject/src/config/`.
+- **Source:** `src/config/store.ts` (Zustand store that manages Builder settings)
+- **Source:** `src/config/config.json` (default configuration template)
+- **Destination:** `yourProject/src/config/`
-### 3. Wire the Builder theme into UI Kit
+### Step 3: Wire the Builder Theme into UI Kit
```tsx
import React from 'react';
@@ -119,129 +154,144 @@ const App = () => {
Use the Zustand store everywhere you need runtime access to Builder settings (feature toggles, layout preferences, or styling).
-### 4. Respect feature toggles in UI Kit components
+### Step 4: Respect Feature Toggles in UI Kit Components
+
+Access feature configurations from the store to control which features are enabled:
-- Chat features (typing indicator, threads, mentions, reactions, etc.).
-- Call features (1:1 voice, group video, lobby).
-- Layout and discovery (tabs, sidebar, chat type).
+- Chat features (typing indicator, threads, mentions, reactions, etc.)
+- Call features (1:1 voice, group video, lobby)
+- Layout and discovery (tabs, sidebar, chat type)
These booleans live under `settings.chatFeatures`, `settings.callFeatures`, and `settings.layout` inside the Builder JSON, so you can decide which CometChat components to render or hide per experience.
-***
+---
-## Project Structure Snapshot
+## Important Guidelines for Changes
-```
-src/
-├── components/ # Conversations, calls, groups, users, login flows
-├── config/ # Builder store + config.json
-├── navigation/ # Stack/tab navigation
-├── utils/ # App constants and helpers
-└── assets/ # Icons, illustrations, fonts
-```
+
+**Functional Changes:**
+For enabling or disabling features and adjusting configurations, update the `config.json` file or modify the Zustand store. This controls all feature flags and configuration constants.
+
-Use the sample layout as a reference when organizing your own screens or when importing the Builder module as a feature flag playground.
+
+**UI and Theme-related Changes:**
+For any updates related to UI, such as colors, fonts, and styles, modify the theme object passed to `CometChatThemeProvider`.
+
-***
+---
-## Configuration Schema
+## Enable Features in CometChat Dashboard
-Each QR code or exported JSON follows this structure:
+If your app needs any of these features, enable them from your [Dashboard](https://app.cometchat.com):
-```json
-{
- "builderId": "unique-builder-id",
- "settings": {
- "chatFeatures": {
- "coreMessagingExperience": {
- "typingIndicator": true,
- "threadConversationAndReplies": true
- },
- "deeperUserEngagement": {
- "mentions": true,
- "reactions": true
- }
- },
- "callFeatures": {
- "voiceAndVideoCalling": {
- "oneOnOneVoiceCalling": true,
- "groupVideoConference": true
- }
- },
- "layout": {
- "withSideBar": true,
- "tabs": ["chats", "calls", "users", "groups"],
- "chatType": "both"
- },
- "style": {
- "theme": "system",
- "color": {
- "brandColor": "#6852D6",
- "primaryTextLight": "#141414"
- },
- "typography": {
- "font": "roboto",
- "size": "default"
- }
- }
- }
-}
-```
+- Stickers
+- Polls
+- Collaborative whiteboard
+- Collaborative document
+- Message translation
+- AI User Copilot: Conversation starter, Conversation summary, Smart reply
-Persist this JSON locally (AsyncStorage, secure storage, or your backend) and hydrate the Zustand store at startup.
+**How to enable:**
-***
+
+
+
-## Advanced Configuration
+1. Log in to the Dashboard.
+2. Select your app.
+3. Navigate to **Chat → Features**.
+4. Toggle ON the required features and Save.
-### Custom fonts
+---
-1. Add fonts to `ios//Resources/Fonts/` and `android/app/src/main/assets/fonts/`.
-2. Map the font family in `App.tsx`:
+## What You Can Configure
-```tsx
-const FONT_MAP = {
- 'your-custom-font': {
- regular: Platform.OS === 'ios' ? 'YourFont-Regular' : 'your_font_regular',
- medium: Platform.OS === 'ios' ? 'YourFont-Medium' : 'your_font_medium',
- bold: Platform.OS === 'ios' ? 'YourFont-Bold' : 'your_font_bold',
- },
-};
-```
+Toggle these features on or off directly in the UI Kit Builder. For a full reference of each setting, see [UI Kit Builder Settings](/chat-builder/react-native/builder-settings).
-### Persisting Builder settings manually
+### Chat Features
-```ts
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useConfigStore } from './src/config/store';
+| Category | Includes |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Core Messaging Experience | Typing indicators, threads, media sharing (photos, video, audio, files), edit & delete messages, read receipts, search, quoted replies, mark as unread |
+| Deeper User Engagement | Mentions, @all mentions, reactions, message translation, polls, collaborative whiteboard & document, voice notes, emojis, stickers, user & group info |
+| AI User Copilot | Conversation starters, conversation summaries, smart replies |
+| User Management | Friends-only mode |
+| Group Management | Create groups, add members, join/leave, delete groups, view members |
+| Moderation | Content moderation, report messages, kick/ban users, promote/demote members |
+| Private Messaging Within Groups | Direct messages between group members |
+| In-App Sounds | Incoming & outgoing message sounds |
-export const saveConfig = async () => {
- const config = useConfigStore.getState().config;
- await AsyncStorage.setItem('@app_config', JSON.stringify(config));
-};
+### Call Features
-export const loadConfig = async () => {
- const savedConfig = await AsyncStorage.getItem('@app_config');
- if (savedConfig) {
- useConfigStore.getState().updateConfig(JSON.parse(savedConfig));
- }
-};
-```
+| Category | Includes |
+| --------------------- | ------------------------------------------------------------------------------------ |
+| Voice & Video Calling | 1:1 voice calling, 1:1 video calling, group voice conference, group video conference |
-***
+### Layout
-## Troubleshooting & Tips
+| Category | Includes |
+| -------- | --------------------------------------- |
+| Sidebar | With Sidebar or Without Sidebar mode |
+| Tabs | Conversations, Call Logs, Users, Groups |
-- **Metro or Gradle errors**: ensure Node 18+, React Native 0.77+, and the correct Android/iOS toolchains are installed.
-- **Plugin/config not loading**: verify `AppConstants.tsx` values and network connectivity when launching the Builder.
-- **QR code parsing issues**: validate that the JSON matches the schema above; malformed objects will be ignored.
-- **UI Kit mismatches**: confirm both the Builder sample and your production app use the same version of `@cometchat/chat-uikit-react-native`.
+### Theming
-***
+| Category | Includes |
+| ---------- | ----------------------------------------------------------- |
+| Theme | System, Light, or Dark mode |
+| Colors | Brand color, primary & secondary text colors (light & dark) |
+| Typography | Font family, text sizing (default, compact, comfortable) |
+
+---
+
+## Troubleshooting
+
+### Metro or Gradle Errors
+
+- Ensure Node 18+, React Native 0.77+, and the correct Android/iOS toolchains are installed
+- Clean and rebuild: `npm start --reset-cache`
+
+### Plugin/Config Not Loading
+
+- Verify `AppConstants.tsx` values are correct
+- Check network connectivity when launching the Builder
+
+### QR Code Parsing Issues
+
+- Validate that the JSON matches the configuration schema
+- Malformed objects will be ignored
+
+### UI Kit Mismatches
+
+- Confirm both the Builder sample and your production app use the same version of `@cometchat/chat-uikit-react-native`
+
+---
## Next Steps
-- Theme deep dive: [Theme introduction](/ui-kit/react-native/theme-introduction)
-- UI Kit components: [React Native UI Kit overview](/ui-kit/react-native/overview)
-- Support ticket: https://help.cometchat.com/hc/en-us/requests/new
-- GitHub issues: https://github.com/cometchat-team/uikit-builder-app-react-native/issues
+
+
+ Understand the settings file and feature toggles.
+
+
+ Adjust component props, behavior, and UI elements.
+
+
+ See how the exported code is organized.
+
+
+ Customize colors, typography, and styling to match your brand.
+
+
diff --git a/chat-builder/react-native/overview.mdx b/chat-builder/react-native/overview.mdx
index 9acaadf65..7c4ed01aa 100644
--- a/chat-builder/react-native/overview.mdx
+++ b/chat-builder/react-native/overview.mdx
@@ -1,70 +1,78 @@
---
-title: "CometChat Builder For React Native"
+title: "CometChat UI Kit Builder For React Native"
sidebarTitle: "Overview"
+description: "CometChat UI Kit Builder for React Native is a visual development tool that helps you design and configure chat experiences for React Native applications without building the interface from scratch."
---
-CometChat Builder for React Native lets you configure chat UX, theme, and features visually, then sync those settings straight into your React Native or Expo project. Scan a QR code, fetch layout/theme JSON, and keep your UI Kit experience in lockstep across platforms.
+It provides a set of prebuilt, production-ready messaging components backed by CometChat's real-time infrastructure.
-***
+With CometChat UI Kit Builder, you can:
-## Prerequisites
+- Configure chat and calling features
+- Apply theming and layout options
+- Export React Native-ready code via QR code scanning
-- Node.js 18+
-- React Native 0.77+ (CLI or Expo bare workflow)
-- iOS tooling: macOS with Xcode 14+, CocoaPods, iOS 12+ simulator/device
-- Android tooling: Android Studio with SDK 33+, Android 5.0+ device/emulator
-- An active CometChat app (App ID, Auth Key, and Region)
+The exported UI connects to CometChat's SDK and infrastructure, which manages message transport, sync, and backend scaling.
-***
+## What You Can Configure
-## Why Choose CometChat Builder?
+Toggle these features on or off directly in the UI Kit Builder. For a full reference of each setting, see [UI Kit Builder Settings](/chat-builder/react-native/builder-settings).
-- Builder-first workflow with QR-based configs — no manual toggling per environment.
-- Native theme fidelity: brand colors, typography, and layout update instantly.
-- Feature governance baked in: chat, calls, engagement, and layouts stay in sync with UI Kit.
-- Works with the React Native UI Kit, so you focus on product logic instead of wiring UI.
+### Chat Features
-***
+| Category | Includes |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Core Messaging Experience | Typing indicators, threads, media sharing (photos, video, audio, files), edit & delete messages, read receipts, search, quoted replies, mark as unread |
+| Deeper User Engagement | Mentions, @all mentions, reactions, message translation, polls, collaborative whiteboard & document, voice notes, emojis, stickers, user & group info |
+| AI User Copilot | Conversation starters, conversation summaries, smart replies |
+| User Management | Friends-only mode |
+| Group Management | Create groups, add members, join/leave, delete groups, view members |
+| Moderation | Content moderation, report messages, kick/ban users, promote/demote members |
+| Private Messaging Within Groups | Direct messages between group members |
+| In-App Sounds | Incoming & outgoing message sounds |
-## Builder Highlights
+### Call Features
-- QR code scanning to import/export complete experiences.
-- Dynamic theming for light/dark/system modes.
-- Feature toggles for messaging, calling, engagement, and layout choices (tabs, sidebar, chat type).
-- Real-time updates and persistent settings via AsyncStorage.
-- Shared configuration schema that your React Native app and the Builder sample project both understand.
+| Category | Includes |
+| --------------------- | ------------------------------------------------------------------------------------ |
+| Voice & Video Calling | 1:1 voice calling, 1:1 video calling, group voice conference, group video conference |
-***
+### Layout
-## Setup Paths
+| Category | Includes |
+| -------- | --------------------------------------- |
+| Sidebar | With Sidebar or Without Sidebar mode |
+| Tabs | Conversations, Call Logs, Users, Groups |
-
-
- Install the React Native sample, connect your CometChat credentials, and preview configurations end-to-end.
-
+### Theming
-
- Copy the config store, hydrate UI Kit themes, and honor feature toggles inside your production app.
-
-
+| Category | Includes |
+| ---------- | ----------------------------------------------------------- |
+| Theme | System, Light, or Dark mode |
+| Colors | Brand color, primary & secondary text colors (light & dark) |
+| Typography | Font family, text sizing (default, compact, comfortable) |
+
+---
-***
+## How to Use UI Kit Builder
-## UI Preview
+### 1. Design
+
+Configure your chat layout, toggle features, and pick a theme using the UI Kit Builder.
-***
+### 2. Export
+
+Scan a QR code or export the configuration JSON to apply your settings to your React Native app.
+
+### 3. Integrate
+
+Drop the configuration into your React Native project, add your CometChat credentials, and run the app. See the [Integration Guide](/chat-builder/react-native/integration) for full steps.
+
+---
## Try It Locally
@@ -78,28 +86,38 @@ CometChat Builder for React Native lets you configure chat UX, theme, and featur
-***
-
-## Integration Snapshot
-
-A typical workflow:
-
-1. Launch the Builder sample app and log in with your CometChat credentials.
-2. Scan or import a configuration (JSON or QR) to tune chat, calls, layout, and styling.
-3. Copy the generated `config.json` and Zustand store into your React Native project.
-4. Wrap your app with `CometChatThemeProvider` using the Builder-provided palette and typography.
-5. Toggle UI Kit components or features at runtime based on the stored settings.
-
-***
+---
-## Next Steps for Developers
+## Next Steps
-1. Get your environment ready — [Integration guide](/chat-builder/react-native/integration).
-2. Connect CometChat UI Kit — [React Native UI Kit overview](/ui-kit/react-native/overview).
-3. Customize styling — [Theme introduction](/ui-kit/react-native/theme-introduction).
-4. Explore advanced components and APIs — [Methods & APIs](/ui-kit/react-native/methods).
+
+
+ Step-by-step guide to integrate the UI Kit Builder.
+
+
+ Understand the settings file and feature toggles.
+
+
+ Adjust component props, behavior, and UI elements.
+
+
+ See how the exported code is organized.
+
+
-***
+---
## Helpful Resources
@@ -115,7 +133,7 @@ A typical workflow:
-***
+---
## Need Help?
diff --git a/docs.json b/docs.json
index 3ae3cdbf0..a29f78bb9 100644
--- a/docs.json
+++ b/docs.json
@@ -361,6 +361,14 @@
"chat-builder/android/overview",
"chat-builder/android/integration"
]
+ },
+ {
+ "group": "Reference",
+ "pages": [
+ "chat-builder/android/builder-settings",
+ "chat-builder/android/builder-dir-structure",
+ "chat-builder/android/builder-customisations"
+ ]
}
]
},
@@ -374,6 +382,14 @@
"chat-builder/ios/overview",
"chat-builder/ios/integration"
]
+ },
+ {
+ "group": "Reference",
+ "pages": [
+ "chat-builder/ios/builder-settings",
+ "chat-builder/ios/builder-dir-structure",
+ "chat-builder/ios/builder-customisations"
+ ]
}
]
},
@@ -387,6 +403,14 @@
"chat-builder/flutter/overview",
"chat-builder/flutter/integration"
]
+ },
+ {
+ "group": "Reference",
+ "pages": [
+ "chat-builder/flutter/builder-settings",
+ "chat-builder/flutter/builder-dir-structure",
+ "chat-builder/flutter/builder-customisations"
+ ]
}
]
},
@@ -400,6 +424,14 @@
"chat-builder/react-native/overview",
"chat-builder/react-native/integration"
]
+ },
+ {
+ "group": "Reference",
+ "pages": [
+ "chat-builder/react-native/builder-settings",
+ "chat-builder/react-native/builder-dir-structure",
+ "chat-builder/react-native/builder-customisations"
+ ]
}
]
}
diff --git a/images/import_module_step1.png b/images/import_module_step1.png
new file mode 100644
index 000000000..57fe0ced0
Binary files /dev/null and b/images/import_module_step1.png differ
diff --git a/images/import_module_step2.png b/images/import_module_step2.png
new file mode 100644
index 000000000..0c3878ab2
Binary files /dev/null and b/images/import_module_step2.png differ
diff --git a/widget/html/legacy.mdx b/widget/html/legacy.mdx
index 3035a2a41..8c94b70fc 100644
--- a/widget/html/legacy.mdx
+++ b/widget/html/legacy.mdx
@@ -28,6 +28,13 @@ You have an option of loading the Chat Widget in:
1. Embedded Layout
2. Docked Layout
+
+**Security Best Practices**
+
+- The **Auth Key** method is recommended for **proof-of-concept (POC) development** and early-stage testing.
+- For **production environments**, use an **Auth Token** instead of an **Auth Key** to enhance security and prevent unauthorized access. See the [Security Measures using Auth Token](#security-measures-using-auth-token) section below for details.
+
+
### Embedded Layout