Getting Started With UI Kit Builder

UI Kit Builder is a powerful tool designed to simplify the integration of CometChat’s UI Kit into your existing React application. With the UI Kit Builder, you can quickly set up chat functionalities, customize UI elements, and integrate essential features without extensive coding.

Quick Reference for AI Agents & Developers - What this page covers: Integrating CometChat’s UI Kit Builder into an existing React application — initialization, user login, and rendering the chat UI - Prerequisites: A CometChat account with App ID, Region, and Auth Key from the CometChat Dashboard; an existing React project (Vite or CRA)

Key action: Install dependencies, initialize CometChat UI Kit, log in a user, and render the CometChatApp component

Complete Integration Workflow

Design Your Chat Experience - Use the UI Kit Builder to customize layouts, features, and styling.
Review and Export - Review which features will be enabled in your Dashboard, toggle them on/off, and download the generated code package.
Preview Customizations - Optionally, preview the chat experience before integrating it into your project.
Integration - Integrate into your existing application.
Customize Further - Explore advanced customization options to tailor the chat experience.

Launch the UI Kit Builder

Log in to your CometChat Dashboard.
Select your application from the list.
Navigate to Chat & Messaging → Get Started.
Choose your platform and click Launch UI Kit Builder.

Review Your Export

When you click Export, a “Review Your Export” modal appears (Step 1 of 3). This lets you:

Review features — See which features will be enabled in your CometChat Dashboard based on your UI Kit configuration
Toggle features — Turn individual features on/off before export
AI User Copilot — Requires an OpenAI API key (you’ll configure this in the next step)

Only checked features will be enabled in your Dashboard. You can always modify these settings later in the CometChat Dashboard.

Preview Customizations (Optional)

Before integrating the UI Kit Builder into your project, you can preview the chat experience by following these steps. This step is completely optional and can be skipped if you want to directly integrate the UI Kit Builder into your project.

You can preview the experience:

Open the cometchat-app-react folder.

Install dependencies:
npm i
Run the app:
npm start
Your app credentials are already prepopulated in the exported code.

Integration with CometChat UI Kit Builder (React.js)

Follow these steps to integrate CometChat UI Kit Builder into your existing React project:

Step 1: Install Dependencies

Run the following command to install the required dependencies:

npm install @cometchat/chat-uikit-react@6.3.9 @cometchat/calls-sdk-javascript

Step 2: Copy CometChat Folder

Copy the cometchat-app-react/src/CometChat folder into your project’s src directory.

Step 3: Initialize CometChat UI Kit

The initialization process varies depending on your setup. Select your framework:

Vite
CRA

src/main.tsx

import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
import {
  UIKitSettingsBuilder,
  CometChatUIKit,
} from "@cometchat/chat-uikit-react";
import { setupLocalization } from "./CometChat/utils/utils.ts";
import { CometChatProvider } from "./CometChat/context/CometChatContext";

export const COMETCHAT_CONSTANTS = {
  APP_ID: "YOUR_APP_ID", // Replace with your App ID
  REGION: "YOUR_REGION", // Replace with your App Region
  AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
};

const uiKitSettings = new UIKitSettingsBuilder()
  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
  .setRegion(COMETCHAT_CONSTANTS.REGION)
  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
  .subscribePresenceForAllUsers()
  .build();

CometChatUIKit.init(uiKitSettings)?.then(() => {
  setupLocalization();
  createRoot(document.getElementById("root")!).render(
    <CometChatProvider>
      <App />
    </CometChatProvider>,
  );
});

src/index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import {
  UIKitSettingsBuilder,
  CometChatUIKit,
} from "@cometchat/chat-uikit-react";
import { setupLocalization } from "./CometChat/utils/utils";
import { CometChatProvider } from "./CometChat/context/CometChatContext";

export const COMETCHAT_CONSTANTS = {
  APP_ID: "YOUR_APP_ID", // Replace with your App ID
  REGION: "YOUR_REGION", // Replace with your App Region
  AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
};

const uiKitSettings = new UIKitSettingsBuilder()
  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
  .setRegion(COMETCHAT_CONSTANTS.REGION)
  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
  .subscribePresenceForAllUsers()
  .build();

CometChatUIKit.init(uiKitSettings)?.then(() => {
  setupLocalization();
  ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <CometChatProvider>
      <App />
    </CometChatProvider>,
  );
});

Your app credentials (APP_ID, AUTH_KEY, REGION) are prepopulated in the exported code. If you need to use different credentials, update them in the configuration file.

To authenticate a user, you need a UID. You can either:

Create new users on the CometChat Dashboard, CometChat SDK Method or via the API.
Use pre-generated test users:
- cometchat-uid-1
- cometchat-uid-2
- cometchat-uid-3
- cometchat-uid-4
- cometchat-uid-5

The Login method returns a User object containing all relevant details of the logged-in user.

Security Best Practices

