How to Add Chat to Your React App (with Code Examples)

Building chat from scratch is one of those things that looks straightforward until you’re four days in and still wiring up WebSocket reconnection logic. Real-time delivery, message persistence, typing indicators, file uploads, offline queueing, and push notifications – all of these are separate projects.

In this guide, we’ll add a complete chat module to your React application via the Ethora React Chat SDK. We’ll get you from npm installation to a fully functional group chat and direct messaging, along with an optional AI assistant. If you have an active React app set up, the process will take just about 15 minutes.

Here’s what you’ll need before you start:

• A React app (Create React App, Vite, or Next.js all work)
• Node.js 16+ and npm or yarn
• A free Ethora account – sign up here

Now, let’s move to adding chat.

Step 1. Install the SDK

npm install @ethora/chat-component-react

Or with yarn:

yarn add @ethora/chat-component-react

No manual installs of companion libraries and no version-matching headaches – UI components, a real-time messaging engine, and the required code are already included.

Step 2. Get Your App Credentials

1. Go to https://app.chat.ethora.com/register and create a free account
2. Create a new app from the dashboard
3. Copy your App ID and Host URL from the app settings page

By default, your application will be connected to Ethora’s cloud backend. If you have the Enterprise version and have set up a self-hosted server, then you will change your host URL.

Step 3. Add the Chat Component

Open whatever file renders your main layout and drop this in:

import React from 'react';
import { EthoraChat } from '@ethora/chat-component-react';

function App() {
  return (
    <div className="App">
      <h1>My Application</h1>

      <EthoraChat
        host="your-server.ethora.com"
        appId="your-app-id"
        theme="light"
        height="600px"
      />
    </div>
  );
}

export default App;

Just run npm start, and you’ll get a ready-to-use chat interface. It already supports chat rooms, group and private messages, file sharing, typing indicators, and read receipts – all working out of the box, no extra setup needed.

Next.js users the Chat component should be run in a browser, not on the server. Use the dynamic() method with ssr: false to avoid errors in rendering:

const EthoraChat = dynamic(() =>
import('@ethora/chat-component-react').then(m => m.EthoraChat), {'{
ssr: false }'})

Step 4. Customize the Appearance

Pass a theme object to match your app’s design system. At minimum, you’ll want to set primaryColor and hideBranding:

<EthoraChat
  host="your-server.ethora.com"
  appId="your-app-id"
  theme={{
    primaryColor: '#4F46E5',
    backgroundColor: '#F9FAFB',
    fontFamily: 'Inter, sans-serif',
    borderRadius: '12px',
    headerStyle: 'compact',
  }}
  hideBranding={true}
  height="100vh"
/>

Key theme props:

Prop	What it controls	Default
primaryColor	Buttons, links, sent message bubbles	#6C63FF
backgroundColor	Chat container background	#FFFFFF
fontFamily	Font stack for all text	System fonts
borderRadius	Message bubbles and containers	8px
headerStyle	full, compact, or hidden	full
hideBranding	Remove Ethora logo (paid plans)	false

Need deeper control? You can override individual component styles via CSS class names or swap out the theme object entirely. The SDK docs cover the full theming API.

Step 5. Connect Your Existing Auth

If your app already has users, you don’t want them to log into chat separately. Pass your current user through the user prop:

import { EthoraChat } from '@ethora/chat-component-react';

function App({ currentUser }) {
  return (
    <EthoraChat
      host="your-server.ethora.com"
      appId="your-app-id"
      user={{
        id:     currentUser.id,
        name:   currentUser.displayName,
        avatar: currentUser.avatarUrl,
        email:  currentUser.email,
      }}
      authToken={currentUser.ethoraToken}
    />
  );
}

authToken is a signed JWT your backend generates for each user. The SDK supports three auth approaches:

• JWT – sign a token on your backend, pass it here
• Social login – Google, Apple, Facebook, MetaMask
• Guest mode – anonymous users for public chat rooms, no account required

Don’t generate the JWT on the frontend
Your Ethora secret key should only live on your backend. Create a small API route that signs and returns the token for authenticated users.

Step 6. Add an AI Chatbot (Optional)

When building it from scratch, an AI chatbot is usually the hardest part which can take months. The SDK has an enableAI prop that spins up a RAG-powered assistant inside any chat room – trained on your own documents, not a generic model with no product context.

<EthoraChat
  host="your-server.ethora.com"
  appId="your-app-id"
  enableAI={true}
  aiConfig={{
    botName:        'Support Assistant',
    knowledgeBase: 'your-knowledge-base-id',
    model:         'gpt-4',
    welcomeMessage: 'Hi — I can answer questions about our product.',
  }}
/>

You set up the knowledge base in the Ethora dashboard – upload PDFs, point it at URLs, or paste in FAQ content. The bot answers from those sources and can hand off to a human agent when it hits something it can’t answer.

If you need the AI to run entirely on your own infrastructure – no data leaving your servers – that’s available on Enterprise plans. See self-hosted AI agents for the setup.

How Ethora Compares to Other React Chat SDKs

There are a few options in this space. The main practical differences come down to pricing model, self-hosting, and AI support:

Feature	Ethora	Stream	CometChat	TalkJS
npm package	Yes	Yes	Yes	Yes
Self-hosted option	Yes	No	Yes, but not a standard “click-to-deploy”	Yes, but not a standard “click-to-deploy”
Built-in AI chatbot	Yes (RAG)	No	No	No
Open-source core	Yes	No	No	No
End-to-end encryption	Yes	No	Yes	No
React Native SDK	Yes	Yes	Yes	Yes
White-label	All paid plans	Yes	Yes	Yes
Starting paid price	$99/mo	$399/mo	$239/mo	$279/mo

The flat pricing matters more than it looks. Stream, CometChat, and TalkJS all charge per monthly active user – as your app grows, so does the bill, often steeply. Ethora’s $99/month doesn’t move regardless of how many users you have.

---

Common Use Cases

Customer support
Integrate chat directly into your SaaS platform so that no user ever leaves your application. Add an AI-powered chatbot for frequently asked queries, and use human agents for higher-value matters.

Marketplaces
Enable the communication between buyers and sellers on your marketplace, without sharing contact details.

Healthcare/Telemedicine
HIPAA-compliant patient-provider communication with end-to-end encryption and data residency controls.

Team collaboration tools
Real-time discussion threads, file sharing, and notifications inside a project management or productivity app.

Social apps 
Group chat rooms, direct messaging, and user presence. Standard features, ready out of the box.

Gaming
In-game chat, team channels, and player-to-player messaging – low latency, scales to large concurrent user counts.

Next Steps

1. Create a free Ethora account and set up your first app
   
2. Run npm install @ethora/chat-component-react
   
3. Follow steps 3–5 above to get chat working in your app
   
4. Check the full SDK docs for push notifications, webhooks, and custom events
   
5. See pricing when you’re ready for production

Building a mobile app, too? The React Native Chat SDK covers iOS and Android from the same codebase.

Free plan includes messaging, file sharing, and up to 3 app environments. No credit card needed to start.

FAQ