Quickstart

Get a working chat UI in 5 minutes with CometChat React UI Kit.

AI Agent Component Spec

Field	Value
Package	@cometchat/chat-uikit-react
Peer deps	react >=18, react-dom >=18, rxjs ^7.8.1
Init	CometChatUIKit.init(UIKitSettings) — must resolve before login()
Login	CometChatUIKit.login("UID") — must resolve before rendering components
Order	init() → login() → render. Breaking this order = blank screen

Overview

This quickstart gets you from zero to a working two-panel chat UI in 5 steps. You’ll create a React app, install the UI Kit, initialize CometChat, log in a test user, and render a conversation list with message view.

Time estimate: 5 minutes
Difficulty: Beginner

Prerequisites

• Node.js v16+ and npm installed
• CometChat account with App ID, Region, and Auth Key from the CometChat Dashboard

---

Step 1: Create a React Project

Create a new React app using Vite:

npm create vite@latest my-chat-app -- --template react-ts
cd my-chat-app

---

Step 2: Install the UI Kit

Install the CometChat React UI Kit:

npm install @cometchat/chat-uikit-react

---

Step 3: Initialize CometChat

Replace the contents of src/main.tsx with:

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
import App from "./App";
import "./index.css";

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

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

CometChatUIKit.init(UIKitSettings)
  .then(() => {
    console.log("CometChat initialized");
    ReactDOM.createRoot(document.getElementById("root")!).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
  })
  .catch(console.error);

Auth Key is for development only. In production, use Auth Tokens generated server-side.

---

Step 4: Login and Render Chat UI

Replace the contents of src/App.tsx with:

src/App.tsx

import { useEffect, useState } from "react";
import {
  CometChatUIKit,
  CometChatConversationsWithMessages,
} from "@cometchat/chat-uikit-react";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    CometChatUIKit.getLoggedinUser().then((user) => {
      if (user) {
        setIsLoggedIn(true);
      } else {
        CometChatUIKit.login("cometchat-uid-1") // Test user
          .then(() => setIsLoggedIn(true))
          .catch(console.error);
      }
    });
  }, []);

  if (!isLoggedIn) {
    return <div>Loading...</div>;
  }

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <CometChatConversationsWithMessages />
    </div>
  );
}

export default App;

Use test UIDs for development: cometchat-uid-1, cometchat-uid-2, cometchat-uid-3, cometchat-uid-4, cometchat-uid-5

---

Step 5: Add CSS and Run

Add the CSS import to src/index.css:

src/index.css

@import url("@cometchat/chat-uikit-react/css-variables.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Start the development server:

npm run dev

Open http://localhost:5173 to see your chat UI.

---

Complete Example

Here’s the full implementation in two files:

src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";
import App from "./App";
import "./index.css";

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

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

CometChatUIKit.init(UIKitSettings)
  .then(() => {
    console.log("CometChat initialized");
    ReactDOM.createRoot(document.getElementById("root")!).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
  })
  .catch(console.error);

src/App.tsx

import { useEffect, useState } from "react";
import {
  CometChatUIKit,
  CometChatConversationsWithMessages,
} from "@cometchat/chat-uikit-react";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    CometChatUIKit.getLoggedinUser().then((user) => {
      if (user) {
        setIsLoggedIn(true);
      } else {
        CometChatUIKit.login("cometchat-uid-1") // Test user
          .then(() => setIsLoggedIn(true))
          .catch(console.error);
      }
    });
  }, []);

  if (!isLoggedIn) {
    return <div>Loading...</div>;
  }

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <CometChatConversationsWithMessages />
    </div>
  );
}

export default App;

src/index.css

@import url("@cometchat/chat-uikit-react/css-variables.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Advanced Configuration

Voice/Video Calling

To enable calling features, install the calls SDK:

npm install @cometchat/calls-sdk-javascript

Custom Styling

Override CSS variables to customize the theme:

:root {
  --cometchat-primary-color: #6851D6;
  --cometchat-background-color-01: #FFFFFF;
}

See Theming for full customization options.

---

Common Issues

If you encounter problems during setup, check these common issues:

Issue	Solution
Blank screen	init() must complete before calling login(). Ensure you render components only after initialization.
Missing styles	CSS import required. Add @import url("@cometchat/chat-uikit-react/css-variables.css"); to your CSS file.
Login fails	Check your credentials (App ID, Region, Auth Key) in the CometChat Dashboard.
Components not rendering	Ensure login() completes before rendering CometChat components. Use state to track login status.

For more detailed troubleshooting, see the Troubleshooting Guide.

---

Next Steps

React.js Integration

Full integration guide with more chat layouts

Components Overview

Browse all prebuilt UI components

Theming

Customize colors, fonts, and styles

Troubleshooting

Common issues and fixes

Related Guides

Next.js Integration

React Router Integration

Astro Integration