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

# JavaScript SDK

> Add real-time chat, voice, and video to your JavaScript application with the CometChat SDK.

<Accordion title="AI Integration Quick Reference">
  ```bash 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`)
</Accordion>

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>