Quickstart

Get started with CometChat UIKit for Angular in minutes

Follow these steps to integrate CometChat UIKit into your Angular application.

Prerequisites

• Node.js 18 or higher
• Angular 19, 20, or 21
• A CometChat account with App ID and Auth Key

Step 1: Install the Package

npm install @cometchat/chat-uikit-angular@5.0.0-beta.2

@cometchat/chat-sdk-javascript and dompurify are required peer dependencies. npm may install them automatically alongside the UIKit, but this is not guaranteed — it depends on your npm version and whether there are version conflicts. If you see errors related to missing CometChat or DOMPurify at runtime, install them explicitly:

npm install @cometchat/chat-sdk-javascript dompurify

Step 2: Import Styles

Add the CSS variables to your angular.json:

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css"
            ]
          }
        }
      }
    }
  }
}

Or import in your global styles.css:

@import '@cometchat/chat-uikit-angular/styles/css-variables.css';

If the @import doesn’t resolve, use the full node_modules path instead:

@import 'node_modules/@cometchat/chat-uikit-angular/styles/css-variables.css';

Step 3: Register UIKit Assets

The UIKit ships icons, images, and audio files that Angular’s build system won’t serve automatically. Add the assets path to your angular.json so they are copied to the output:

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "node_modules/@cometchat/chat-uikit-angular/src/lib/assets",
                "output": "assets"
              }
            ]
          }
        }
      }
    }
  }
}

Skipping this step will cause all UIKit icons, empty-state images, and notification sounds to fail with 404 errors.

Step 4: Initialize CometChat

Initialize CometChat in main.ts before bootstrapping the Angular app, using UIKitSettingsBuilder:

import { CometChatUIKit, UIKitSettingsBuilder } from '@cometchat/chat-uikit-angular';

const uiKitSettings = new UIKitSettingsBuilder()
  .setAppId('YOUR_APP_ID')
  .setRegion('YOUR_REGION')
  .setAuthKey('YOUR_AUTH_KEY')
  .subscribePresenceForAllUsers()
  .build();

CometChatUIKit.init(uiKitSettings)
  .then(() => {
    console.log('CometChat UIKit initialized successfully');
  })
  .catch((error) => {
    console.error('CometChat UIKit initialization failed:', error);
  });

To enable voice and video calling, install @cometchat/calls-sdk-javascript and add .setCallingEnabled(true) to the builder. Without this, call buttons are hidden across all components. See Call Features for details.

Step 5: Login a User

CometChatUIKit.login('USER_ID')
  .then((user) => {
    console.log('User logged in:', user);
  })
  .catch((error) => {
    console.error('Login failed:', error);
  });

Step 6: Add a Component

Add the conversations component to your template:

<cometchat-conversations></cometchat-conversations>

Make sure to replace YOUR_APP_ID, YOUR_AUTH_KEY, and YOUR_REGION with your actual CometChat credentials.

Next Steps

Integration Guide

Full setup guide with examples

Components

Explore all available components