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

# Getting Started

> Getting Started — CometChat documentation.

<Accordion title="AI Integration Quick Reference">
  | Field     | Value                                                                                 |
  | --------- | ------------------------------------------------------------------------------------- |
  | Package   | `@cometchat/chat-uikit-angular`                                                       |
  | Peer deps | `@cometchat/uikit-elements`, `@cometchat/uikit-resources`, `@cometchat/uikit-shared`  |
  | AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
</Accordion>

## Start your first conversation

The CometChat UI Kit for Angular simplifies the process of integrating in-app chat functionality with essential messaging features. With a collection of prebuilt UI components, it offers seamless theming options, including light and dark themes, various fonts, colors, and extensive customization possibilities.

Supporting both one-to-one and group conversations, the CometChat UI Kit for Angular empowers developers to initiate chat functionalities effortlessly. Follow the guide below to begin implementing chat features into your Angular applications using CometChat Angular UI Kit.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/849be39e-intro_web_screens-d1702576c4ab3f961a1937dcbca01a8b.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=4a366cf2166134d88bb579eef1d6ee12" width="3600" height="2400" data-path="images/849be39e-intro_web_screens-d1702576c4ab3f961a1937dcbca01a8b.png" />
</Frame>

***

## Integrate with AI Coding Agents

Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. Your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.

```bash theme={null}
npx @cometchat/skills add
```

Use `--ide <name>` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` for all supported IDEs.

Then in your IDE:

```
/cometchat add chat to my app
```

The skill detects your Angular version, router setup, and existing auth system. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI. It reads your routes, modules, and components before proposing a placement (route or modal), shows the plan, and waits for your approval before writing code. Credentials are saved to `src/environments/environment.ts`.

After the first integration, re-run `/cometchat` to access the iteration menu: theme presets, 40+ features, component customization, production auth, user management, and diagnostics.

Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).

***

## Prerequisites

Before installing **UI Kit** for Angular, you need to create a CometChat application on the CometChat Dashboard, which comprises everything required in a chat service including users, groups, calls & messages. You will require the `App ID`, `AuthKey`, and `Region` of your CometChat application when initializing the **UI Kit**.

**i. Register on CometChat**

* You need to register on the **CometChat Dashboard** first. [Click here to sign up](https://app.cometchat.com/login).

**ii. Get Your Application Keys**

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

> Each CometChat application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.

**iii. IDE Setup**

* You have Node.js installed on your machine.
* You have a code editor like Visual Studio Code or Atom installed.
* You have npm or Yarn installed.
* You have Angular installed.

***

### Built With

* [Node](https://nodejs.org/)
* [npm](https://docs.npmjs.com/getting-started)
* [Angular CLI](https://angular.io/cli)

***

## Getting Started

Step 1

### Create a project

To get started with Angular, follow these steps:

1. Open your code editor.
2. Create a new project by initializing a new Angular application.
3. Navigate to your project directory and open the project in your code editor.
4. Begin developing your Angular application in the "src" directory.
5. Install additional dependencies as required.

***

Step 2

### Add Dependency

This developer kit is an add-on feature to CometChat JavaScript SDK, so installing it will also install the core Chat SDK.

```java theme={null}
npm install @cometchat/chat-uikit-angular@legacy
```

<Note>
  If your npm version is 3 through 6, install the below-mentioned peer dependencies as well.
</Note>

```java theme={null}
npm install @cometchat/uikit-elements @cometchat/uikit-resources @cometchat/uikit-shared
```

Step 3

### Link the assets

<Tabs>
  <Tab title="angular.json">
    ```json theme={null}
    "assets": [
    "src/favicon.ico",
    "src/assets",
    // add this inside angular.json build/assets section
    {
    	"glob": "**/*",
    	"input":  "./node_modules/@cometchat/chat-uikit-angular/assets/",
    	"output": "assets/"
    }],
    ```
  </Tab>
</Tabs>

Step 4

### Initialize CometChatUIkit

The [Init](/ui-kit/angular/methods#init) method initialises the settings required for CometChat. Please ensure to call this method before invoking any other methods from CometChat UI Kit or CometChat SDK.

<Note>
  The Auth Key is an optional property of the `UIKitSettings` Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the [Auth Token](/ui-kit/angular/methods#login-using-auth-token) method to log in securely.
</Note>

```javascript theme={null}
import { UIKitSettingsBuilder } from "@cometchat/uikit-shared";
import { CometChatUIKit } from "@cometchat/chat-uikit-angular";

