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

# Getting Started With UI Kit Builder

> Getting Started With UI Kit Builder — CometChat documentation.

**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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-mechanical-fixes/SS5z-0d3JRPfFXXj/images/uikit-builder-preview.png?fit=max&auto=format&n=SS5z-0d3JRPfFXXj&q=85&s=32a1952c24f16bd35d4a01567810fa15" width="2880" height="1624" data-path="images/uikit-builder-preview.png" />
</Frame>

## **Complete Integration Workflow**

1. **Design Your Chat Experience** - Use the UI Kit Builder to customize layouts, features, and styling.
2. **Export Your Code** - Once satisfied, download the generated code package.
3. **Enable Features** - Enable additional features in the CometChat Dashboard if required.
4. **Preview Customizations** - Optionally, preview the chat experience before integrating it into your project.
5. **Integration** - Integrate into your existing application.
6. **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** > **React** > **Launch UI Kit Builder**.

***

## **Enable Features in CometChat Dashboard**

If your app requires any of the following features, make sure to enable them from the **[CometChat Dashboard](https://app.cometchat.com/)**

* **Stickers** – Allow users to send expressive stickers.
* **Polls** – Enable in-chat polls for user engagement.
* **Collaborative Whiteboard** – Let users draw and collaborate in real time.
* **Collaborative Document** – Allow multiple users to edit documents together.
* **Message Translation** – Translate messages between different languages.
* **AI User Copilot**
  * Conversation Starter – Suggests conversation openers.
  * Conversation Summary – Generates AI-powered chat summaries.
  * Smart Reply – Provides quick reply suggestions.

### **How to Enable These Features?**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-mechanical-fixes/W073onWd9v58kwAH/images/91e1727b-dashboard_features-5d33b046f945728c1521aee216f3555a.png?fit=max&auto=format&n=W073onWd9v58kwAH&q=85&s=3bf59dec76afe7f8b8ec7ee19490eb36" width="3016" height="1594" data-path="images/91e1727b-dashboard_features-5d33b046f945728c1521aee216f3555a.png" />
</Frame>

1. Log in to your **[CometChat Dashboard](https://app.cometchat.com)**
2. Select your application.
3. Navigate to **Chat > Features**.
4. Toggle **ON** the required features.
5. Click **Save Changes**.

***

## **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:
>
> 1. Open the `cometchat-app-react` folder.
> 2. Add credentials for your app in `src/index.tsx`:
>
> ```javascript theme={null}
> export const COMETCHAT_CONSTANTS = {
>   APP_ID: "", // Replace with your App ID
>   REGION: "", // Replace with your App Region
>   AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
> };
> ```
>
> 3. Install dependencies:
>
> ```
> npm i
> ```
>
> 4. Run the app:
>
> ```powershell theme={null}
> npm start
> ```

***

## **Integration with CometChat UI Kit Builder (React Router)**

### **Step 1: Install Dependencies**

```ruby theme={null}
npm install @cometchat/chat-uikit-react@6.3.11 @cometchat/calls-sdk-javascript
```

### **Step 2: Copy CometChat Folder**

Copy the `cometchat-app-react/src/CometChat` folder inside your `src/app` directory.

***

### **Step 3: Create & Initialize `CometChatNoSSR.tsx`**

Directory Structure:

```swift theme={null}
src/app/
├── CometChat/
└── CometChatNoSSR/
    └── CometChatNoSSR.tsx
```

```tsx src/app/CometChatNoSSR/CometChatNoSSR.tsx theme={null}
import React, { useEffect, useState } from "react";
import {
  CometChatUIKit,
  UIKitSettingsBuilder,
} from "@cometchat/chat-uikit-react";
import CometChatApp from "../CometChat/CometChatApp";
import { CometChatProvider } from "../CometChat/context/CometChatContext";
import { setupLocalization } from "../CometChat/utils/utils";

export const COMETCHAT_CONSTANTS = {
  APP_ID: "", // Replace with your App ID
  REGION: "", // Replace with your App Region
  AUTH_KEY: "", // Replace with your Auth Key
};

const CometChatNoSSR: React.FC = () => {
  const [initialized, setInitialized] = useState(false);

  useEffect(() => {
    if (typeof window === "undefined") return;

    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();
        console.log("Initialization completed successfully");
        setInitialized(true);
      })
      .catch((error) => console.error("Initialization failed", error));
  }, []);

  if (!initialized) {
    return <div>Initializing Chat...</div>;
  }

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <CometChatProvider>
        <CometChatApp />
      </CometChatProvider>
    </div>
  );
};

export default CometChatNoSSR;
```

***

### **Step 4: User Login**

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

1. **Create new users** on the **[CometChat Dashboard](https://app.cometchat.com)**, **[CometChat SDK Method](/ui-kit/react/methods#create-user)** or **[via the API](/rest-api/chat-apis)**.

2. **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.

***

<Note>
  **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](/ui-kit/react/methods#login-using-auth-token)** instead of an **Auth Key** to enhance security and prevent unauthorized access.
</Note>

**User Login After Initialization**

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

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    import { CometChatUIKit } from "@cometchat/chat-uikit-react";

    const UID = "cometchat-uid-1"; // 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
      }
    });
    ```
  </Tab>
</Tabs>

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

In this step, we create a React component that will only run on the client (no SSR). Inside the useEffect hook, we:

1. Build the CometChat UIKit settings using your App ID, Region, and Auth Key.
2. Initialize CometChatUIKit with those settings and set up localization.
3. Check if a user is already logged in; if not, perform a login with a hard-coded UID (replace "UID" with your actual user ID).

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    import React, { useEffect, useState } from "react";
    import {
      CometChatUIKit,
      UIKitSettingsBuilder,
    } from "@cometchat/chat-uikit-react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import CometChatApp from "../CometChat/CometChatApp";
    import { CometChatProvider } from "../CometChat/context/CometChatContext";
    import { setupLocalization } from "../CometChat/utils/utils";

    // Replace these with your actual keys
    export const COMETCHAT_CONSTANTS = {
      APP_ID: "",   // Your App ID
      REGION: "",   // Your App Region
      AUTH_KEY: "", // Your Auth Key
    };

    const CometChatNoSSR: React.FC = () => {
      const [initialized, setInitialized] = useState(false);
      const [user, setUser] = useState<CometChat.User | null>(null);

      useEffect(() => {
        // Exit if not running in the browser
        if (typeof window === "undefined") return;

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

        CometChatUIKit.init(UIKitSettings)
          ?.then(() => {
            console.log("Initialization completed");
            setupLocalization();
            setInitialized(true);

            const UID = "cometchat-uid-1"; // Replace with your actual UID

            CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
              if (!loggedInUser) {
                CometChatUIKit.login(UID)
                  .then((newUser) => {
                    console.log("Login successful:", newUser);
                    setUser(newUser);
                  })
                  .catch((error) => {
                    console.error("Login failed:", error);
                  });
              } else {
                console.log("User already logged in:", loggedInUser);
                setUser(loggedInUser);
              }
            });
          })
          .catch((error) => {
            console.error("CometChat initialization failed:", error);
          });
      }, []);

      if (!initialized || !user) {
        return <div>Initializing Chat...</div>;
      }

      return (
        <div style={{ width: "100vw", height: "100vh" }}>
          <CometChatProvider>
            <CometChatApp />
          </CometChatProvider>
        </div>
      );
    };

    export default CometChatNoSSR;
    ```
  </Tab>
