One-to-One / Group Chat

Build a single chat window for one-to-one or group messaging in Next.js (App Router) with CometChat UI Kit.

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-react
Framework	Next.js (App Router)
Components	CometChatMessageHeader, CometChatMessageList, CometChatMessageComposer
Layout	Single chat window — no sidebar, no conversation list
Prerequisite	Complete Next.js Integration first
SSR	Component loaded with dynamic(() => import(...), { ssr: false })
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 Next.js Integration (project created, UI Kit installed, init + login working).

---

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

---

Full Code

Create the client component with the chat UI, then import it dynamically in your page.

app/chat/CometChatClient.tsx

'use client';

import { useEffect, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatProvider,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/styles";

const RECIPIENT_UID = "cometchat-uid-2"; // Replace with the UID you want to chat with

export default function CometChatClient() {
  const [chatUser, setChatUser] = useState<CometChat.User | undefined>(undefined);

  useEffect(() => {
    CometChat.getUser(RECIPIENT_UID).then(
      (user) => setChatUser(user),
      (error) => console.error("User fetch failed:", error)
    );
  }, []);

  if (!chatUser) return <div>Loading chat...</div>;

  return (
    <CometChatProvider>
      <div style={{ display: "flex", flexDirection: "column", height: "100vh", width: "100%" }}>
        <CometChatMessageHeader user={chatUser} />
        <CometChatMessageList user={chatUser} />
        <CometChatMessageComposer user={chatUser} />
      </div>
    </CometChatProvider>
  );
}

app/chat/page.tsx

import dynamic from 'next/dynamic';

const CometChatClient = dynamic(() => import('./CometChatClient'), { ssr: false });

export default function ChatPage() {
  return <CometChatClient />;
}

Key points:

• 'use client' is required — CometChat components use browser APIs (DOM, WebSocket).
• dynamic(() => import(...), { ssr: false }) prevents server-side rendering of the chat component.
• CometChat.getUser(UID) fetches the full 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 RECIPIENT_UID should be a user that exists in your CometChat app. Use one of the pre-created test UIDs: cometchat-uid-1 through cometchat-uid-5.

---

Switching to Group Chat

To load a group chat instead of one-to-one, fetch a Group object and pass it to the message components:

app/chat/CometChatClient.tsx

'use client';

import { useEffect, useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatProvider,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/styles";

const GROUP_ID = "cometchat-guid-1"; // Replace with your Group ID

export default function CometChatClient() {
  const [chatGroup, setChatGroup] = useState<CometChat.Group | undefined>(undefined);

  useEffect(() => {
    CometChat.getGroup(GROUP_ID).then(
      (group) => setChatGroup(group),
      (error) => console.error("Group fetch failed:", error)
    );
  }, []);

  if (!chatGroup) return <div>Loading chat...</div>;

  return (
    <CometChatProvider>
      <div style={{ display: "flex", flexDirection: "column", height: "100vh", width: "100%" }}>
        <CometChatMessageHeader group={chatGroup} />
        <CometChatMessageList group={chatGroup} />
        <CometChatMessageComposer group={chatGroup} />
      </div>
    </CometChatProvider>
  );
}

The only difference: use CometChat.getGroup(GUID) instead of CometChat.getUser(UID), and pass group instead of user.

---

Run

npm run dev

Open http://localhost:3000/chat. You should see the chat window load with the conversation for the UID or GUID you set.

---

Next Steps

Conversation List + Messages

Two-panel layout with a sidebar

Tab-Based Chat

Tabbed navigation with Chats, Calls, Users

Components Overview

Browse all prebuilt UI components