The Auth Key method is recommended for proof-of-concept (POC) development and early-stage testing.
For production environments, it is strongly advised to use an Auth Token instead of an Auth Key to enhance security and prevent unauthorized access.

User Login After Initialization Once the CometChat UI Kit is initialized, you can log in the user whenever it fits your app’s workflow.

TypeScript
JavaScript

import { CometChatUIKit } from "@cometchat/chat-uikit-react";

const UID = "YOUR_UID"; // Replace with your actual UID

CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
if (!user) {
// If no user is logged in, proceed with login
CometChatUIKit.login(UID)
.then((user: CometChat.User) => {
console.log("Login Successful:", { user });
// Mount your app
})
.catch(console.log);
} else {
// If user is already logged in, mount your app
}
});

import { CometChatUIKit } from "@cometchat/chat-uikit-react";

const UID = "YOUR_UID"; // Replace with your actual UID

CometChatUIKit.getLoggedinUser().then((user) => {
if (!user) {
// If no user is logged in, proceed with login
CometChatUIKit.login(UID)
.then((user) => {
console.log("Login Successful:", { user });
// Mount your app
})
.catch(console.log);
} else {
// If user is already logged in, mount your app
}
});

However, if you prefer to log in the user immediately after initialization, you can do so within the then block of CometChatUIKit.init().

TypeScript
JavaScript

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import {
  UIKitSettingsBuilder,
  CometChatUIKit,
} from "@cometchat/chat-uikit-react";
import { setupLocalization } from "./CometChat/utils/utils";
import { CometChatProvider } from "./CometChat/context/CometChatContext";

export const COMETCHAT_CONSTANTS = {
  APP_ID: "YOUR_APP_ID", // Replace with your App ID
  REGION: "YOUR_REGION", // Replace with your App Region
  AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
};

const uiKitSettings = new UIKitSettingsBuilder()
.setAppId(COMETCHAT_CONSTANTS.APP_ID)
.setRegion(COMETCHAT_CONSTANTS.REGION)
.setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
.subscribePresenceForAllUsers()
.build();

CometChatUIKit.init(uiKitSettings)?.then(() => {
setupLocalization();

const UID = "YOUR_UID"; // Replace with your actual UID

CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
if (!user) {
CometChatUIKit.login(UID)
.then((loggedUser: CometChat.User) => {
console.log("Login Successful:", loggedUser);
// Mount your app
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(

<CometChatProvider>
<App />
</CometChatProvider>
);
})
.catch((error) => console.error("Login Failed:", error));
} else {
// User already logged in, mount app directly
console.log("User already logged in:", user);
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<CometChatProvider>
<App />
</CometChatProvider>
);
}
});
});

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import {
  UIKitSettingsBuilder,
  CometChatUIKit,
} from "@cometchat/chat-uikit-react";
import { setupLocalization } from "./CometChat/utils/utils";
import { CometChatProvider } from "./CometChat/context/CometChatContext";

export const COMETCHAT_CONSTANTS = {
  APP_ID: "YOUR_APP_ID", // Replace with your App ID
  REGION: "YOUR_REGION", // Replace with your App Region
  AUTH_KEY: "YOUR_AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
};

const uiKitSettings = new UIKitSettingsBuilder()
.setAppId(COMETCHAT_CONSTANTS.APP_ID)
.setRegion(COMETCHAT_CONSTANTS.REGION)
.setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
.subscribePresenceForAllUsers()
.build();

CometChatUIKit.init(uiKitSettings)?.then(() => {
setupLocalization();

const UID = "YOUR_UID"; // Replace with your actual UID

CometChatUIKit.getLoggedinUser().then((user) => {
if (!user) {
CometChatUIKit.login(UID)
.then((loggedUser) => {
console.log("Login Successful:", loggedUser);
// Mount your app
ReactDOM.createRoot(document.getElementById("root")).render(

<CometChatProvider>
<App />
</CometChatProvider>
);
})
.catch((error) => console.error("Login Failed:", error));
} else {
// User already logged in, mount app directly
console.log("User already logged in:", user);
ReactDOM.createRoot(document.getElementById("root")).render(
<CometChatProvider>
<App />
</CometChatProvider>
);
}
});
});

Step 5: Render the CometChatApp Component

Add the CometChatApp component to your app:

import CometChatApp from "./CometChat/CometChatApp";

const App = () => {
  return (
    /* CometChatApp requires a parent with explicit height & width to render correctly.
     Adjust the height and width as needed.
     */
    <div style={{ width: "100vw", height: "100vh" }}>
      <CometChatApp />
    </div>
  );
};

export default App;

Render with Default User and Group

You can also render the component with default user and group selection:

TypeScript
JavaScript

