(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 ? (
) : (
Set a user or group UID in CometChatNoSSR.tsx to start chatting
)}
) : undefined;
};
export default CometChatNoSSR;
```
***
## 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.