> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# One-to-One / Group Chat

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

<Accordion title="AI Integration Quick Reference">
  | Field        | Value                                                                               |
  | ------------ | ----------------------------------------------------------------------------------- |
  | Package      | `@cometchat/chat-uikit-react`                                                       |
  | Framework    | React.js                                                                            |
  | Components   | `CometChatMessageHeader`, `CometChatMessageList`, `CometChatMessageComposer`        |
  | Layout       | Single chat window — no sidebar, no conversation list                               |
  | Prerequisite | Complete [React.js Integration](/ui-kit/react/react-js-integration) Steps 1–5 first |
  | Pattern      | Support chat, embedded widgets, focused messaging                                   |
</Accordion>

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.js Integration](/ui-kit/react/react-js-integration) (project created, UI Kit installed, init + login working, CSS imported).

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/sVDw7GNAn28WGWte/images/4d640baf-chat_experience_one_on_one-db9d6d7716241c59bb026625b05019fe.png?fit=max&auto=format&n=sVDw7GNAn28WGWte&q=85&s=06320cc3e46aa95cb0538c84df500aae" width="1282" height="802" data-path="images/4d640baf-chat_experience_one_on_one-db9d6d7716241c59bb026625b05019fe.png" />
</Frame>

[<img src="https://mintcdn.com/cometchat-22654f5b/yTI4I4kRxoDgb1t-/images/30d34521-play-codesandbox.svg?fit=max&auto=format&n=yTI4I4kRxoDgb1t-&q=85&s=0f01bdcfd9001740f479687e70911c7c" width="165" height="32" data-path="images/30d34521-play-codesandbox.svg" />](https://link.cometchat.com/react-one-on-one)

> Fork the sandbox, insert your CometChat credentials (App ID, Region, Auth Key), and preview the UI in real time.

***

## 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

No new files to create — everything goes in `App.tsx` and `App.css`.

***

## Step 1 — Update App.tsx and App.css

The app fetches a user (or group) on mount and renders the three message components.

<Tabs>
  <Tab title="TypeScript">
    ```tsx title="App.tsx" highlight={17, 25} lines theme={null}
    import { useEffect, useState } from "react";
    import {
      CometChatMessageComposer,
      CometChatMessageHeader,
      CometChatMessageList,
    } from "@cometchat/chat-uikit-react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import "./App.css";
    import "@cometchat/chat-uikit-react/css-variables.css";

    function App() {
      const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(undefined);
      const [selectedGroup, setSelectedGroup] = useState<CometChat.Group | undefined>(undefined);

      useEffect(() => {
        // 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)
        // );
      }, []);

      return (
        <>
          {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 App.tsx to start chatting
            </div>
          )}
        </>
      );
    }

    export default App;
    ```
  </Tab>

  <Tab title="CSS">
    ```css title="App.css" lines theme={null}
    @import url("@cometchat/chat-uikit-react/css-variables.css");

    #root {
      text-align: center;
      width: 100vw;
      height: 100vh;
      background-color: #282c34;
    }

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

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

    .cometchat .cometchat-message-composer {
      border-radius: 0px;
    }
    ```
  </Tab>
</Tabs>

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 the UID or swap to group chat.

***

## Switching Between User and Group Chat

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

```tsx lines highlight={1} theme={null}
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));
```

You can also determine this dynamically — for example, based on a route parameter or a selection from another part of your app.

***

## Step 2 — Run the Project

<Tabs>
  <Tab title="Vite">
    ```bash lines theme={null}
    npm run dev
    ```
  </Tab>

  <Tab title="Create React App">
    ```bash lines theme={null}
    npm start
    ```
  </Tab>
</Tabs>

You should see the chat window load with the conversation for the UID you set.

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theme">
    Customize colors, fonts, and styles to match your brand
  </Card>

  <Card title="Components Overview" icon="grid-2" href="/ui-kit/react/components-overview">
    Browse all prebuilt UI components
  </Card>

  <Card title="React.js Integration" icon="react" href="/ui-kit/react/react-js-integration">
    Back to the main setup guide
  </Card>

  <Card title="Core Features" icon="comments" href="/ui-kit/react/core-features">
    Chat features included out of the box
  </Card>
</CardGroup>