Add Production-Grade Chat to Your Web and Mobile Apps in 10 Minutes (React, React Native, iOS, Android)

One messaging engine, four native frontends — and a path from a 10-minute prototype to a HIPAA-grade enterprise deployment without a rewrite.

Every few years I get handed the same ticket: “add chat to the app.” It sounds small. It never is. Real-time messaging quietly drags in presence, delivery receipts, typing indicators, push notifications, message history, file uploads, moderation, and a websocket layer that has to survive flaky mobile networks. Build it yourself and you’ve signed up for a multi-month project that isn’t even your product’s core value — and then you get to do it again for iOS and Android.

So this time I didn’t. I used Ethora’s open-source chat SDKs and had a working chat screen on web in about ten minutes — then reused the same backend for React Native, iOS, and Android. This post is the walkthrough for all four, plus the part most “add chat in 5 minutes” tutorials skip: what happens when that prototype has to become an enterprise deployment.

The 10-minute version (React web)

1. Install the component

npm i @ethora/chat-component

It’s a React + TypeScript package, part of an Apache-2.0 open-source ecosystem (github.com/dappros/ethora). No native modules, no platform-specific build steps.

2. Render the chat

import { Chat, XmppProvider } from '@ethora/chat-component';
import './App.css';

export default function App() {
  return (
    <XmppProvider>
      <Chat config={{ baseUrl: 'https://api.chat.ethora.com/v1' }} />
    </XmppProvider>
  );
}

That’s a full chat interface: room list, message history, replies, reactions, edits, deletes, typing indicators. The XmppProvider wrapper matters — Chat uses internals that rely on a single XMPP client, and the provider supplies it.

3. Point it at a backend

Sign up at app.chat.ethora.com/register, create an app, and you get an appId, API credentials, and a base URL. The free tier covers 1,000 monthly active users and 100 concurrent connections — enough to ship a real feature, not just a demo. No credit card.

That’s the ten minutes. You now have messaging that already includes the parts you’d otherwise have built by hand.

The part that usually doubles the project: mobile

Here’s the trick that makes this worth writing about. The same backend app — same appId, same API, same XMPP host — powers native mobile too. You're not standing up a second messaging system; you're mounting a different frontend on the same engine. Default Cloud endpoints across every SDK:

[embed]

React Native (iOS + Android, one codebase)

npm install @ethora/chat-component-rn

import React from 'react';
import { SafeAreaView } from 'react-native';
import { Chat, XmppProvider } from '@ethora/chat-component-rn';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <XmppProvider>
        <Chat
          config={{
            appId: 'YOUR_APP_ID',
            baseUrl: 'https://api.chat.ethora.com/v1',
            xmppSettings: {
              devServer: 'wss://xmpp.chat.ethora.com/ws',
              host: 'xmpp.chat.ethora.com',
              conference: 'conference.xmpp.chat.ethora.com',
            },
          }}
        />
      </XmppProvider>
    </SafeAreaView>
  );
}

You get rooms, threads, message history (MAM), media, push (FCM/APNs), and pluggable auth. There’s even a guided setup — npx @ethora/setup — that writes the config into your project.

iOS — native Swift (SwiftUI + SPM)

For teams that want a fully native iOS client, the Swift SDK ships as a Swift Package with a core (XMPPChatCore) and a drop-in UI (XMPPChatUI):

import SwiftUI
import XMPPChatCore
import XMPPChatUI

private func makeChatConfig() -> ChatConfig {
    var config = ChatConfig()
    config.baseUrl = "https://api.chat.ethora.com/v1"
    config.appId = "YOUR_APP_ID"
    config.customAppToken = "YOUR_ETHORA_APP_TOKEN"
    config.xmppSettings = XMPPSettings(
        xmppServerUrl: "wss://xmpp.chat.ethora.com:5443/ws",
        host: "xmpp.chat.ethora.com",
        conference: "conference.xmpp.chat.ethora.com"
    )
    config.jwtLogin = JWTLoginConfig(token: "YOUR_CLIENT_JWT", enabled: true)
    return config
}

Then render ChatWrapperView with that config. Connection lifecycle, reconnect logic, presence, reactions, edits, history, and push are handled by the core — you wire config and auth, not the protocol.

