CometChat React UI Kit Installation Guide

This guide details the steps to integrate the CometChat UI Kit into a React application.

Prerequisites

Before starting, ensure you have the following:

1. Node.js and npm or yarn installed.
2. A CometChat App ID, Auth Key, and Region.

• Action: Register at the CometChat Dashboard, create an app, and navigate to "Credentials" to get these keys.

Step 1: Create a React Project

If you do not have an existing project, initialize a new React project using Vite (recommended).

npm create vite@latest my-app --template react-ts
cd my-app

Step 2: Install Dependencies

Install the CometChat React UI Kit package.

npm install @cometchat/chat-uikit-react

Step 3: Initialize CometChat UI Kit

You must initialize the UI Kit at the start of your application (e.g., in main.tsx or App.tsx) before calling any other CometChat methods.

Copy the following initialization code:

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

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
};

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("CometChat UI Kit initialized successfully.");
  })
  .catch((error) => {
    console.error("Initialization failed:", error);
  });

Step 4: User Login

Authenticate a user to access the chat. You can use a predefined UID (e.g., user1) or a created user from your dashboard.

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

const UID = "user1"; // Replace with the user's UID

CometChatUIKit.getLoggedinUser().then((user) => {
  if (!user) {
    CometChatUIKit.login(UID)
      .then((user) => {
        console.log("Login Successful:", { user });
      })
      .catch((error) => {
        console.log("Login failed:", error);
      });
  } else {
    console.log("User already logged in:", user);
  }
});

Step 5: Render Chat Interface

Choose a pre-built UI component to render the chat. The CometChatConversationsWithMessages component provides a classic 2-pane layout (sidebar + chat window).

Add this to your main App component:

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

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

export default App;