> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Set up the CometChat JavaScript SDK to add real-time chat features to your web app.

This guide demonstrates how to add chat to a JavaScript application using CometChat. Before you begin, we strongly recommend you read the [Key Concepts](/sdk/javascript/key-concepts) guide.

#### I want to integrate with my app

1. [Get your application keys](overview#get-your-application-keys)
2. [Add the CometChat dependency](overview#add-the-cometchat-dependency)
3. [Initialize CometChat](overview#initialize-cometchat)
4. [Register and Login your user](overview#register-and-login-your-user)
5. [Integrate our UI Kits](overview#integrate-our-ui-kits)
6. [Integrate our Chat Widget](overview#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](https://github.com/cometchat-pro/javascript-react-chat-app)

[Angular Sample App](https://github.com/cometchat-pro/javascript-angular-chat-app)

[Vue Sample App](https://github.com/cometchat-pro/javascript-vue-chat-app)

### Get your Application Keys

[Signup for CometChat](https://app.cometchat.com) 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

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
      npm install @cometchat/chat-sdk-javascript
    ```

    ```javascript theme={null}
    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](https://app.cometchat.com)
    **Test UIDs:** `cometchat-uid-1` through `cometchat-uid-5`
    **SSR:** SDK requires browser APIs — initialize client-side only (`useEffect` / `mounted`)
  </Tab>
</Tabs>

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](/sdk/javascript/setup-sdk#ssr-compatibility).

## Getting Started

<Steps>
  <Step title="Get your credentials">
    [Sign up for CometChat](https://app.cometchat.com) and create an app. Note
    your App ID, Region, and Auth Key from the Dashboard.
  </Step>

  <Step title="Install and initialize">
    Add the SDK to your project and initialize it with your credentials. See
    [Setup SDK](/sdk/javascript/setup-sdk).
  </Step>

  <Step title="Authenticate users">
    Log in users with Auth Key (development) or Auth Token (production). See
    [Authentication](/sdk/javascript/authentication-overview).
  </Step>

  <Step title="Start building">
    Send your first message, make a call, or manage users and groups.
  </Step>
</Steps>

## Features

<CardGroup cols={2}>
  <Card title="Messaging" icon="comments" href="/sdk/javascript/send-message">
    1:1 and group chat, threads, reactions, typing indicators, read receipts,
    and file sharing.
  </Card>

  <Card title="Voice & Video Calling" icon="phone" href="/sdk/javascript/calling-overview">
    Ringing flows, direct call sessions, standalone calling, recording, virtual
    backgrounds, and screen sharing.
  </Card>

  <Card title="Users" icon="user" href="/sdk/javascript/users-overview">
    Create, retrieve, and manage users. Track online/offline presence and
    block/unblock users.
  </Card>

  <Card title="Groups" icon="users" href="/sdk/javascript/groups-overview">
    Public, private, and password-protected groups with member management,
    roles, and ownership transfer.
  </Card>
</CardGroup>

## Sample Apps

Explore working examples with full source code:

<CardGroup cols={3}>
  <Card title="React" icon="react" href="https://github.com/cometchat-pro/javascript-react-chat-app">
    React sample app
  </Card>

  <Card title="Angular" icon="angular" href="https://github.com/cometchat-pro/javascript-angular-chat-app">
    Angular sample app
  </Card>
</CardGroup>

## UI Kits

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

<CardGroup cols={3}>
  <Card title="React" icon="react" href="/ui-kit/react/overview">
    React UI Kit
  </Card>

  <Card title="Angular" icon="angular" href="/ui-kit/angular/overview">
    Angular UI Kit
  </Card>
</CardGroup>

For the fastest integration, embed the [Chat Widget](/widget/html/overview) with just a few lines of code.

## Resources

<CardGroup cols={2}>
  <Card title="Key Concepts" icon="lightbulb" href="/sdk/javascript/key-concepts">
    UIDs, GUIDs, auth tokens, and core SDK concepts
  </Card>

  <Card title="Message Structure" icon="sitemap" href="/sdk/javascript/message-structure-and-hierarchy">
    Message categories, types, and hierarchy
  </Card>

  <Card title="Changelog" icon="clock-rotate-left" href="/sdk/javascript/changelog">
    Latest SDK version and release notes
  </Card>

  <Card title="Upgrading from V3" icon="arrow-up" href="/sdk/javascript/upgrading-from-v3">
    Migration guide for V3 users
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/sdk/javascript/troubleshooting">
    Common issues and solutions
  </Card>
</CardGroup>