Use UI Kit Methods

Initialize, authenticate, and send messages using CometChatUIKit wrapper methods

AI Agent Component Spec

{
  "class": "CometChatUIKit",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatUIKit } from \"@cometchat/chat-uikit-react\";",
  "methods": {
    "init": "CometChatUIKit.init(UIKitSettings)",
    "login": "CometChatUIKit.login(UID)",
    "loginWithAuthToken": "CometChatUIKit.loginWithAuthToken(authToken)",
    "logout": "CometChatUIKit.logout()",
    "getLoggedinUser": "CometChatUIKit.getLoggedinUser()",
    "createUser": "CometChatUIKit.createUser(user, authKey)",
    "updateUser": "CometChatUIKit.updateUser(user, authKey)",
    "sendTextMessage": "CometChatUIKit.sendTextMessage(textMessage)",
    "sendMediaMessage": "CometChatUIKit.sendMediaMessage(mediaMessage)",
    "sendCustomMessage": "CometChatUIKit.sendCustomMessage(customMessage)"
  },
  "note": "Use these wrapper methods instead of raw SDK calls — they manage internal UI Kit eventing"
}

Overview

The UI Kit provides wrapper methods around the CometChat SDK that manage internal eventing and keep UI components synchronized. Always use these methods instead of raw SDK calls when working with UI Kit components.

Time estimate: 10 minutes
Difficulty: Beginner

Prerequisites

• React.js integration completed
• CometChat app credentials from the dashboard

Steps

Step 1: Initialize the UI Kit

Call init() on app startup before any other UI Kit method:

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

const COMETCHAT_CONSTANTS = {
  APP_ID: "YOUR_APP_ID",
  REGION: "YOUR_REGION",
  AUTH_KEY: "YOUR_AUTH_KEY", // Optional for production
};

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

CometChatUIKit.init(UIKitSettings)?.then(() => {
  console.log("CometChat initialized");
  // Now you can login
});

CometChatUIKit.init() must complete before rendering any UI Kit components or calling any other methods.

Step 2: Check for existing session

Before logging in, check if a user session already exists:

CometChatUIKit.getLoggedinUser()
  .then((user) => {
    if (user) {
      console.log("User already logged in:", user.getName());
      // Mount your app
    } else {
      // Proceed to login
    }
  })
  .catch(console.error);

Step 3: Login with Auth Key (development only)

For development and testing, use the simple Auth Key login:

const UID = "user_uid";

CometChatUIKit.login(UID)
  .then((user) => {
    console.log("Login successful:", user.getName());
    // Mount your app
  })
  .catch(console.error);

Auth Key login is for development only. In production, use Auth Token authentication to avoid exposing your Auth Key in client code.

Step 4: Login with Auth Token (production)

For production, generate Auth Tokens on your server and pass them to the client:

// Auth token received from your backend
const authToken = "AUTH_TOKEN_FROM_SERVER";

CometChatUIKit.loginWithAuthToken(authToken)
  .then((user) => {
    console.log("Login successful:", user.getName());
    // Mount your app
  })
  .catch(console.error);

Step 5: Send messages programmatically

Use the wrapper methods to send messages while keeping UI components in sync:

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

// Send a text message
const sendText = async (receiverId: string, text: string) => {
  const textMessage = new CometChat.TextMessage(
    receiverId,
    text,
    CometChatUIKitConstants.MessageReceiverType.user
  );

  const message = await CometChatUIKit.sendTextMessage(textMessage);
  console.log("Message sent:", message);
};

// Send a media message
const sendMedia = async (receiverId: string, file: File) => {
  const mediaMessage = new CometChat.MediaMessage(
    receiverId,
    file,
    CometChatUIKitConstants.MessageTypes.file,
    CometChatUIKitConstants.MessageReceiverType.user
  );

  const message = await CometChatUIKit.sendMediaMessage(mediaMessage);
  console.log("Media sent:", message);
};

// Send a custom message
const sendCustom = async (receiverId: string, data: object) => {
  const customMessage = new CometChat.CustomMessage(
    receiverId,
    CometChatUIKitConstants.MessageReceiverType.user,
    "location",
    data
  );

  const message = await CometChatUIKit.sendCustomMessage(customMessage);
  console.log("Custom message sent:", message);
};

Step 6: Logout

End the user session when they sign out:

CometChatUIKit.logout()
  .then(() => {
    console.log("Logged out successfully");
    // Redirect to login screen
  })
  .catch(console.error);

Complete Example

import { useEffect, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatUIKit,
  UIKitSettingsBuilder,
  CometChatConversationsWithMessages,
} from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

const COMETCHAT_CONSTANTS = {
  APP_ID: "YOUR_APP_ID",
  REGION: "YOUR_REGION",
  AUTH_KEY: "YOUR_AUTH_KEY",
};

function App() {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    const initAndLogin = async () => {
      // Initialize
      const UIKitSettings = new UIKitSettingsBuilder()
        .setAppId(COMETCHAT_CONSTANTS.APP_ID)
        .setRegion(COMETCHAT_CONSTANTS.REGION)
        .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
        .subscribePresenceForFriends()
        .build();

      await CometChatUIKit.init(UIKitSettings);

      // Check existing session
      const existingUser = await CometChatUIKit.getLoggedinUser();
      
      if (!existingUser) {
        // Login
        await CometChatUIKit.login("YOUR_USER_UID");
      }

      setIsReady(true);
    };

    initAndLogin().catch(console.error);
  }, []);

  if (!isReady) {
    return <div>Loading...</div>;
  }

  return (
    <div style={{ height: "100vh" }}>
      <CometChatConversationsWithMessages />
    </div>
  );
}

export default App;

Advanced: Create and update users

Create or update users programmatically (requires Auth Key):

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

// Create a new user
const createUser = async (uid: string, name: string) => {
  const user = new CometChat.User(uid);
  user.setName(name);
  
  const createdUser = await CometChatUIKit.createUser(user, "AUTH_KEY");
  console.log("User created:", createdUser);
  return createdUser;
};

// Update an existing user
const updateUser = async (uid: string, newName: string) => {
  const user = new CometChat.User(uid);
  user.setName(newName);
  
  const updatedUser = await CometChatUIKit.updateUser(user, "AUTH_KEY");
  console.log("User updated:", updatedUser);
  return updatedUser;
};

Common Issues

Always use CometChatUIKit methods instead of direct CometChat SDK calls. The wrapper methods ensure UI components stay synchronized with the SDK state.

Issue	Solution
Components not rendering	Ensure init() completes before rendering
Messages not appearing in UI	Use CometChatUIKit.sendTextMessage() instead of CometChat.sendMessage()
Session not persisting	Check browser storage settings and CORS configuration

Next Steps

Events

Subscribe to UI Kit events

Messaging

Build messaging features

Related Guides

React.js Integration

Conversations

Theming