Group Chat Setup - CometChat Docs

Goal

By the end of this guide you will have a working group chat interface where users can create a new group, add members, and exchange messages in real time using the CometChat compound components.

Prerequisites

Completed the Integration Guide guide
A running CometChatProvider setup with valid credentials
Familiarity with the Conversations and Message List components

Components Used

Component / API	Purpose
`CometChatConversations`	Lists existing conversations including groups
`CometChatMessageHeader`	Displays group name, avatar, and member count
`CometChatMessageList`	Renders group messages in real time
`CometChatMessageComposer`	Text input for sending messages to the group
`CometChat.createGroup()`	SDK method to create a new group
`CometChat.joinGroup()`	SDK method to join an existing group
`CometChat.addMembersToGroup()`	SDK method to add members

Step 1: Set up the app shell

Wrap your application in CometChatProvider and create a layout with a sidebar for conversations and a main area for messages.

App.tsx

import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatProvider } from "@cometchat/chat-uikit-react";
import { GroupChat } from "./GroupChat";

function App() {
  return (
    <CometChatProvider>
      <GroupChat />
    </CometChatProvider>
  );
}

export default App;

Step 2: Create a new group

Use CometChat.createGroup() to programmatically create a group. You need a unique GUID, a name, and a group type (public, private, or password-protected).

async function createGroup() {
  const group = new CometChat.Group(
    "group-" + Date.now(), // unique GUID
    "My Team Chat",        // group name
    CometChat.GROUP_TYPE.PUBLIC // public, private, or password
  );

  try {
    const createdGroup = await CometChat.createGroup(group);
    console.log("Group created:", createdGroup.getName());
    return createdGroup;
  } catch (error) {
    console.error("Group creation failed:", error);
  }
}

Step 3: Add members to the group

After creating a group, add members using CometChat.addMembersToGroup(). Each member needs a UID and a scope (admin, moderator, or participant).

async function addMembers(guid: string, memberUids: string[]) {
  const members = memberUids.map(
    (uid) =>
      new CometChat.GroupMember(uid, CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT)
  );

  try {
    const response = await CometChat.addMembersToGroup(guid, members, []);
    console.log("Members added:", response);
  } catch (error) {
    console.error("Failed to add members:", error);
  }
}

Step 4: Join an existing group

For public groups, users can join without an invite using CometChat.joinGroup().

async function joinGroup(guid: string) {
  try {
    const group = await CometChat.joinGroup(guid, CometChat.GROUP_TYPE.PUBLIC);
    console.log("Joined group:", group.getName());
    return group;
  } catch (error) {
    console.error("Failed to join group:", error);
  }
}

Step 5: Display conversations and select a group

Use CometChatConversations to show the user’s conversations. When a group conversation is selected, pass the group object to the message components.

import { CometChatConversations } from "@cometchat/chat-uikit-react";

function GroupChat() {
  const [activeGroup, setActiveGroup] = useState<CometChat.Group | null>(null);

  function handleConversationClick(conversation: CometChat.Conversation) {
    const entity = conversation.getConversationWith();
    if (entity instanceof CometChat.Group) {
      setActiveGroup(entity);
    }
  }

  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <div style={{ width: "320px", borderRight: "1px solid #e0e0e0" }}>
        <CometChatConversations onItemClick={handleConversationClick} />
      </div>
      <div style={{ flex: 1 }}>
        {activeGroup && <GroupMessageView group={activeGroup} />}
      </div>
    </div>
  );
}

Step 6: Render the group message view

Combine CometChatMessageList and CometChatMessageComposer to display messages and allow sending within the selected group.

import {
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatMessageHeader,
} from "@cometchat/chat-uikit-react";

function GroupMessageView({ group }: { group: CometChat.Group }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
      <CometChatMessageHeader group={group} />

      <div style={{ flex: 1, overflow: "hidden" }}>
        <CometChatMessageList group={group} />
      </div>

      <CometChatMessageComposer group={group} />
    </div>
  );
}

Step 7: Add a create-group form

Provide a simple UI for users to create groups on the fly. Wire it to the createGroup function from Step 2.

