Skip to main content
The UIKit 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() must be called before rendering any UIKit 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.

​
UIKitSettingsBuilder

UIKitSettingsBuilder is a fluent builder for constructing the UIKitSettings object passed to CometChatUIKit.init().
MethodParameterDescription
setAppId(appId)stringYour CometChat App ID from the Dashboard
setRegion(region)stringApp region (e.g. 'us', 'eu')
setAuthKey(authKey)stringAuth Key for dev/testing — use Auth Token in production
subscribePresenceForAllUsers()—Subscribe to presence updates for all users
subscribePresenceForFriends()—Subscribe to presence updates for friends only
subscribePresenceForRoles(roles)string[]Subscribe to presence updates for users with specific roles
setRoles(roles)string[]Set roles filter independently of presence subscription
setAutoEstablishSocketConnection(autoEstablish)booleanControl whether the WebSocket connects automatically on init
setAdminHost(adminHost)stringOverride the admin API host (custom/on-premise deployments)
setClientHost(clientHost)stringOverride the client API host (custom/on-premise deployments)
setStorageMode(storageMode)CometChat.StorageModeSet the storage mode for SDK data persistence
build()—Returns the configured UIKitSettings instance
import { UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';

const UIKitSettings = new UIKitSettingsBuilder()
  .setAppId('APP_ID')
  .setRegion('REGION')
  .setAuthKey('AUTH_KEY')
  .subscribePresenceForFriends()
  .setAutoEstablishSocketConnection(true)
  .build();

​
Methods

All methods are accessed via the CometChatUIKit class.

​
Init

Initializes the CometChat SDK. Must be called on app startup before any other UIKit method.
Replace APP_ID, REGION, and AUTH_KEY with values from the CometChat Dashboard. Auth Key is optional — use Auth Token for production.
import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';

const COMETCHAT_CONSTANTS = {
  APP_ID: 'APP_ID',
  REGION: 'REGION',
  AUTH_KEY: 'AUTH_KEY',
};

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

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

​
Get Logged In User

Checks for an existing session in the SDK. Returns the logged-in user details or null. 
import { CometChatUIKit } from '@cometchat/chat-uikit-angular';

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

​
Login using Auth Key

Simple authentication for development/POC. For production, use Auth Token. 
import { CometChatUIKit } from '@cometchat/chat-uikit-angular';

const UID = 'UID';

CometChatUIKit.getLoggedinUser()
  .then((user) => {
    if (!user) {
      CometChatUIKit.login(UID)
        .then((user) => {
          console.log('Login Successful:', { user });
        })
        .catch(console.log);
    }
  })
  .catch(console.log);

​
Login using Auth Token

Production-safe authentication that does not expose the Auth Key in client code.
  1. Create a User via the CometChat API when the user signs up in your app.
  2. Create an Auth Token via the CometChat API for the new user and save the token in your database.
  3. Load the Auth Token in your client and pass it to the loginWithAuthToken() method.
import { CometChatUIKit } from '@cometchat/chat-uikit-angular';

const authToken = 'AUTH_TOKEN';

CometChatUIKit.getLoggedinUser()
  .then((user) => {
    if (!user) {
      CometChatUIKit.loginWithAuthToken(authToken)
        .then((user) => {
          console.log('Login Successful:', { user });
        })
        .catch(console.log);
    }
  })
  .catch(console.log);

​
Logout

Ends the current user session. 
import { CometChatUIKit } from '@cometchat/chat-uikit-angular';

CometChatUIKit.logout();

​
Create User

Takes a User object and Auth Key, returns the created User object. 
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatUIKit } from '@cometchat/chat-uikit-angular';

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

const user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.createUser(user, authKey)
  .then((user) => {
    console.log('User created:', user);
  })
  .catch(console.log);

​
Update User

Takes a User object and Auth Key, returns the updated User object. 
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatUIKit } from '@cometchat/chat-uikit-angular';

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

const user = new CometChat.User(UID);
user.setName(name);
CometChatUIKit.updateUser(user, authKey)
  .then((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. 
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';

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

​
Media Message

Sends a media message in a 1:1 or group chat. Takes a MediaMessage object.
Replace file with the actual File object.
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';

const receiverID = 'UID';
const messageType = CometChatUIKitConstants.MessageTypes.file;
const receiverType = CometChatUIKitConstants.MessageReceiverType.user;
const mediaMessage = new CometChat.MediaMessage(receiverID, file, 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. 
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatUIKit } from '@cometchat/chat-uikit-angular';
import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';

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