Methods

AI Agent Component Spec

Package: @cometchat/chat-uikit-react
Import: import { CometChatUIKit } from "@cometchat/chat-uikit-react";
Init: CometChatUIKit.init(UIKitSettings)
Login (dev): CometChatUIKit.login("UID") | Login (prod): CometChatUIKit.loginWithAuthToken("AUTH_TOKEN")
Other methods: CometChatUIKit.logout(), CometChatUIKit.getLoggedinUser(), CometChatUIKit.createUser(user)
Send messages: CometChatUIKit.sendTextMessage(), CometChatUIKit.sendMediaMessage(), CometChatUIKit.sendCustomMessage()
Note: Use these wrapper methods instead of raw SDK calls — they manage internal UI Kit eventing

Overview

The UI Kit’s core function is to extend the Chat SDK, essentially translating the raw data and functionality provided by the underlying methods into visually appealing and easy-to-use UI components. To effectively manage and synchronize the UI elements and data across all components in the UI Kit, we utilize internal events. These internal events enable us to keep track of changes in real time and ensure that the UI reflects the most current state of data. The CometChat UI Kit has thoughtfully encapsulated the critical Chat SDK methods within its wrapper to efficiently manage internal eventing. This layer of abstraction simplifies interaction with the underlying CometChat SDK, making it more user-friendly for developers.

You must call CometChatUIKit.init(UIKitSettings) before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.

Auth Key is for development/testing only. In production, generate Auth Tokens on your server using the REST API and pass them to the client. Never expose Auth Keys in production client code.

You can access the methods using the CometChatUIKit class. This class provides access to all the public methods exposed by the CometChat UI Kit.

Init

This method initializes the settings required for CometChat JavaScript SDK. First, ensure UIKitSettings is set and then call the init() method on the app startup.

Make sure you replace the APP_ID, REGION and AUTH_KEY with your CometChat App ID, Region and Auth Key in the below code. The Auth Key is an optional property of the UIKitSettings Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the Auth Token method to log in securely.

JavaScript

import { UIKitSettingsBuilder } from "@cometchat/uikit-shared"; //import shared package

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

//create the builder
const UIKitSettings = new UIKitSettingsBuilder()
  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
  .setRegion(COMETCHAT_CONSTANTS.REGION)
  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
  .subscribePresenceForFriends()
  .build();

//Initialize CometChat
CometChatUIKit.init(UIKitSettings)?.then(() => {
  //login your user
});

Setting Session Storage Mode

If you want to use session storage instead of the default local storage, you can configure it during initialization:

JavaScript
TypeScript

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";