Android — native Kotlin (Jetpack Compose)

import androidx.compose.runtime.Composable
import com.ethora.chat.Chat
import com.ethora.chat.core.config.ChatConfig
import com.ethora.chat.core.config.JWTLoginConfig
import com.ethora.chat.core.config.XMPPSettings

@Composable
fun ChatScreen() {
    val config = ChatConfig(
        appId = "YOUR_APP_ID",
        baseUrl = "https://api.chat.ethora.com/v1",
        customAppToken = "JWT <YOUR_APP_TOKEN>",
        xmppSettings = XMPPSettings(
            xmppServerUrl = "wss://xmpp.chat.ethora.com/ws",
            host = "xmpp.chat.ethora.com",
            conference = "conference.xmpp.chat.ethora.com"
        ),
    )
    Chat(config = config)
}

A Compose chat UI with real-time messaging, history + incremental sync after reconnect, unread counters, media with an unsent-media retry queue, reactions, typing indicators, and FCM push hooks. (Add INTERNET and ACCESS_NETWORK_STATE permissions, plus POST_NOTIFICATIONS for push on Android 13+.)

What you got for free, on every platform

The reason this is fast isn’t the UI — it’s that the hard real-time semantics are solved once, underneath all four clients:

• Transport built on XMPP/Ejabberd, a protocol that has run production IM at scale for two decades.
• Presence, typing, delivery/read state handled by the SDK, not your reducer.
• History (MAM), replies, reactions, edits, deletes out of the box.
• Push — web (VAPID + Firebase), iOS (APNs), Android (FCM).
• Pluggable auth — default, JWT, injected user, or custom.

One detail worth knowing early: keep exactly one place that opens the websocket. Two init sources means duplicated wss://.../ws connections and confusing bugs. Every SDK gives you a single-init contract — use it.

The part the quickstarts skip: going to production

A prototype on a hosted free tier is great. But if you’re building for a company that handles customer data — especially in a regulated vertical — your security team will have questions long before launch. This is where most chat SDKs force an awkward conversation, because your messages live permanently on the vendor’s multi-tenant servers.

The reason I reach for this stack is that the same clients I prototyped with also run against infrastructure I control. The frontend code is identical; only the backend location changes:

• Cloud (multi-tenant) for getting started.
• Dedicated server managed by the vendor’s TechOps team, in the region of your choice.
• Fully self-hosted on your own AWS/Azure/GCP or on-premises hardware, inside your security perimeter.

Notice the mobile snippets already expose xmppSettings and baseUrl — to self-host, you point those at your own server. No fork, no rewrite. The backend is infrastructure-agnostic (Ubuntu, amd64/arm64), so you're not locked to one cloud and can migrate later.

Why this matters for enterprise apps

Two real deployments make the point better than any feature list:

• DrTalks (healthcare summits) built a context-aware assistant over 1,000+ indexed summits — citing pages, authors, and timestamps — running HIPAA-compliant.
• Atom Advantage built Atom Connect for US workers’ comp: messaging between injured workers, nurses, and caseworkers, with document exchange, HIPAA + SOC 2 compliant, delivered as a white-labelled mobile app plus a caseworker web portal.

Both started from the same open-source building blocks you just installed — web and mobile. The distance between a weekend prototype and a regulated production system is configuration and hosting, not a rewrite.

When to use this vs. rolling your own

Use these SDKs when chat is a feature of your product, not your product. For SaaS dashboards, marketplaces, fintech apps, patient portals, and internal tools — across web, iOS, and Android — you can spend a quarter per platform building presence and delivery receipts, or you can spend an afternoon and put that quarter into your actual differentiator. And because every frontend is open source (github.com/dappros/ethora), you’re not betting your roadmap on a black box.

Try it

Spin up a free app at app.chat.ethora.com, grab the appId, and drop the SDK into your web, React Native, iOS, or Android client. When the compliance questions come — and in enterprise they always do — you'll already be on a stack that can answer them.

Building chat or AI agents for a regulated industry? The self-hosted deployment options are worth a look before you commit to any SaaS messaging vendor.