Skip to main content
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

​
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