React Chat SDK: Open-Source Chat Component for React.js

Add real-time messaging to your React app in minutes. Ethora’s React chat component is open-source, fully customizable, and scales from startups to enterprise — with AI chatbots, file sharing, and group chat built in.

Get started

Open-source (AGPL) React · TypeScript 1,000 MAU free

Ethora React chat component running in a web app

npm package@ethora/chat-component

AI chatbots built inGPT-4 · Llama · Mistral

Secure by default, at every layer.

End-to-end encryptionSelf-hostableHIPAA-ready

Why Developers Choose Ethora for React.js Chat

We built Ethora with developers in mind, that’s why it has everything the best web chat SDK should have. Ethora ticks every box - developer-friendly, flexible, and full-featured.

Fast integration

Speed

Clear API documentation and pre-built components will help you build faster. With our plug-and-play SDK, you can build simple chats in hours.

Modular architecture

Modular

Build the app you need by adding components that fit your vision - from simple emojis and read reports to AI-powered functions.

Enterprise-ready

Enterprise

Designed to handle any number of users, Ethora is a secure web chat SDK with end-to-end encryption, custom auth, and on-premise options.

Fully customizable

Customizable

Modify any component to match your design and meet UX requirements. Tailor layouts, colors, and features to meet your unique needs.

Scalable

Scale

Ethora SDK makes web chat integration effortless, and it’s ideal for startups. You can start small - build your MVP and add features as your project and the number of users grow.

Works with everything

Compatible

Ethora fits naturally into your existing tech stack. No need for workarounds, it’s compatible with React.js, Node.js, and other popular web stacks.

Core Features of Ethora React Chat SDK

Whether you’re building 1-on-1 chats or a communication tool for big teams or communities, our SDK for web chat provides you with all the instruments to create engaging user experiences. Select any feature to see the details.

Ethora’s robust real-time chat SDK for web ensures a smooth flow of conversation with instant message delivery and notifications, without any friction.

Empower users to connect the way they want. Our SDK group chat web capabilities make it easy to create private and group conversations, as well as invite-only chats.

Let users share more than just words. Create more interactive and engaging communication, enabling users to share images, videos, and other media.

Create a fun and open environment with emojis and personalized reactions to enable users to express themselves and immerse them in the conversation.

Makes conversations flow naturally. Real-time activity indicators create a feeling of immediate and natural dialogue.

Ensure users never lose important messages. Message history and synchronization across devices is a critical part of any modern web communication SDK.

Enable users to control access and permissions with robust authentication methods and role-based user management.

Give users confidence that their data and communication stay private. Ethora’s enterprise-level encryption will keep all the sensitive data protected.

Pre-Built UI Components

Ethora’s web chat integration SDK comes packed with flexible, ready-to-use React components. You can launch fast while keeping all the control. Each component is fully extendable, so you can create a unique chat solution according to your requirements and design.

Chat Window

Complete chat interface with messages, input, and tools. Extend chat windows with custom layouts or theming, and add additional features, like pinned messages, mentions, threads, and more.

Message List

Real-time stream of messages. Easily integrated into any front-end architecture and can be fully customized to meet your needs.

Message Input

A flexible input field for mentions, attachments, slash commands, etc. You can extend its capabilities by adding quick actions, commands, polls, voice messages, or other custom options.

Channel Selector

Provides users with a richer messaging experience by allowing them to easily switch between chats. You can add filters, folders, or whatever fits your use case.

User Presence & Status

Real-time indicators of user’s status: who’s online, offline, away from the keyboard, in a meeting, busy, or any other status you’ll want to integrate.

Quick Start: Add Chat to Your React App in 5 Minutes

Ethora's React chat component is available as an npm package. You can go from zero to a working chat room in under five minutes. Here's how:

Create a new React project (or use your existing one)

bash

npm create vite@latest my-chat-app -- --template react-ts
cd my-chat-app
npm install

Install the Ethora chat component
bash
```
npm install @ethora/chat-component
```

Import and render the Chat component

Replace the contents of src/App.tsx with:

tsx

import { Chat } from "@ethora/chat-component";
import "./App.css";

function App() {
  return (
    <Chat />
  );
}

export default App;

Run your app
bash
```
npm run dev
```
Open http://localhost:5173/ in your browser — your chat app is live. The component ships with a built-in demo mode so you can test messaging immediately without any backend setup.
Connect to your own backend (optional)

