One-to-One / Group Chat

Build a focused one-to-one or group chat experience in React Router with CometChat UI Kit.

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-react
Framework	React Router
Components	CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer
Layout	Single chat window — no sidebar, no conversation list
Prerequisite	Complete React Router Integration Steps 1–5 first
SSR	Lazy import + mounted check — CometChat requires browser APIs
Pattern	Support chat, embedded widgets, focused messaging

This guide builds a single chat window — no sidebar, no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, embedded widgets, or any focused messaging experience.

This assumes you’ve already completed React Router Integration (project created, UI Kit installed, CSS imported).

---

What You’re Building

Three components stacked vertically:

1. Chat header — displays recipient name, avatar, online status, and optional call buttons
2. Message list — real-time chat history with scrolling
3. Message composer — text input with media, emojis, and reactions

---

Step 1 — Create the CometChatNoSSR Component

This component handles init, login, fetches the target user/group, and renders the chat UI. It runs client-side only.

src

app

CometChatNoSSR

CometChatNoSSR.tsx

CometChatNoSSR.css

TypeScript

CometChatNoSSR.tsx

import React, { useEffect, useState } from "react";
import {
  CometChatMessageComposer,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatUIKit,
  UIKitSettingsBuilder,
} from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "./CometChatNoSSR.css";

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

const CometChatNoSSR: React.FC = () => {
  const [user, setUser] = useState<CometChat.User | undefined>(undefined);
  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(undefined);
  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>(undefined);

  useEffect(() => {
    if (typeof window === "undefined") return;

    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("Initialization completed successfully");
        CometChatUIKit.getLoggedinUser().then((loggedInUser) => {
          if (!loggedInUser) {
            CometChatUIKit.login("cometchat-uid-2")
              .then((user) => {
                console.log("Login Successful", { user });
                setUser(user);
              })
              .catch((error) => console.error("Login failed", error));
          } else {
            console.log("Already logged-in", { loggedInUser });
            setUser(loggedInUser);
          }
        });
      })
      .catch((error) => console.error("Initialization failed", error));
  }, []);

  useEffect(() => {
    if (user) {
      // Fetch the user whose chat you want to load
      const UID = "cometchat-uid-1";
      CometChat.getUser(UID).then(
        (user) => setSelectedUser(user),
        (error) => console.log("User fetching failed with error:", error)
      );

      // To load a group chat instead, uncomment below:
      // const GUID = "GUID";
      // CometChat.getGroup(GUID).then(
      //   (group) => setSelectedGroup(group),
      //   (error) => console.log("Group fetching failed with error:", error)
      // );
    }
  }, [user]);

  return user ? (
    <>
      {selectedUser || selectedGroup ? (
        <div className="messages-wrapper">
          <CometChatMessageHeader user={selectedUser} group={selectedGroup} />
          <CometChatMessageList user={selectedUser} group={selectedGroup} />
          <CometChatMessageComposer user={selectedUser} group={selectedGroup} />
        </div>
      ) : (
        <div className="empty-conversation">
          Set a user or group UID in CometChatNoSSR.tsx to start chatting
        </div>
      )}
    </>
  ) : undefined;
};

export default CometChatNoSSR;

CSS

CometChatNoSSR.css

.messages-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.empty-conversation {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  color: var(--cometchat-text-color-secondary, #727272);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
}

.cometchat .cometchat-message-composer {
  border-radius: 0px;
}

Key points:

• CometChat.getUser(UID) fetches the user object from the SDK — you need a real user object, not a manually constructed one.
• Pass either user or group to the message components, never both.
• The highlighted lines show where to set your credentials.

---

Switching Between User and Group Chat

To load a group chat instead of one-to-one, replace the getUser call with getGroup:

const GUID = "GUID"; // Replace with your actual Group ID

CometChat.getGroup(GUID)
  .then((group) => setSelectedGroup(group))
  .catch((error) => console.error("Failed to fetch group:", error));

---

Step 2 — Disable SSR and Add the Route

Create CometChat.tsx inside the routes folder:

routes/CometChat.tsx

import React, { lazy, Suspense, useEffect, useState } from "react";
import "@cometchat/chat-uikit-react/css-variables.css";

const CometChatNoSSR = lazy(() => import("../CometChatNoSSR/CometChatNoSSR"));

export default function CometChatRoute() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  return mounted ? (
    <Suspense fallback={<div>Loading...</div>}>
      <CometChatNoSSR />
    </Suspense>
  ) : (
    <div>Loading...</div>
  );
}

Add the route:

routes.ts

import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
  index("routes/home.tsx"),
  route("chat", "routes/CometChat.tsx"),
] satisfies RouteConfig;

---

Step 3 — Run the Project

npm

npm run dev

pnpm

pnpm dev

yarn

yarn dev

Navigate to /chat (e.g. http://localhost:5173/chat). You should see the chat window load with the conversation for the UID you set.

---

Next Steps

Theming

Customize colors, fonts, and styles to match your brand

Components Overview

Browse all prebuilt UI components

React Router Integration

Back to the main setup guide

Core Features

Chat features included out of the box