Building chat apps in React from scratch is an ambitious task that comes with a range of complex challenges, such as
01.
Setting up real-time infrastructure for message exchanges
02.
Managing message delivery and storage
03.
Handling presence and typing indicators
04.
Implementing user authentication
05.
Scaling for multiple users and heavy usage
06.
Designing an intuitive and functional chat interface
CometChat’s UI Kit simplifies this process by offering pre-built, customizable react components that eliminate the heavy lifting, while still allowing developers the flexibility to align the chat experience with their unique app requirements.
In this tutorial, you will learn how to integrate CometChat UI Kit into a React TypeScript application without adding any extra state libraries or databases. This matters because real-time chat capabilities greatly boost user engagement in web apps.
View the full working code on GitHub
Prefer watching over reading? We've created a complete video walkthrough for this tutorial so you can follow along visually, step-by-step.
Why use CometChat instead of building it yourself?
Before we dive in, here’s a quick look at why using CometChat saves you weeks of dev effort:
| DIY Approach | With CometChat |
|---|---|
Build servers, auth, and UI from scratch
| Fully managed infrastructure + UI Kit
|
Weeks to set up basic features
| Chat-ready in a day
|
Manual WebSocket, presence, and delivery logic
| Real-time messaging and presence handled out-of-the-box
|
Prerequisites
Knowledge
Basic React fundamentals (components, hooks) in TypeScript.
Familiarity with TypeScript syntax (types, interfaces).
Basic CSS for styling.
Tools
Node.js 14+ installed.
npm (comes with Node.js) or yarn.
A modern code editor (e.g., VS Code) with TypeScript support.
A CometChat account with an App ID and Auth Key (created via the CometChat Dashboard).
Getting started
Step 1: Create your React app
We’ll use Vite for faster development:
Step 2: Install CometChat dependencies
Now, install the CometChat SDK and UI Kit:
Create a .env file in your root folder:
Step 3: Initialize CometChat (Refer to GitHub)
From this step onward, we’ll reference code directly from the GitHub repository. You can follow along using your own setup, or clone the repo for a ready-to-run project.
In src/cometchatConfig.ts, you will see the code to initialize CometChat using TypeScript.
This file imports the CometChat object from the SDK, configures AppSettings (including presence tracking), and initializes the SDK using CometChat.init(). This setup logs a success or error message in the console.
You can view the full initialization setup in cometchatConfig.ts
In src/App.tsx, the call to initializeCometChat() is placed before rendering the App component. This ensures CometChat is ready before any UI elements load.
Check out how it's integrated in App.tsx
Step 4: Build the UI (Refer to GitHub)
Now that CometChat is initialized, let’s build the UI components that will allow users to log in, view conversations, and start chatting. These components are housed in the src/components folder of the GitHub repo and follow a modular structure to keep things clean and manageable.
Login.tsx
Renders a simple input field for entering a user ID.
On submit, it calls CometChat.login(userID) to authenticate the user.
On success, it passes the logged-in user back to the main app via onLoginSuccess(user).
View the complete code in Login.tsx
CometChatSelector.tsx
Defines props to allow interaction with parent components. Uses state to track the logged-in user and the selected chat item.
Fetches the logged-in user when the component mounts.
Displays chat conversations if a user is logged in.
Updates the selected chat item when clicked.
View the complete code in CometChatSelector
App.tsx
Imports dependencies: Loads React hooks, CometChat components, styles, and configurations.
Manages state: Tracks the selected user (selectedUser) and selected group (selectedGroup).
Handles conversation selection: Uses CometChatSelector to allow users to pick a conversation. Updates state based on whether the selected item is a user or a group.
Displays chat interface: If a user or group is selected, it renders the header (CometChatMessageHeader), message list (CometChatMessageList), and message composer (CometChatMessageComposer).
Handles empty selection: Shows a message prompting the user to select a conversation if none is chosen.
Step 5: Authenticate & Send/Receive Messages
Now that your UI is wired up, let’s test it by logging in and starting a real-time conversation.
We’ll walk through how to authenticate a user, fetch conversations, and start exchanging messages using CometChat’s pre-built components.
Logging in
In Login.tsx, the CometChat.login(userID) method handles user authentication with CometChat. When login is successful, the authenticated user object is passed back to the parent component using the onLoginSuccess(user) callback. This allows App.tsx to store the logged-in user in state and render the chat interface accordingly.
Fetching conversations
Once authenticated, the CometChatSelector.tsx component fetches available conversations. These could be one-on-one or group chats. When a user clicks on a chat, the selected item is passed to App.tsx, which updates the state and triggers the messaging interface to render.
Sending & receiving messages
In App.tsx, once a conversation is selected, the following UI Kit components take over:
CometChatMessageHeader displays the chat title, online status, and actions
CometChatMessageList renders the real-time chat feed
CometChatMessageComposer lets users type and send messages
These components handle message sending, delivery status, and live updates out-of-the-box.
You can review how all of this is wired together in App.tsx.
Step 6: Test & Verify
Start the dev server.
Navigate to http://localhost:3000 in your browser.
After log in, you will see a group conversation. Click on it to open the chat view.
Type a message in the input box and click Send. Messages should appear immediately in the chat view.
Troubleshooting
If CometChat fails to initialize, verify that REACT_APP_COMETCHAT_APP_ID, REGION, and AUTH_KEY values in .env are correct.
If conversations do not load, ensure that at least one user exists in your CometChat Dashboard.
If sending messages fails, confirm the recipient user is created and online in CometChat.
Customization Options
You can:
Override UI styling using theme, palette, typography
Customize component behavior using props
Implement notifications, moderation, and more
Going Further
Once you’re comfortable with the base setup, try:
Add support for sending images or files.
Persist message history locally using IndexedDB or another client-side store.
Implement typing indicators and message read receipts.
Extend to voice or video calls using CometChat’s SDK.
Conclusion
You’ve successfully built a fully functional, real-time chat application using React, TypeScript, and CometChat’s UI Kit. Whether you’re embedding chat into an existing product or launching a new one, this foundation gives you a reliable starting point.
Get the full source code on GitHub
Happy building!
Feel free to open issues or share feedback on GitHub.
Frequently Asked Questions (FAQ)
How long does it take to build a React chat app?
With CometChat UI Kit, you can build a functional React chat app in under 45 minutes. This includes setup, authentication, and real-time messaging. Building from scratch would typically take 3-6 months for a production-ready solution.
How much does it cost to build a React chat app?
Using CometChat's build plan, you can build a React chat app at no cost for up to 25 users. .
Can I customize the appearance of my React chat app?
Yes, CometChat UI Kit components are fully customizable. You can modify colors, fonts, layouts, and behaviors through props and CSS.
Is the React chat app scalable?
CometChat automatically handles scaling, supporting millions of concurrent users. The infrastructure scales elastically based on your usage, with no additional configuration required on your part.
How do I add authentication to my React chat app?
This tutorial uses CometChat's built-in authentication. For production apps, implement server-side authentication that generates auth tokens without exposing your Auth Key to the client.
Can I add voice and video calling to my React chat app?
Yes, CometChat supports voice and video calling. You can enable these features with a few lines of code using the CometChat Calling SDK.
How do I handle message history in my React chat app?
CometChat automatically stores and retrieves message history. Messages are persisted on CometChat's servers and synchronized across all devices. You can fetch historical messages using pagination.
What about React chat app security?
CometChat provides enterprise-grade security with:
End-to-end encryption for messages
SOC2 Type 2 compliance
GDPR compliance
Built-in profanity filtering
Can I build a React Native chat app with the same code?
While this tutorial focuses on React web apps, CometChat offers a separate React Native UI Kit that follows similar patterns, allowing you to reuse much of your knowledge.
Haris Kumar
Lead Content Strategist , CometChat
