How to Add Real-Time Chat to a React App in 10 Minutes

I've integrated chat into apps using Firebase, raw WebSockets, and three different chat SDKs. Every time, it took longer than it should have.

Last month, I built a working chat with video calling in a React app in under 10 minutes. No exaggeration. I timed it.

Here's exactly how to do it.

What We're Building

By the end of this tutorial, your React app will have: - Real-time text messaging - Group channels - Typing indicators - Read receipts - Video calling (yes, really) - A pre-built, customizable chat UI

No WebSocket servers. No media servers. No infrastructure to manage.

Prerequisites

• Node.js 18 or higher
• A React 18+ project (or we'll create one)
• A Wibe Chat account (free — wibechat.com)

Step 1: Create a React Project

If you already have a project, skip this. Otherwise:

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

Step 2: Install the Wibe Chat SDK

One package. That's it.

npm install @wibechat/react

This single package includes text messaging APIs, voice and video calling, pre-built UI components, TypeScript types, and hooks for custom implementations.

Step 3: Get Your API Key

1. Sign up at wibechat.com (free, no credit card) 2. Go to your Dashboard 3. Create a new project 4. Copy your API key

Step 4: Initialize the SDK

Open your App.tsx and wrap your app with the Wibe Chat provider:

import { WibeChat } from '@wibechat/react'

function App() {
  return (
    <WibeChat apiKey="wc_live_your_api_key_here">
      {/* Your app content goes here */}
    </WibeChat>
  )
}

export default App

The WibeChat provider handles connection management, authentication, real-time message delivery, and presence.

Step 5: Add the Chat Window

Drop in the pre-built chat UI component:

import { WibeChat, ChatWindow } from '@wibechat/react'

function App() {
  return (
    <WibeChat apiKey="wc_live_your_api_key_here">
      <div style={{ height: '100vh' }}>
        <ChatWindow channelId="general" />
      </div>
    </WibeChat>
  )
}

export default App

Run your app with npm run dev. You should see a fully functional chat interface. That's it — you have real-time messaging.

Step 6: Add Video Calling

Adding video calling is one prop:

<ChatWindow 
  channelId="general" 
  showVideo={true} 
/>

This adds a video call button to the chat header. Click it, and you've got HD video with screen sharing, adaptive bitrate, and up to 100 participants.

No separate video SDK. No WebRTC configuration. No TURN server setup.

Step 7: Customize the UI

The default UI is clean, but you can match your brand:

<ChatWindow 
  channelId="general"
  showVideo={true}
  theme={{
    primaryColor: '#6C5CE7',
    borderRadius: '12px',
    fontFamily: 'Inter, sans-serif',
  }}
/>

For deeper customization, use individual hooks:

import { useChannel, useMessages } from '@wibechat/react'

function CustomChat() {
  const channel = useChannel('general')
  const { messages, sendMessage } = useMessages(channel)
  
  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>
          <strong>{msg.sender.name}</strong>: {msg.text}
        </div>
      ))}
    </div>
  )
}

Complete Working Code

Here's the full App.tsx:

import { WibeChat, ChatWindow } from '@wibechat/react'

function App() {
  return (
    <WibeChat apiKey="wc_live_your_api_key_here">
      <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
        <header style={{ padding: '16px 24px', borderBottom: '1px solid #E5E7EB', fontWeight: 'bold', fontSize: '18px' }}>
          My Chat App
        </header>
        <div style={{ flex: 1 }}>
          <ChatWindow channelId="general" showVideo={true} theme={{ primaryColor: '#6C5CE7', borderRadius: '12px' }} />
        </div>
      </div>
    </WibeChat>
  )
}

export default App

About 30 lines for production-ready chat with video calling.

What You Get Out of the Box

Without writing additional code, the ChatWindow includes text messaging with real-time delivery, typing indicators, read receipts, file sharing (drag and drop), reactions, message threads, online presence, and video calling.

Next Steps

• Multiple channels: Different ChatWindow instances with different channelId props
• User authentication: Connect to your auth system with custom user tokens
• Push notifications: Enable with one configuration
• AI bots: Add an AI assistant to any channel

All covered in the docs at docs.wibechat.com.