Building A One To One/Group Chat Experience

AI Agent Component Spec

Package: @cometchat/chat-uikit-react
Framework: Next.js
Key components: CometChatMessageHeader + CometChatMessageList + CometChatMessageComposer
Required setup: CometChatUIKit.init(UIKitSettings) then CometChatUIKit.login("UID")
Parent guide: Next.js Integration

Single chat window without a conversation list. Supports both 1:1 and group messaging.

User Interface Preview

Key Components

Chat Header — recipient details and optional call/video buttons
Message View — real-time chat history
Message Composer — text input with media, emoji, and reaction support

Step-by-Step Guide

Implement the Chat Header

<CometChatMessageHeader user={selectedUser} group={selectedGroup} />

Build the Message View

<CometChatMessageList user={selectedUser} group={selectedGroup} />

Add the Message Composer

<CometChatMessageComposer user={selectedUser} group={selectedGroup} />

Implementation

Now we will create the CometChatNoSSR.tsx & CometChatNoSSR.css files. Here, we will initialize the CometChat UI Kit, log in a user, and build the messaging experience using CometChatMessageHeader, CometChatMessageList, and CometChatMessageComposer components.

src/
│── CometChatNoSSR/
│   ├── CometChatNoSSR.tsx
│   ├── CometChatNoSSR.css

TypeScript
CSS

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: "",
  REGION: "",
  AUTH_KEY: "",
};

const CometChatNoSSR: React.FC = () => {
  const [user, setUser] = useState<CometChat.User | undefined>(undefined);
  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(undefined);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>(undefined);

  useEffect(() => {
    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") //TODO: Replace with your actual UID
              .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) {
      const UID = "cometchat-uid-1";
      CometChat.getUser(UID).then(
        user => {
          setSelectedUser(user);
        }, error => {
          console.log("User fetching failed with error:", error);
        }
      );
      // const GUID = "GUID"
      // CometChat.getGroup(GUID).then(
      //   group => {
      //     setSelectedGroup(group);
      //   }, error => {
      //     console.log("User 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">Select Conversation to start</div>
      )}
    </>
  ) : undefined;
};

export default CometChatNoSSR;

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;
}

Select either a user or a group based on the chat requirement.

Fetching a User (One-on-One Chat)

const UID = "cometchat-uid-1";

CometChat.getUser(UID).then(
    user => {
        setSelectedUser(user);
    }, error => {
        console.log("User fetching failed with error:", error);
    }
);

Fetching a Group (Group Chat)

const GUID = "GUID"

CometChat.getGroup(GUID).then(
    group => {
        setSelectedGroup(group);
    }, error => {
        console.log("User fetching failed with error:", error);
    }
);

Disabling SSR for CometChatNoSSR.tsx in Next.js

In this update, we will disable Server-Side Rendering (SSR) for CometChatNoSSR.tsx while keeping the rest of the application’s SSR functionality intact. This ensures that the CometChat UI Kit components load only on the client-side, preventing SSR-related issues.

Disabling SSR in `index.tsx`

Modify your index.tsx file to dynamically import the CometChatNoSSR.tsx component with { ssr: false }.

index.tsx

import { Inter } from "next/font/google";
import dynamic from "next/dynamic";

import '@cometchat/chat-uikit-react/css-variables.css';

const inter = Inter({ subsets: ["latin"] });
const CometChatComponent = dynamic(() => import("../CometChatNoSSR/CometChatNoSSR"), {
  ssr: false,
});

export default function Home() {
  return <CometChatComponent />;
}

Why disable SSR?

The CometChat UI Kit depends on browser APIs (window, document, WebSockets).
Next.js pre-renders components on the server, which can cause errors with browser-specific features.
By setting { ssr: false }, we ensure that CometChatNoSSR.tsx only loads on the client.

Update Global CSS

Next, add the following styles to global.css to ensure CometChat UI Kit is properly styled.

global.css

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

/** Give your App a height of `100%`. Keep other CSS properties in the below selector as it is. */
.root {
  height: 100%;
}

#__next {
  height: 100%;
}

html,
body {
  height: 100%;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

Run the project

npm
pnpm
yarn

npm run dev

pnpm dev

yarn dev

For prop details and customization options, see the component reference pages: CometChatConversations, CometChatMessageList, CometChatMessageComposer, CometChatMessageHeader.

Next Steps

Advanced Customizations

Customize colors, fonts, and styles.

Components Overview

Browse all available UI components.

Next.js Integration

Next.js setup guide.

Core Features

Core chat features.

​User Interface Preview

​Key Components

​Step-by-Step Guide

​Implementation

​Fetching a User (One-on-One Chat)

​Fetching a Group (Group Chat)

​Disabling SSR in index.tsx

​Why disable SSR?

​Next Steps