Methods

AI Integration Quick Reference

Field	Value
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)`, `CometChatUIKit.updateUser(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

The UI Kit wraps the Chat SDK methods to manage internal eventing and keep UI components synchronized. Use these wrapper methods instead of raw SDK calls.

CometChatUIKit.init(UIKitSettings) must be called 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 the server using the REST API and pass them to the client via loginWithAuthToken(). Never expose Auth Keys in production client code.

All methods are accessed via the CometChatUIKit class.

Init

Initializes the CometChat JavaScript SDK. Must be called on app startup before any other UI Kit method.

Replace APP_ID, REGION, and AUTH_KEY with values from the CometChat Dashboard. Auth Key is optional — use Auth Token for production.

JavaScript

import { CometChatUIKit, 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 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

To use session storage instead of the default local storage, 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

Checks for an existing session in the SDK. Returns the logged-in user details or null.

JavaScript

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

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

Simple authentication for development/POC. For production, use Auth Token.

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

Production-safe authentication that does not expose the Auth Key in client code.

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

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

Ends the current user session.

JavaScript

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

CometChatUIKit.logout();

Create user

Takes a User object and Auth Key, returns the created User object.

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

Takes a User object and Auth Key, returns the updated User object.

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

Sends a text message in a 1:1 or group chat. Takes a TextMessage object.

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

Sends a media message in a 1:1 or group chat. Takes a MediaMessage object.

Replace INPUT FILE OBJECT with the actual File object.

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

Sends a custom message (neither text nor media) in a 1:1 or group chat. Takes a CustomMessage object.

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

​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

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