import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function CreateGroupForm({ onCreate }: { onCreate: (group: CometChat.Group) => void }) {
  const [name, setName] = useState("");
  const [type, setType] = useState<string>(CometChat.GROUP_TYPE.PUBLIC);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!name.trim()) return;

    const group = new CometChat.Group(
      "group-" + Date.now(),
      name.trim(),
      type as typeof CometChat.GROUP_TYPE.PUBLIC
    );

    try {
      const createdGroup = await CometChat.createGroup(group);
      onCreate(createdGroup);
      setName("");
    } catch (error) {
      console.error("Group creation failed:", error);
    }
  }

  return (
    <form onSubmit={handleSubmit} style={{ padding: "12px" }}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Group name"
        style={{ width: "100%", marginBottom: "8px", padding: "8px" }}
      />
      <select
        value={type}
        onChange={(e) => setType(e.target.value)}
        style={{ width: "100%", marginBottom: "8px", padding: "8px" }}
      >
        <option value={CometChat.GROUP_TYPE.PUBLIC}>Public</option>
        <option value={CometChat.GROUP_TYPE.PRIVATE}>Private</option>
        <option value={CometChat.GROUP_TYPE.PASSWORD}>Password Protected</option>
      </select>
      <button type="submit" style={{ width: "100%", padding: "8px" }}>
        Create Group
      </button>
    </form>
  );
}

Complete Example

GroupChat.tsx

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

function CreateGroupForm({ onCreate }: { onCreate: (group: CometChat.Group) => void }) {
  const [name, setName] = useState("");
  const [type, setType] = useState<string>(CometChat.GROUP_TYPE.PUBLIC);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!name.trim()) return;

    const group = new CometChat.Group(
      "group-" + Date.now(),
      name.trim(),
      type as typeof CometChat.GROUP_TYPE.PUBLIC
    );

    try {
      const createdGroup = await CometChat.createGroup(group);
      onCreate(createdGroup);
      setName("");
    } catch (error) {
      console.error("Group creation failed:", error);
    }
  }

  return (
    <form onSubmit={handleSubmit} style={{ padding: "12px" }}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Group name"
        style={{ width: "100%", marginBottom: "8px", padding: "8px" }}
      />
      <select
        value={type}
        onChange={(e) => setType(e.target.value)}
        style={{ width: "100%", marginBottom: "8px", padding: "8px" }}
      >
        <option value={CometChat.GROUP_TYPE.PUBLIC}>Public</option>
        <option value={CometChat.GROUP_TYPE.PRIVATE}>Private</option>
        <option value={CometChat.GROUP_TYPE.PASSWORD}>Password Protected</option>
      </select>
      <button type="submit" style={{ width: "100%", padding: "8px" }}>
        Create Group
      </button>
    </form>
  );
}

function GroupMessageView({ group }: { group: CometChat.Group }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
      <CometChatMessageHeader group={group} />

      <div style={{ flex: 1, overflow: "hidden" }}>
        <CometChatMessageList group={group} />
      </div>

      <CometChatMessageComposer group={group} />
    </div>
  );
}

function GroupChat() {
  const [activeGroup, setActiveGroup] = useState<CometChat.Group | null>(null);
  const [showCreateForm, setShowCreateForm] = useState(false);

  function handleConversationClick(conversation: CometChat.Conversation) {
    const entity = conversation.getConversationWith();
    if (entity instanceof CometChat.Group) {
      setActiveGroup(entity);
    }
  }

  function handleGroupCreated(group: CometChat.Group) {
    setActiveGroup(group);
    setShowCreateForm(false);
  }

  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <div style={{ width: "320px", borderRight: "1px solid #e0e0e0", display: "flex", flexDirection: "column" }}>
        <div style={{ padding: "8px", borderBottom: "1px solid #e0e0e0" }}>
          <button
            onClick={() => setShowCreateForm(!showCreateForm)}
            style={{ width: "100%", padding: "8px" }}
          >
            {showCreateForm ? "Cancel" : "New Group"}
          </button>
        </div>

        {showCreateForm && <CreateGroupForm onCreate={handleGroupCreated} />}

        <div style={{ flex: 1, overflow: "hidden" }}>
          <CometChatConversations onItemClick={handleConversationClick} />
        </div>
      </div>

      <div style={{ flex: 1 }}>
        {activeGroup ? (
          <GroupMessageView group={activeGroup} />
        ) : (
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%" }}>
            <p>Select a group conversation or create a new group</p>
          </div>
        )}
      </div>
    </div>
  );
}

function App() {
  return (
    <CometChatProvider>
      <GroupChat />
    </CometChatProvider>
  );
}

export default App;

Next Steps

Groups — browse and join existing groups
Group Members — manage group membership
Message Header — customize the group header
CometChatProvider — configure the root provider

​Goal

​Prerequisites

​Components Used

​Step 1: Set up the app shell

​Step 2: Create a new group

​Step 3: Add members to the group

​Step 4: Join an existing group

​Step 5: Display conversations and select a group

​Step 6: Render the group message view

​Step 7: Add a create-group form

​Complete Example

​Next Steps