Overview

This guide demonstrates how to add chat to a JavaScript application using CometChat. Before you begin, we strongly recommend you read the Key Concepts guide.

I want to integrate with my app

1. Get your application keys
2. Add the CometChat dependency
3. Initialize CometChat
4. Register and Login your user
5. Integrate our UI Kits
6. Integrate our Chat Widget

I want to explore a sample app (includes UI)

Open the app folder in your favorite code editor and follow the steps mentioned in the README.md file.

React Sample App

Angular Sample App

Vue Sample App

Get your Application Keys

Signup for CometChat and then:

1. Create a new app
2. Head over to the API & Auth Keys section and note the Auth Key, App ID & Region

Add the CometChat Dependency

NPM

JavaScript

  npm install @cometchat/chat-sdk-javascript

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

// 1. Initialize (once at app startup)
const appSettings = new CometChat.AppSettingsBuilder()
  .setRegion("APP_REGION") // e.g. "us", "eu", "in"
  .subscribePresenceForAllUsers()
  .autoEstablishSocketConnection(true)
  .build();

await CometChat.init("APP_ID", appSettings);

// 2. Login (check session first)
const existing = await CometChat.getLoggedinUser();
if (!existing) {
  await CometChat.login("cometchat-uid-1", "AUTH_KEY"); // dev only — use Auth Token in production
}

Credentials: App ID, Region, Auth Key from CometChat Dashboard Test UIDs: cometchat-uid-1 through cometchat-uid-5 SSR: SDK requires browser APIs — initialize client-side only (useEffect / mounted)

The CometChat JavaScript SDK lets you add real-time messaging, voice, and video calling to any JavaScript application — React, Angular, Vue, Next.js, Nuxt, or vanilla JS.

Requirements

Requirement	Minimum Version
npm	8.x
Node.js	16

Works in all modern browsers (Chrome, Firefox, Safari, Edge) and SSR frameworks (Next.js, Nuxt) with client-side initialization.

Getting Started

1. Get your credentials

   Sign up for CometChat and create an app. Note your App ID, Region, and Auth Key from the Dashboard.

2. Install and initialize

   Add the SDK to your project and initialize it with your credentials. See Setup SDK.

3. Authenticate users

   Log in users with Auth Key (development) or Auth Token (production). See Authentication.

4. Start building

   Send your first message, make a call, or manage users and groups.

Features

Messaging

1:1 and group chat, threads, reactions, typing indicators, read receipts, and file sharing.

Voice & Video Calling

Ringing flows, direct call sessions, standalone calling, recording, virtual backgrounds, and screen sharing.

Users

Create, retrieve, and manage users. Track online/offline presence and block/unblock users.

Groups

Public, private, and password-protected groups with member management, roles, and ownership transfer.

Sample Apps

Explore working examples with full source code:

React

React sample app

Angular

Angular sample app

UI Kits

Skip the UI work — use pre-built, customizable components:

React

React UI Kit

Angular

Angular UI Kit

For the fastest integration, embed the Chat Widget with just a few lines of code.

Resources

Key Concepts

UIDs, GUIDs, auth tokens, and core SDK concepts

Message Structure

Message categories, types, and hierarchy

Changelog

Latest SDK version and release notes

Upgrading from V3

Migration guide for V3 users

Troubleshooting

Common issues and solutions