import { useEffect, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import CometChatApp from "./CometChat/CometChatApp";
const App = () => {
  const [selectedUser, setSelectedUser] =
    useState<CometChat.User | undefined>(undefined);
  const [selectedGroup, setSelectedGroup] =
    useState<CometChat.Group | undefined>(undefined);
  useEffect(() => {
    const UID = "cometchat-uid-2"; // Replace with your User ID
    CometChat.getUser(UID).then(setSelectedUser).catch(console.error);
    // const GUID = "cometchat-guid-1"; // Replace with your Group ID
    // CometChat.getGroup(GUID).then(setSelectedGroup).catch(console.error);
  }, []);
  return (
    /* CometChatApp requires a parent with explicit height & width to render correctly.
      Adjust the height and width as needed.
     */
    <div style={{ width: "100vw", height: "100vh" }}>
      <CometChatApp user={selectedUser} group={selectedGroup} />
    </div>
  );
};
export default App;

import { useEffect, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import CometChatApp from "./CometChat/CometChatApp";
const App = () => {
  const [selectedUser, setSelectedUser] = useState(undefined);
  const [selectedGroup, setSelectedGroup] = useState(undefined);
  useEffect(() => {
    const UID = "cometchat-uid-2"; // Replace with your User ID
    CometChat.getUser(UID).then(setSelectedUser).catch(console.error);
    // const GUID = "cometchat-guid-1"; // Replace with your Group ID
    // CometChat.getGroup(GUID).then(setSelectedGroup).catch(console.error);
  }, []);
  return (
    /* CometChatApp requires a parent with explicit height & width to render correctly.
      Adjust the height and width as needed.
     */
    <div style={{ width: "100vw", height: "100vh" }}>
      <CometChatApp user={selectedUser} group={selectedGroup} />
    </div>
  );
};
export default App;

When you enable the Without Sidebar option for the Sidebar, the following behavior applies:

User Chats (chatType = "user"): Displays one-on-one chats only, either for a currently selected user or the default user.
Group Chats (chatType = "group"): Displays group chats exclusively, either for a currently selected group or the default group.

Step 6: Run the App

Start your application with the appropriate command based on your setup:

Vite / Next.js:

npm run dev

Create React App (CRA):

npm start

Advanced Customizations

Group Action Messages

Control the visibility of group action messages using the showGroupActionMessages prop:

<CometChatApp showGroupActionMessages={true} />

true (default) — Group action messages are visible
false — Group action messages are hidden

Auto Open First Item

Control whether the first item in lists automatically opens on render using the autoOpenFirstItem prop:

<CometChatApp autoOpenFirstItem={false} />

true (default) — The first item in conversation list, user list, or group list opens automatically on first render
false — No item opens until the user clicks on one

Troubleshooting

If you face any issues while integrating the builder in your app project, please check if you have the following configurations added to your tsConfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "resolveJsonModule": true
  }
}

If your development server is running, restart it to ensure the new TypeScript configuration is picked up.

Understanding Your Generated Code

The exported package includes several important elements to help you further customize your chat experience:

Directory Structure

The CometChat folder contains:

Components - Individual UI elements (message bubbles, input fields, etc.)
Layouts - Pre-configured arrangement of components
Context - State management for your chat application
Hooks - Custom React hooks for chat functionality
Utils - Helper functions and configuration

For a detailed breakdown, see the Builder Directory Structure guide.

Configuration Files

CometChat Settings File - Controls the appearance and behavior of your chat UI. See the UI Kit Builder Settings guide for details.
Theme Configuration - Customize colors, typography, and spacing
Localization Files - Add support for different languages

For more ways to tailor the chat experience, see Customizations.

Next Steps

Now that you’ve set up your chat experience, explore further configuration options:

Builder Configuration File

Learn how to customize your integration through the UI Kit Builder settings file.

Builder Directory Structure

Understand the organization of the builder components and generated code.

Advanced Theming

Modify themes and UI elements to match your brand.

Customizations

Customise the UI the way you want with advanced options.

Reference

​Complete Integration Workflow

​Launch the UI Kit Builder

​Review Your Export

​Preview Customizations (Optional)

​Integration with CometChat UI Kit Builder (React.js)

​Step 1: Install Dependencies

​Step 2: Copy CometChat Folder

​Step 3: Initialize CometChat UI Kit

​Step 4: User Login

​Step 5: Render the CometChatApp Component

​Render with Default User and Group

​Step 6: Run the App

​Advanced Customizations

​Group Action Messages

​Auto Open First Item

​Troubleshooting

​Understanding Your Generated Code

​Directory Structure

​Configuration Files

​Next Steps

Builder Configuration File

Builder Directory Structure

Advanced Theming

Customizations

Complete Integration Workflow

Launch the UI Kit Builder

Review Your Export

Preview Customizations (Optional)

Integration with CometChat UI Kit Builder (React.js)

Step 1: Install Dependencies

Step 2: Copy CometChat Folder

Step 3: Initialize CometChat UI Kit

Step 4: User Login

Step 5: Render the CometChatApp Component

Render with Default User and Group

Step 6: Run the App

Advanced Customizations

Group Action Messages

Auto Open First Item

Troubleshooting

Understanding Your Generated Code

Directory Structure

Configuration Files

Next Steps