</Tabs>

***

### **Step 5: Disable SSR and Render the CometChat Component**

Create a file CometChat.tsx inside the routes folder:

```javascript theme={null}
import React, { lazy, Suspense } from 'react';
import '@cometchat/chat-uikit-react/css-variables.css';

// Lazy load the CometChat component
const CometChatComponent = lazy(() => import('../CometChatNoSSR/CometChatNoSSR'));

export default function Home() {
  return (
    <Suspense fallback={<div>Loading Chat...</div>}>
      <CometChatComponent />
    </Suspense>
  );
}
```

Now, create a route for CometChat in your routes file:

```typescript theme={null}
import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
  index("routes/home.tsx"),
  route("chat", "routes/CometChat.tsx"), // Chat Route
] satisfies RouteConfig;
```

<Note>
  Why disable SSR? CometChat UI Kit Builder relies on browser APIs such as window, document, and WebSockets. Since React Router renders on the server by default, disabling SSR for this component prevents runtime errors.
</Note>

#### **Render with Default User and Group**

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

```javascript theme={null}
import React, { useEffect, useState } from "react";
import {
  CometChatUIKit,
  UIKitSettingsBuilder,
} from "@cometchat/chat-uikit-react";
import CometChatApp from "../CometChat/CometChatApp";
import { CometChatProvider } from "../CometChat/context/CometChatContext";
import { setupLocalization } from "../CometChat/utils/utils";
import { CometChat } from "@cometchat/chat-sdk-javascript";

export const COMETCHAT_CONSTANTS = {
  APP_ID: "", // Replace with your App ID
  REGION: "", // Replace with your App Region
  AUTH_KEY: "", // Replace with your Auth Key
};

// Functional Component
const CometChatNoSSR: React.FC = () => {
  const [user, setUser] = useState<CometChat.User | undefined>(undefined);

  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(
    undefined
  );
  const [selectedGroup, setSelectedGroup] = useState<
    CometChat.Group | undefined
  >(undefined);

  useEffect(() => {
    const UIKitSettings = new UIKitSettingsBuilder()
      .setAppId(COMETCHAT_CONSTANTS.APP_ID)
      .setRegion(COMETCHAT_CONSTANTS.REGION)
      .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
      .subscribePresenceForAllUsers()
      .build();
    // Initialize CometChat UIKit
    CometChatUIKit.init(UIKitSettings)
      ?.then(() => {
        setupLocalization();
        console.log("Initialization completed successfully");
        CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
          if (!loggedInUser) {
            CometChatUIKit.login("cometchat-uid-1") // Replace with your logged in user UID
              .then((user) => {
                console.log("Login Successful", { user });
                setUser(user);
              })
              .catch((error) => console.error("Login failed", error));
          } else {
            console.log("Already logged-in", { loggedInUser });
            setUser(loggedInUser);
          }
        });
      })
      .catch((error) => console.error("Initialization failed", error));
  }, []);

  useEffect(() => {
    if (user) {
      // Fetch user or group from CometChat SDK whose chat you want to load.

      /** Fetching User */
      const UID = "cometchat-uid-2"; // Replace with your actual UID
      CometChat.getUser(UID).then(
        (user) => {
          setSelectedUser(user);
        },
        (error) => {
          console.log("User fetching failed with error:", error);
        }
      );

      /** Fetching Group */
      // const GUID = "cometchat-guid-1"; // Replace with your actual GUID
      // CometChat.getGroup(GUID).then(
      //   (group) => {
      //     setSelectedGroup(group);
      //   },
      //   (error) => {
      //     console.log("User fetching failed with error:", error);
      //   }
      // );
    }
  }, [user]);

  return (
    /* The CometChatApp component requires a parent element with an explicit height and width
   to render properly. Ensure the container has defined dimensions, and adjust them as needed  
   based on your layout requirements. */
    <div style={{ width: "100vw", height: "100dvh" }}>
      <CometChatProvider>
        {(selectedUser || selectedGroup) && (
          <CometChatApp user={selectedUser} group={selectedGroup} />
        )}
      </CometChatProvider>
    </div>
  );
};

export default CometChatNoSSR;
```

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 Your Application**

1. **Start the development server**

   ```bash theme={null}
   npm run dev
   ```

2. **Verify the chat interface**

* In your browser, navigate to the `/chat` route `(e.g., http://localhost:3000/chat)`.
* Confirm that the chat experience loads as expected.

***

## **Additional Configuration Notes**

Ensure the following features are also turned on in your app > Chat > Features for full functionality:

* Message translation
* Polls
* Stickers
* Collaborative whiteboard
* Collaborative document
* Conversation starter
* Conversation summary
* Smart reply

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`:

```json theme={null}
{
  "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

### **Configuration Files**

* **CometChat Settings File** - Controls the appearance and behavior of your chat UI
* **Theme Configuration** - Customize colors, typography, and spacing
* **Localization Files** - Add support for different languages

***

## **Next Steps**

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

* **[Builder Configuration File](/ui-kit/react/builder-settings)** – Learn how to customize your integration.
* **[Builder Directory Structure](/ui-kit/react/builder-dir-structure)** – Understand the organization of the builder components.
* **[Advanced Theming](/ui-kit/react/theme)** – Modify themes and UI elements to match your brand.
* **[Additional Customizations](/ui-kit/react/builder-customisations)** – Customise the UI the way you want.

***