When you're ready to go beyond the demo, sign up at app.chat.ethora.com to get your own App ID and App Secret. Pass them as props to the <Chat /> component to connect to your own private chat server with your own users, rooms, and data.

For enterprise deployments requiring full data ownership, you can deploy Ethora on your own infrastructure (AWS, Azure, GCP, or on-premises).

Customize the chat UI to match your brand

Every aspect of the Ethora React chat component is configurable. Pass props to control colors, layout, fonts and behavior — or override individual sub-components for full design control.

App.tsx

import { Chat } from "@ethora/chat-component";
import { config } from "./chat.config";

function App() {
  return (
    <Chat
      config={{
        colors: {
          primary:   "#0052CD",
          secondary: "#E7EAF9",
        },
        ...config,   // everything else lives here
      }}
    />
  );
}

The full IConfig exposes 60+ options across these areas — keep them in a separate chat.config.ts and spread it in, so your JSX stays clean. See the full config reference for every prop.

What config covers

colors & typography

Brand colors, bubble & input backgrounds, icons, font family, sizes and weights.

auth & login

Google, JWT, custom or default login, token refresh and fallback screens.

layout & rooms

Toggle header, room list, menus, custom rooms and hidden rooms.

notifications

In-app toasts and web push — position, duration, icons and click handlers.

behavior & events

Typing indicators, message filters, translations and onMessage event hooks.

Feature Matrix: What’s Included

Ethora’s React chat SDK includes everything you need to build production-ready messaging. Here’s the full feature breakdown by plan:

Feature	Free $0/mo	Most popular Business $99/mo	Enterprise Custom
1:1 and group messaging	Included	Included	Included
File & image sharing	Included	Included	Included
Typing indicators & read receipts	Included	Included	Included
Emoji reactions	Included	Included	Included
Message history & sync	Included	Included	Included
Push notifications	Included	Included	Included
User authentication & roles	Included	Included	Included
AI chatbot integration	Included	Included	Included
Monthly active users (MAU)	1,000	5,000	Unlimited
Tech support	Community	Email & chat	24/7 phone
SLA guarantee	Not available	99.9%	99.99%
Custom domain	Not available	Included	Included
Self-hosted / on-premises	Not available	Not available	Included
End-to-end encryption	Not available	Not available	Included
HIPAA / SOC2 compliance	Not available	Not available	Included

Included Included Not available

How Ethora Compares to Other React Chat SDKs

Choosing a React chat component for your project? Here’s how Ethora stacks up against popular alternatives:

Ethora

Open-source · self-hostable

StreamCloud only

CometChatCloud only

TalkJSCloud only

Open source

Yes (AGPL)

Partial

Self-hosted option

Yes (AWS, on-prem)

Free tier

1,000 MAU

Trial only

500 users

AI chatbot built-in

Yes

No (add-on)

React Native SDK

Yes

Native iOS & Android

Yes (Swift, Kotlin)

Yes

Protocol

XMPP (ejabberd)

Proprietary

Starting price

Free / $99/mo

$499/mo

$149/mo

$49/mo

Where Ethora wins

6 of 8 categories

2 / 8

1 / 8

Why developers choose Ethora over alternatives

Open source with self-hosting

Unlike Stream, CometChat and TalkJS — cloud-only SaaS — Ethora gives you full source-code access and the option to deploy on your own servers. Essential for healthcare, finance and government teams that need data sovereignty.

AI chatbots included

A built-in AI chatbot builder and support for self-hosted LLM agents (GPT-4, Llama, Mistral) ship in the box. With other SDKs, AI means separate third-party integrations.

XMPP-based architecture

Ethora runs on XMPP with ejabberd — a battle-tested server powering billions of messages for the likes of WhatsApp. Proven reliability, federation and an open standard instead of vendor lock-in.

Transparent pricing

The free tier includes 1,000 MAU with every feature — no gating. The $99/mo Business plan covers 5,000 MAU, far cheaper than Stream ($499/mo) or CometChat ($149/mo) at similar scale.

Use Cases for a React Chat Component

Ethora’s React chat SDK is used across industries wherever real-time communication adds value to a web application.

Healthcare

HIPAA-compliant patient-provider messaging, telehealth chat, care coordination between clinical teams.

Explore healthcare

Financial services

Secure advisor-client communication, compliance-ready messaging with audit trails.

Explore finance

Marketplaces