const COMETCHAT_CONSTANTS = {
  APP_ID: "APP_ID", // Replace with your App ID
  REGION: "REGION", // Replace with your App Region
  AUTH_KEY: "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()
  .setStorageMode(CometChat.StorageMode.SESSION)
  .build();

//Initialize CometChat UI Kit with Session Storage
CometChatUIKit.init(UIKitSettings)?.then(() => {
    console.log("Initialization completed successfully with session storage");
    // You can now call login function.
  })
  .catch(console.log);

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";

const COMETCHAT_CONSTANTS = {
  APP_ID: "APP_ID", // Replace with your App ID
  REGION: "REGION", // Replace with your App Region
  AUTH_KEY: "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()
  .setStorageMode(CometChat.StorageMode.SESSION)
  .build();

//Initialize CometChat UI Kit with Session Storage
CometChatUIKit.init(UIKitSettings)?.then(() => {
    console.log("Initialization completed successfully with session storage");
    // You can now call login function.
  })
  .catch(console.log);

Get Logged In User

You can use this method to check if there is any existing session in the SDK. This method should return the details of the logged-in user.

JavaScript

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

CometChatUIKit.getLoggedinUser()
  .then((user) => {
    //Login user
  })
  .catch(console.log);

This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use AuthToken instead of Auth Key.

JavaScript
TypeScript

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

const UID = "UID";

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

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

const UID: string = "UID";

CometChatUIKit.getLoggedinUser()
  .then((user: CometChat.User) => {
    if (!user) {
      CometChatUIKit.login(UID)
        .then((user: CometChat.User) => {
          console.log("Login Successful:", { user });
          // You can now launch the component
        })
        .catch(console.log);
    } else {
      //user already logged in
      //You can now launch the component
    }
  })
  .catch(console.log);

This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.

Create a User via the CometChat API when the user signs up in your app.
Create an Auth Token via the CometChat API for the new user and save the token in your database.
Load the Auth Token in your client and pass it to the loginWithAuthToken() method.

JavaScript
TypeScript

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

const authToken = "AUTH_TOKEN";

CometChatUIKit.getLoggedinUser()
  .then((user) => {
    if (!user) {
      //Login user
      CometChatUIKit.loginWithAuthToken(authToken)
        .then((user) => {
          console.log("Login Successful:", { user });
          //mount your app
        })
        .catch(console.log);
    } else {
      //user already logged in
      //mount your app
    }
  })
  .catch(console.log);

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

const authToken: string = "AUTH_TOKEN";

CometChat.getLoggedinUser()
  .then((user: CometChat.User) => {
    if (!user) {
      //Login user
      CometChatUIKit.loginWithAuthToken(authToken)
        .then((user: CometChat.User) => {
          console.log("Login Successful:", { user });
          //mount your app
        })
        .catch(console.log);
    }
  })
  .catch(console.log);

Logout

This method is used to end the user session of the logged-in user

JavaScript

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

CometChatUIKit.logout();

Create user

This method takes a User object and the Auth Key as input parameters and returns the created User object if the request is successful.

JavaScript
TypeScript

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

const authKey = "AUTH_KEY";
const UID = "user1";
const name = "Kevin";

var user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.createUser(user, authKey)
  .then((user) => {
    console.log("user created", user);

    CometChatUIKit.login(UID, authKey)
      .then((user) => {
        console.log("Login Successful:", { user });
        //mount your app
      })
      .catch(console.log);
  })
  .catch(console.log);

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

const authKey: string = "AUTH_KEY";
const UID: string = "user1";
const name: string = "Kevin";

var user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.createUser(user, authKey)
  .then((user: CometChat.User) => {
    console.log("user created", user);

    CometChatUIKit.login(UID, authKey)
      .then((user: CometChat.User) => {
        console.log("Login Successful:", { user });
        //mount your app
      })
      .catch(console.log);
  })
  .catch(console.log);

Update user

This method takes a User object and the Auth Key as inputs and returns the updated User object on the successful execution of the request.

JavaScript
TypeScript

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

const authKey = "AUTH_KEY";
const UID = "user1";
const name = "Kevin Fernandez";

var user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.updateUser(user, authKey)
  .then((user) => {
    console.log("user updated", user);
  })
  .catch(console.log);

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package

const authKey: string = "AUTH_KEY";
const UID: string = "user1";
const name: string = "Kevin Fernandez";

var user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.updateUser(user, authKey)
  .then((user: CometChat.User) => {
    console.log("user updated", user);
  })
  .catch(console.log);

Base Message

Text message

This method sends a text message in a 1:1 or group chat. You need to pass a TextMessage object to it.

1:1 chat
Group chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package

const receiverID = "UID";
const messageText = "Hello world!";
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
const textMessage = new CometChat.TextMessage(
  receiverID,
  messageText,
  receiverType
);

CometChatUIKit.sendTextMessage(textMessage)
  .then((message) => {
    console.log("Message sent successfully:", message);
  })
  .catch(console.log);

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package

const receiverID = "GUID";
const messageText = "Hello world!";
const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
const textMessage = new CometChat.TextMessage(
  receiverID,
  messageText,
  receiverType
);

CometChatUIKit.sendMessage(textMessage)
  .then((message) => {
    console.log("Message sent successfully:", message);
  })
  .catch(console.log);

Media message

This method sends a media message in a 1:1 or group chat. You need to pass a MediaMessage object to it.

Make sure you replace the INPUT FILE OBJECT with the actual file.

1:1 chat
Group chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package

const receiverID = "UID";
const messageType = CometChatUIKitConstants.MessageTypes.file;
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
const mediaMessage = new CometChat.MediaMessage(
  receiverID,
  `INPUT FILE OBJECT`,
  messageType,
  receiverType
);

CometChatUIKit.sendMediaMessage(mediaMessage)
  .then((message) => {
    console.log("Media message sent successfully", message);
  })
  .catch(console.log);

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package

const receiverID = "GUID";
const messageType = CometChatUIKitConstants.MessageTypes.file;
const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
const mediaMessage = new CometChat.MediaMessage(
  receiverID,
  `INPUT FILE OBJECT`,
  messageType,
  receiverType
);

CometChatUIKit.sendMediaMessage(mediaMessage)
  .then((message) => {
    console.log("Media message sent successfully", message);
  })
  .catch(console.log);

Custom message

This method allows you to send custom messages which are neither text nor media messages.

1:1 chat
Group chat

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package

const receiverID = "UID";
const customData = {
  latitude: "50.6192171633316",
  longitude: "-72.68182268750002",
};
const customType = "location";
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
const customMessage = new CometChat.CustomMessage(
  receiverID,
  receiverType,
  customType,
  customData
);

CometChatUIKit.sendCustomMessage(customMessage)
  .then((message) => {
    console.log("custom message sent successfully", message);
  })
  .catch(console.log);

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import { CometChatUIKitConstants } from "@cometchat/uikit-resources"; //import shared package

const receiverID = "GUID";
const customData = {
  latitude: "50.6192171633316",
  longitude: "-72.68182268750002",
};
const customType = "location";
const receiverType = CometChatUIKitConstants.MessageReceiverType.group;
const customMessage = new CometChat.CustomMessage(
  receiverID,
  receiverType,
  customType,
  customData
);

CometChatUIKit.sendCustomMessage(customMessage)
  .then((message) => {
    console.log("custom message sent successfully", message);
  })
  .catch(console.log);

Common Failure Modes

Symptom	Cause	Fix
`init()` fails silently	Invalid App ID, Region, or Auth Key	Double-check credentials from the CometChat Dashboard
`login()` returns error	UID doesn’t exist or Auth Key is invalid	Create the user first via Dashboard or `createUser()` method
`getLoggedinUser()` returns null	User not logged in or session expired	Call `login()` or `loginWithAuthToken()` first
`sendTextMessage()` fails	User not logged in or invalid receiver	Ensure login completes before sending messages
Auth Key exposed in production	Using Auth Key instead of Auth Token	Switch to `loginWithAuthToken()` for production

Next Steps

Events

Subscribe to real-time events across UI Kit components.

Components Overview

Explore all available prebuilt UI components.

Theme

Customize colors, fonts, and styles.

Core Features

Learn about messaging, real-time updates, and more.

​Overview

​Methods

​Init

​Setting Session Storage Mode

​Get Logged In User

​Login using Auth Key

​Login using Auth Token

​Logout

​Create user

​Update user

​Base Message

​Text message

​Media message

​Custom message

​Common Failure Modes

​Next Steps

Events

Components Overview

Theme

Core Features

Overview

Methods

Init

Setting Session Storage Mode

Get Logged In User

Login using Auth Key

Login using Auth Token

Logout

Create user

Update user

Base Message

Text message

Media message

Custom message

Common Failure Modes

Next Steps