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

# Call

> Overview of CometChat React UI Kit calling features, including incoming calls, outgoing calls, call logs, and call components.

<Accordion title="AI Integration Quick Reference">
  | Field            | Value                                                                                                                                                                                                                                                                                                                                                     |
  | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Packages         | `@cometchat/chat-uikit-react` + `@cometchat/calls-sdk-javascript` (`npm install @cometchat/calls-sdk-javascript`)                                                                                                                                                                                                                                         |
  | Required setup   | Call `.setCallingEnabled(true)` on `UIKitSettingsBuilder` during init — Calls SDK must also be installed                                                                                                                                                                                                                                                  |
  | Call features    | Incoming Call, Outgoing Call, Call Logs, Call Buttons (in Message Header)                                                                                                                                                                                                                                                                                 |
  | Key components   | `CometChatMessageHeader` → [Message Header](/ui-kit/react/components/message-header) (includes call buttons), `CometChatIncomingCall` → [Incoming Call](/ui-kit/react/components/incoming-call), `CometChatOutgoingCall` → [Outgoing Call](/ui-kit/react/components/outgoing-call), `CometChatCallLogs` → [Call Logs](/ui-kit/react/components/call-logs) |
  | Enabling         | Set `.setCallingEnabled(true)` on `UIKitSettingsBuilder` to activate call UI components                                                                                                                                                                                                                                                                   |
  | CSS class prefix | `.cometchat-`                                                                                                                                                                                                                                                                                                                                             |
</Accordion>

## Overview

CometChat Calls integrates 1:1 and group audio/video calling into the React UI Kit. Install the Calls SDK and enable calling via `.setCallingEnabled(true)` on `UIKitSettingsBuilder` to activate call components.

<Note>
  Ensure you have called `CometChatUIKit.init()` with `.setCallingEnabled(true)` and `CometChatUIKit.login()` before rendering. See [React.js Integration](/ui-kit/react/integration-react).
</Note>

## Integration

Install the Calls SDK and enable calling:

```bash lines theme={null}
npm install @cometchat/calls-sdk-javascript
```

Then set `.setCallingEnabled(true)` on your `UIKitSettingsBuilder`:

```tsx theme={null}
const settings = new UIKitSettingsBuilder()
  .setAppId("YOUR_APP_ID")
  .setRegion("YOUR_REGION")
  .setAuthKey("YOUR_AUTH_KEY")
  .setCallingEnabled(true)
  .build();

await CometChatUIKit.init(settings);
await CometChatUIKit.login("cometchat-uid-1");
```

Call buttons render inside [MessageHeader](/ui-kit/react/components/message-header) when calling is enabled.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/G6Puyz_3Zlaowa9R/images/cf123e9d-calling_call_buttons_web_screens-a0a134d7d742a761689aaebe2d6e71c2.png?fit=max&auto=format&n=G6Puyz_3Zlaowa9R&q=85&s=8601817ca724e45d941853f9d61ed10b" width="1282" height="802" data-path="images/cf123e9d-calling_call_buttons_web_screens-a0a134d7d742a761689aaebe2d6e71c2.png" />
</Frame>

## Features

### Incoming Call

The [Incoming Call](/ui-kit/react/components/incoming-call) component displays a call screen when a call is received, showing caller info with accept/reject options.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/816facad-calling_incoming_call_web_screens-b969721c9da4153958fb08c3b7d7ec3c.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=aee0d5b816e7caadc28291b4896a50aa" width="1282" height="802" data-path="images/816facad-calling_incoming_call_web_screens-b969721c9da4153958fb08c3b7d7ec3c.png" />
</Frame>

### Outgoing Call

The [Outgoing Call](/ui-kit/react/components/outgoing-call) component displays an outgoing call screen with recipient info and call status. Transitions to the ongoing call screen when the receiver accepts.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/k0f_g7UwNe_JINeP/images/444a971e-calling_outgoing_call_web_screens-ace6b41a91fe1a23b9e1aaf99e51793e.png?fit=max&auto=format&n=k0f_g7UwNe_JINeP&q=85&s=f6510966e30016453fae1be8c07014d3" width="1282" height="802" data-path="images/444a971e-calling_outgoing_call_web_screens-ace6b41a91fe1a23b9e1aaf99e51793e.png" />
</Frame>

### Call Logs

The [Call Logs](/ui-kit/react/components/call-logs) component displays call history — caller, time, and duration.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mq8rEbFfi0JjKmkM/images/68a2bfe8-calling_call_log_web_screens-e16bee4ca9212ac07ca2d21b8a5374bc.png?fit=max&auto=format&n=mq8rEbFfi0JjKmkM&q=85&s=c6a315488212a5a5bca3edee9d99a1e2" width="1282" height="802" data-path="images/68a2bfe8-calling_call_log_web_screens-e16bee4ca9212ac07ca2d21b8a5374bc.png" />
</Frame>

## Next Steps

<CardGroup cols={2}>
  <Card title="Message Header" icon="phone-flip" href="/ui-kit/react/components/message-header">
    Message header with integrated call buttons
  </Card>

  <Card title="Incoming Call" icon="phone-arrow-down-left" href="/ui-kit/react/components/incoming-call">
    Incoming call notifications and UI
  </Card>

  <Card title="Call Logs" icon="clock-rotate-left" href="/ui-kit/react/components/call-logs">
    Call history and details
  </Card>

  <Card title="Core Features" icon="comments" href="/ui-kit/react/core-features">
    Core chat features
  </Card>
</CardGroup>