Buyer-seller messaging, order-related conversations, dispute resolution.

Explore marketplaces

Gaming

In-game chat lobbies, team communication, community channels.

Explore gaming

Education

Student-teacher messaging, classroom discussions, study groups.

Explore education

SaaS platforms

In-app support chat, user-to-user messaging, team collaboration.

Explore SaaS

Customer support

Live chat widgets, AI-assisted responses, agent assignment and routing.

Explore support

Architecture and Technology

Ethora’s React chat component connects to a robust backend built on proven open-source technologies. The component is published as @ethora/chat-component on npm (current version: 25.12.2, license: AGPL). The source code is available on GitHub.

Chat protocol

XMPP (via ejabberd) — the same protocol used by WhatsApp and Google Talk, providing real-time message delivery with presence, typing indicators, and message receipts.

Backend

Node.js API server handling authentication, user management, file storage (MinIO/S3), and push notifications.

Frontend

React component library with TypeScript support, compatible with Vite, Next.js, Create React App, and other build tools.

AI layer

Optional AI chatbot integration supporting OpenAI GPT-4, Meta Llama, Mistral, and custom models via RAG pipeline.

Database

MongoDB for message persistence, user profiles, and app configuration.

Explore Related Solutions

Build a complete messaging experience with Ethora’s full product suite.

NPM chat component

Install our React chat component via npm for quick integration.

React chat UI kits

Pre-built UI components for faster development.

React Native Chat SDK

Extend your chat to mobile with a shared codebase.

iOS Chat SDK

Native Swift messaging for iOS apps.

Android Chat SDK

Kotlin & Java library for Android.

Self-hosted chat server

Deploy on AWS, Azure, GCP or on-premises for full data control.

AI chat widget

Embed an AI-powered assistant alongside your chat.

See pricing plans to get started.

FAQ

What’s included in Ethora’s React Chat SDK?

Ethora’s React chat SDK includes pre-built UI components (chat window, message list, message input, channel selector, user presence), real-time messaging via XMPP, file and image sharing, typing indicators, read receipts, emoji reactions, push notifications, user authentication with role-based access, AI chatbot integration, and a full backend API. The npm package (@ethora/chat-component) works with Vite, Next.js, Create React App, and other React build tools. All features are included in the free tier (up to 1,000 MAU).

Can I customize the pre-built UI components?

Yes. Every UI component in the Ethora React chat SDK is fully customizable. You can override colors, fonts, and layouts via configuration props, or replace individual sub-components entirely with your own React components. The SDK works with CSS Modules, Tailwind CSS, styled-components, and any other styling approach. You can also hide or show specific UI elements (header, media attachments, login screens) using boolean config flags.

Is the Ethora SDK suitable for large-scale applications?

Yes. Ethora's backend is built on ejabberd (XMPP), which powers messaging for billions of users at companies like WhatsApp. The architecture supports horizontal scaling, load balancing, and high-availability deployments. Enterprise customers can deploy on dedicated infrastructure with custom SLAs, 99.99% uptime guarantees, and 24/7 phone support. The platform handles tens of thousands of concurrent connections per server node.

How secure is the messaging system?

Security is paramount for Ethora. End-to-end encryption, anonymized authentication, and support for self-hosted options - these measures enable the highest level of protection, making Ethora perfect for industries working with sensitive information (e.g., legal, healthcare).

Does Ethora support group chats and broadcast channels?

Yes, Ethora supports private and group chats, and broadcast channels, where admins can share news or other information. Whether you're creating a chat or sending updates to a large audience, our web chat service SDK enables you to manage conversations, enable/disable reactions and comments, set member roles, and moderate chat.

Is there support for push notifications?

Ethora is designed as a true real-time chat SDK web solution and supports functions necessary for live-chat experiences, like built-in push notifications. Users will always stay informed about new messages, mentions, and other updates.

Do I need backend knowledge to use the SDK?

No. The Ethora React chat component works out of the box with just front-end skills. Install via npm install @ethora/chat-component, import the <Chat /> component, and you have a working chat room. Ethora handles the backend (messaging server, user management, file storage, push notifications) so you can focus on your application logic. If you need deeper customization later, full API access and backend documentation are available.

Is it possible to self-host the chat server?

Yes. For businesses that need maximum control over their infrastructure, Ethora offers full on-premise options. Companies that need to meet strict security and legal requirements can self-host chat servers.