Getting Started With CometChat React UI Kit

​

Prerequisites

• User Management
• Group Chat & Messaging
• Voice & Video Calling
• Real-time Notifications

To initialize the UI Kit, you will need the following credentials from your CometChat application:

1. App ID
2. Auth Key
3. Region

Ensure you have these details ready before proceeding with the installation and configuration.

​

Register & Set Up CometChat

​

Step 1: Register on CometChat

​

Step 2: Get Your Application Keys

1. Navigate to Application, then select the Credentials section.
2. Note down the following keys:
   • App ID
   • Auth Key
   • Region

​

Step 3: Set Up Your Development Environment

• Node.js installed on your machine.
• A code editor like Visual Studio Code or Cursor.
• npm or Yarn package manager installed.

​

Built With

​

Getting Started

​

Step 1: Create a React Project

1. Open your code editor (e.g., VS Code, Cursor).
2. Initialize a new React project using one of the following methods:

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

3. Open the project directory in your code editor.
4. Start developing your React components inside the src directory.
5. Install additional dependencies as needed.

​

Step 2: Install Dependencies

• To install the CometChat UI Kit

npm install @cometchat/chat-uikit-react

​

Step 3: Initialize CometChat UI Kit

• Initialization Process

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

/**
 * CometChat Constants - Replace with your actual credentials
 */
const COMETCHAT_CONSTANTS = {
  APP_ID: "APP_ID", // Replace with your actual App ID from CometChat
  REGION: "REGION", // Replace with your App's Region
  AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key (leave blank if using Auth Token)
};

/**
 * Configure the CometChat UI Kit using the UIKitSettingsBuilder.
 * This setup determines how the chat UI behaves.
 */
const UIKitSettings = new UIKitSettingsBuilder()
  .setAppId(COMETCHAT_CONSTANTS.APP_ID) // Assign the App ID
  .setRegion(COMETCHAT_CONSTANTS.REGION) // Assign the App's Region
  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY) // Assign the Authentication Key (if applicable)
  .subscribePresenceForAllUsers() // Enable real-time presence updates for all users
  .build(); // Build the final configuration

/**
 * Initialize the CometChat UI Kit with the configured settings.
 * Once initialized successfully, you can proceed with user authentication and chat features.
 */
CometChatUIKit.init(UIKitSettings)!
  .then(() => {
    console.log("CometChat UI Kit initialized successfully.");
    // You can now call login function to authenticate users
  })
  .catch((error) => {
    console.error("CometChat UI Kit initialization failed:", error); // Log errors if initialization fails
  });

​

Step 4: User Login

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

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

const UID = "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
  }
});

​

Step 5: Choose a Chat Experience

​

1️⃣ Conversation List + Message View

• Two-panel layout – Displays the conversation list on the left and the active chat window on the right.
• One-to-one & group conversations – Seamless switching between private and group chats.
• Multiple conversations – Effortlessly switch between different chat windows.
• Easy navigation – Intuitive UI for finding and accessing chats quickly.
• Tap-to-view on mobile – In mobile layouts, tapping a conversation opens the Message View, optimizing space.
• Real-time updates – Auto-refreshes messages and conversation lists.
• Message sync – Ensures messages stay updated across all sessions and devices.

• Desktop-first applications
• Apps requiring a rich user experience with seamless navigation
• Platforms supporting both individual and group messaging
• Mobile-friendly apps needing a tap-to-open message view

Tip: You can fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.

​

2️⃣ One-to-One/Group Chat

• Dedicated chat window – Ideal for one-on-one or group messaging.
• No conversation list – Users directly enter the chat without navigating through a list.
• Supports both One-to-One and Group Chats – Easily configurable with minor code modifications.
• Optimized for mobile – Full-screen chat experience without distractions.
• Seamless real-time communication – Auto-updates messages for a smooth experience.
• Ideal for support chat or community-based messaging.

• Support chat applications – Direct user-agent communication.
• Apps focusing on direct messaging – No distractions from other conversations.
• Community or group chat applications – A structured way to interact in groups.
• Mobile-first applications – Designed for compact and dedicated messaging experiences.

Tip: You can fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.

​

3️⃣ Tab-Based Chat Experience

• Tab Navigation – Easily switch between Chat, Call Logs, Users, and Settings.
• Dedicated Chat Window – Full-screen messaging experience for focused communication.
• No Sidebar – Unlike multi-panel UI, this design prioritizes individual interactions.
• Unified Experience – Users can seamlessly manage conversations, call history, and settings from a single interface.
• Scalable for future features – Easily extend to include more functionalities such as notifications or contact management.
• Optimized for both desktop and mobile – Ensures a smooth experience across different screen sizes.

• Apps requiring structured navigation – Clearly separate chat, calls, and settings.
• Multi-feature chat apps – Supporting different functionalities in an organized way.
• Mobile-first applications – Ideal for apps needing tab-based UI for easy access to features.
• Support & enterprise chat solutions – Perfect for help desks, business chat platforms, and customer support apps.

Tip: You can fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key.) in the code, and immediately preview how the UI and messages respond in real time.

​

Build Your Own Chat Experience

• Apps that require a fully customized chat experience.
• Developers who want to extend functionalities and modify UI components.
• Businesses integrating chat seamlessly into existing platforms.

• React Sample App – Fully functional sample applications to accelerate your development.
• Core Features – Learn about messaging, real-time updates, and other essential capabilities.
• Components – Utilize prebuilt UI elements or customize them to fit your design.
• Themes – Adjust colors, fonts, and styles to match your branding.
• Build Your Own UI – Prefer a custom UI over our UI Kits? Explore our SDKs to create a tailored chat experience.

​

iFrame Support

import { CometChatFrameProvider } from "@cometchat/ui-kit";

<CometChatFrameProvider iframeId="cometchat-frame">
  <App />
</CometChatFrameProvider>

​

Next Steps

• Integrate Conversation List + Message
• Integrate One-to-One Chat
• Integrate Tab-Based Chat
• Advanced Customizations