const COMETCHAT_CONSTANTS = {
  APP_ID: "APP_ID", //Replace with your App ID
  REGION: "REGION", //Replace with your App Region
  AUTH_KEY: "AUTH_KEY", //Replace with your Auth Key
};

//create the builder
const UIKitSettings = new UIKitSettingsBuilder()
  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
  .setRegion(COMETCHAT_CONSTANTS.REGION)
  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
  .subscribePresenceForAllUsers()
  .build();

//Initialize CometChat UI Kit
CometChatUIKit.init(UIKitSettings)
  .then(() => {
    console.log("Initialization completed successfully");
    // You can now call login function.
  })
  .catch(console.log);
```

> Make sure to replace the **APP\_ID** with your CometChat appId, **AUTH\_KEY** with your CometChat app auth key and **REGION** with your app region in the above code.

<Note>
  You can choose between different storage methods to store data. By default, we use local storage. To learn more about available storage options and how to configure them, [click here](/ui-kit/angular/methods#setting-session-storage-mode).
</Note>

***

Step 5

### Login User

For login, you require a `UID`. You can create your own users on the CometChat Dashboard or via API. We have pre-generated test users: `cometchat-uid-1`, `cometchat-uid-2`, `cometchat-uid-3`, `cometchat-uid-4`, `cometchat-uid-5`.

The [Login](/ui-kit/angular/methods#login) method returns the User object containing all the information of the logged-in user.

<Note>
  This straightforward authentication method is ideal for proof-of-concept (POC) development or during the early stages of application development. For production environments, however, we strongly recommend using an [Auth Token](/ui-kit/angular/methods#login-using-auth-token) instead of an Auth Key to ensure enhanced security.
</Note>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { CometChatUIKit } from "@cometchat/chat-uikit-angular";

    const UID = "UID"; // Replace with your UID
    const authKey = "AUTH_KEY"; // Replace with your Auth Key

    CometChatUIKit.getLoggedinUser().then((user) => {
      if (!user) {
        // Login user
        CometChatUIKit.login({ uid: UID })
          .then((user) => {
            console.log("Login Successful:", { user });
            // mount your app
          })
          .catch(console.log);
      } else {
        // mount your app
      }
    });
    ```
  </Tab>

  <Tab title="TypeScript">
    ```ts theme={null}
    import { CometChatUIKit } from "@cometchat/chat-uikit-angular";

    const UID = "UID"; // Replace with your UID
    const authKey = "AUTH_KEY"; // Replace with your Auth Key

    CometChatUIKit.getLoggedinUser().then((user: CometChat.User) => {
      if (!user) {
        // Login user
        CometChatUIKit.login({ uid: UID })
          .then((user: CometChat.User) => {
            console.log("Login Successful:", { user });
            // mount your app
          })
          .catch(console.log);
      } else {
        // mount your app
      }
    });
    ```
  </Tab>
</Tabs>

***

Step 6

### Render Conversation With Message

[ConversationsWithMessages](/ui-kit/angular/conversations-with-messages) is a wrapper component that offers functionality to render both the [Conversations](/ui-kit/angular/conversations) and [Messages](/ui-kit/angular/messages) components. It also enables opening the [Messages](/ui-kit/angular/messages) by tapping on any conversation rendered in the list of conversations.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/849be39e-intro_web_screens-d1702576c4ab3f961a1937dcbca01a8b.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=4a366cf2166134d88bb579eef1d6ee12" width="3600" height="2400" data-path="images/849be39e-intro_web_screens-d1702576c4ab3f961a1937dcbca01a8b.png" />
</Frame>

[ConversationsWithMessages](/ui-kit/angular/conversations-with-messages) can be rendered by adding the following code snippet:

<Tabs>
  <Tab title="app.module.ts">
    ```ts theme={null}
    //import the component in your module.ts file
    import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { CometChatConversationsWithMessages } from '@cometchat/chat-uikit-angular';
    import { AppComponent } from './app.component';

    @NgModule({
      imports: [
        BrowserModule,
        CometChatConversationsWithMessages,
      ],
      declarations: [AppComponent],
      providers: [],
      bootstrap: [AppComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    export class AppModule { }
    ```
  </Tab>

  <Tab title="app.component.html">
    ```html theme={null}
    <!--render the component in your html file-->
    <cometchat-conversations-with-messages></cometchat-conversations-with-messages>; 
    ```
  </Tab>
</Tabs>

> It will automatically fetch the conversation data upon loading the list. If the conversation list is empty, you can start a new conversation.

Step 7

### Run the project

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    ng serve
    ```
  </Tab>
</Tabs>