> ## 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.

# Calls SDK Setup

> Install and initialize the CometChat Calls SDK for JavaScript to enable voice and video calling in your application.

<Accordion title="AI Integration Quick Reference">
  ```bash theme={null}
  npm install @cometchat/calls-sdk-javascript
  ```

  ```javascript theme={null}
  import { CometChatCalls } from "@cometchat/calls-sdk-javascript";

  const callAppSetting = new CometChatCalls.CallAppSettingsBuilder()
    .setAppId("APP_ID")
    .setRegion("REGION")
    .build();

  CometChatCalls.init(callAppSetting).then(() => console.log("Calls SDK ready"));
  ```

  **Required:** App ID, Region from [CometChat Dashboard](https://app.cometchat.com)
</Accordion>

The Calls SDK handles the media layer for voice and video calls — camera, microphone, screen sharing, and the call UI. It's a separate package from the Chat SDK and requires its own initialization.

## Prerequisites

You need your App ID and Region from the [CometChat Dashboard](https://app.cometchat.com). If you haven't created an app yet, [sign up](https://app.cometchat.com) and create one.

If you're using the Chat SDK alongside (i.e., not [Standalone Calling](/sdk/javascript/standalone-calling)), make sure `CometChat.init()` completes before calling `CometChatCalls.init()`.

## Installation

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

  <Tab title="yarn">
    ```bash theme={null}
    yarn add @cometchat/calls-sdk-javascript
    ```
  </Tab>
</Tabs>

Then import wherever needed:

```javascript theme={null}
import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
```

## Initialization

Call `CometChatCalls.init()` on app startup, after the Chat SDK has initialized (if you're using it). The method takes a `CallAppSettings` object built with `CallAppSettingsBuilder`.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let appID: string = "APP_ID";
    let region: string = "REGION";

    const callAppSetting: CometChatCalls.CallAppSettings =
      new CometChatCalls.CallAppSettingsBuilder()
        .setAppId(appID)
        .setRegion(region)
        .build();

    CometChatCalls.init(callAppSetting).then(
      () => {
        console.log("CometChatCalls initialization completed successfully");
      },
      (error: unknown) => {
        console.log("CometChatCalls initialization failed with error:", error);
      }
    );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    let appID = "APP_ID";
    let region = "REGION";

    const callAppSetting = new CometChatCalls.CallAppSettingsBuilder()
      .setAppId(appID)
      .setRegion(region)
      .build();

    CometChatCalls.init(callAppSetting).then(
      () => {
        console.log("CometChatCalls initialization completed successfully");
      },
      (error) => {
        console.log("CometChatCalls initialization failed with error:", error);
      }
    );
    ```
  </Tab>
</Tabs>

Replace `APP_ID` and `REGION` with your credentials from the [Dashboard](https://app.cometchat.com).

<Warning>
  `CometChatCalls.init()` must be called before any other Calls SDK method. Calling `generateToken()`, `startSession()`, or registering listeners before `init()` will fail.
</Warning>

### CallAppSettings Options

| Method              | Description                                            |
| ------------------- | ------------------------------------------------------ |
| `setAppId(appID)`   | Your CometChat App ID. Required.                       |
| `setRegion(region)` | The region where your app was created. Required.       |
| `setHost(host)`     | Custom client URL for dedicated deployments. Optional. |

### Initialization Order

If you're using both the Chat SDK and Calls SDK, initialize them in sequence:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    // 1. Chat SDK first
    await CometChat.init(appID, appSettings);

    // 2. Then Calls SDK
    const callAppSetting: CometChatCalls.CallAppSettings = new CometChatCalls.CallAppSettingsBuilder()
      .setAppId(appID)
      .setRegion(region)
      .build();

    await CometChatCalls.init(callAppSetting);

    // 3. Now both SDKs are ready
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    // 1. Chat SDK first
    await CometChat.init(appID, appSettings);

    // 2. Then Calls SDK
    const callAppSetting = new CometChatCalls.CallAppSettingsBuilder()
      .setAppId(appID)
      .setRegion(region)
      .build();

    await CometChatCalls.init(callAppSetting);

    // 3. Now both SDKs are ready
    ```
  </Tab>
</Tabs>

For [Standalone Calling](/sdk/javascript/standalone-calling), you only need `CometChatCalls.init()` — no Chat SDK required.

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Default Calling" icon="phone-volume" href="/sdk/javascript/default-call">
    Implement the complete ringing call flow
  </Card>

  <Card title="Call Session" icon="video" href="/sdk/javascript/direct-call">
    Start and manage call sessions
  </Card>

  <Card title="Standalone Calling" icon="phone-flip" href="/sdk/javascript/standalone-calling">
    Use Calls SDK without the Chat SDK
  </Card>

  <Card title="Calling Overview" icon="phone" href="/sdk/javascript/calling-overview">
    Compare calling approaches and features
  </Card>
</CardGroup>