Quick start

The smallest working chat, a fully configured example, and complete Vite and Next.js setups.

Minimum working chat

After installing and adding the CSS import and config file:

tsx

1"use client"; // Next.js only - required on any file that imports chat2 3import ChatMain from "@realtimexsco/live-chat";4import { chatConfig } from "@/configs/chat.config";5 6export default function ChatPage() {7  return (8    <div className="h-dvh min-h-0 overflow-hidden">9      <ChatMain10        clientId={chatConfig.clientId}11        accessToken={chatConfig.accessToken}12        loggedUserDetails={chatConfig.loggedUserDetails}13        apiUrl={chatConfig.apiUrl}14        socketUrl={chatConfig.socketUrl}15        themeColor={chatConfig.themeColor}16      />17    </div>18  );19}

Container height

A height is required. ChatMain includes a built-in viewport (chat-package-viewport):

viewportHeight="screen" - full page
viewportHeight="calc(100dvh - 4rem)" - below a fixed header
or wrap it in h-dvh min-h-0 overflow-hidden and keep the default viewportHeight="full"

Complete ChatMain example

All the common props: theme, locale, layout, customization, calls and alerts.

tsx

1"use client";2 3import { useState } from "react";4import ChatMain, {5  type ChatColorMode,6  type ChatComponents,7  type ChatClassNames,8  type ChatFeatures,9  type AvatarSlotProps,10  defaultChatLayoutConfig,11} from "@realtimexsco/live-chat";12import { chatConfig } from "@/configs/chat.config";13 14const MyAvatar = ({ src, name, size }: AvatarSlotProps) => (15  <img16    src={src || undefined}17    alt={name}18    className={`rounded-full object-cover avatar--${size}`}19    style={{ width: 36, height: 36 }}20  />21);22 23const components: ChatComponents = {24  Avatar: MyAvatar,25  // ChatLayout: MyFullCustomUI,     // Case 1 - replace the entire UI26  // MessageItem: MyMessageBubble,   // Case 2 - a single slot27};28 29const classNames: ChatClassNames = {30  sidebar: "bg-slate-950",31  channelHeader: "border-b-2 border-indigo-500",32  messageBubbleSender: "rounded-3xl shadow-md",33  messageBubbleReceiver: "rounded-3xl",34};35 36const features: ChatFeatures = {37  showPhoneCall: true,38  showVideoCall: true,39};40 41export default function ChatPage() {42  const [colorMode, setColorMode] = useState<ChatColorMode>("light");43  const [error, setError] = useState<string | null>(null);44 45  return (46    <div className="h-dvh min-h-0 overflow-hidden">47      <ChatMain48        {...chatConfig}49        colorMode={colorMode}50        onColorModeChange={setColorMode}51        showColorModeToggle={false}52        locale="en-US"53        timeZone="Asia/Kolkata"54        hour12={false}55        showDateTimeSettings56        layout={{ ...defaultChatLayoutConfig }}57        components={components}58        classNames={classNames}59        features={features}60        error={error}61        onErrorDismiss={() => setError(null)}62      />63    </div>64  );65}

React (Vite) - full setup

shell

1npm create vite@latest -- my-chat-app --template react-ts2cd my-chat-app3npm install @realtimexsco/live-chat react react-dom4npm install -D @vitejs/plugin-react

shell

1src/2├── main.tsx3├── App.tsx4├── index.css          ← CSS import (see Project setup)5└── configs/6    └── chat.config.ts

src/main.tsx

tsx

1import { createRoot } from "react-dom/client";2import "./index.css";3import App from "./App";4 5createRoot(document.getElementById("root")!).render(<App />);

src/App.tsx

tsx

1import ChatMain from "@realtimexsco/live-chat";2import { chatConfig } from "./configs/chat.config";3 4export default function App() {5  return (6    <div className="h-dvh min-h-0 overflow-hidden">7      <ChatMain {...chatConfig} />8    </div>9  );10}

Run npm run dev.

Next.js - full setup

shell

1npm create next-app@latest -- my-chat-app --typescript --tailwind --app --src-dir2cd my-chat-app3npm install @realtimexsco/live-chat

src/app/chat/page.tsx

tsx

1"use client"; // Next.js only - required on any file that imports chat2 3import ChatMain from "@realtimexsco/live-chat";4import { chatConfig } from "@/configs/chat.config";5 6export default function ChatPage() {7  return (8    <div className="h-dvh min-h-0 overflow-hidden">9      <ChatMain10        clientId={chatConfig.clientId}11        accessToken={chatConfig.accessToken}12        loggedUserDetails={chatConfig.loggedUserDetails}13        apiUrl={chatConfig.apiUrl}14        socketUrl={chatConfig.socketUrl}15        themeColor={chatConfig.themeColor}16      />17    </div>18  );19}

Run npm run dev and open http://localhost:3000/chat. Remember transpilePackages in next.config.ts.

Minimum working chat

After installing and adding the CSS import and config file:

tsx

1"use client"; // Next.js only - required on any file that imports chat2 3import ChatMain from "@realtimexsco/live-chat";4import { chatConfig } from "@/configs/chat.config";5 6export default function ChatPage() {7  return (8    <div className="h-dvh min-h-0 overflow-hidden">9      <ChatMain10        clientId={chatConfig.clientId}11        accessToken={chatConfig.accessToken}12        loggedUserDetails={chatConfig.loggedUserDetails}13        apiUrl={chatConfig.apiUrl}14        socketUrl={chatConfig.socketUrl}15        themeColor={chatConfig.themeColor}16      />17    </div>18  );19}

Complete ChatMain example

All the common props: theme, locale, layout, customization, calls and alerts.

tsx

1"use client";2 3import { useState } from "react";4import ChatMain, {5  type ChatColorMode,6  type ChatComponents,7  type ChatClassNames,8  type ChatFeatures,9  type AvatarSlotProps,10  defaultChatLayoutConfig,11} from "@realtimexsco/live-chat";12import { chatConfig } from "@/configs/chat.config";13 14const MyAvatar = ({ src, name, size }: AvatarSlotProps) => (15  <img16    src={src || undefined}17    alt={name}18    className={`rounded-full object-cover avatar--${size}`}19    style={{ width: 36, height: 36 }}20  />21);22 23const components: ChatComponents = {24  Avatar: MyAvatar,25  // ChatLayout: MyFullCustomUI,     // Case 1 - replace the entire UI26  // MessageItem: MyMessageBubble,   // Case 2 - a single slot27};28 29const classNames: ChatClassNames = {30  sidebar: "bg-slate-950",31  channelHeader: "border-b-2 border-indigo-500",32  messageBubbleSender: "rounded-3xl shadow-md",33  messageBubbleReceiver: "rounded-3xl",34};35 36const features: ChatFeatures = {37  showPhoneCall: true,38  showVideoCall: true,39};40 41export default function ChatPage() {42  const [colorMode, setColorMode] = useState<ChatColorMode>("light");43  const [error, setError] = useState<string | null>(null);44 45  return (46    <div className="h-dvh min-h-0 overflow-hidden">47      <ChatMain48        {...chatConfig}49        colorMode={colorMode}50        onColorModeChange={setColorMode}51        showColorModeToggle={false}52        locale="en-US"53        timeZone="Asia/Kolkata"54        hour12={false}55        showDateTimeSettings56        layout={{ ...defaultChatLayoutConfig }}57        components={components}58        classNames={classNames}59        features={features}60        error={error}61        onErrorDismiss={() => setError(null)}62      />63    </div>64  );65}

React (Vite) - full setup

shell

1npm create vite@latest -- my-chat-app --template react-ts2cd my-chat-app3npm install @realtimexsco/live-chat react react-dom4npm install -D @vitejs/plugin-react

shell

1src/2├── main.tsx3├── App.tsx4├── index.css          ← CSS import (see Project setup)5└── configs/6    └── chat.config.ts

src/main.tsx

tsx

1import { createRoot } from "react-dom/client";2import "./index.css";3import App from "./App";4 5createRoot(document.getElementById("root")!).render(<App />);

src/App.tsx

tsx

1import ChatMain from "@realtimexsco/live-chat";2import { chatConfig } from "./configs/chat.config";3 4export default function App() {5  return (6    <div className="h-dvh min-h-0 overflow-hidden">7      <ChatMain {...chatConfig} />8    </div>9  );10}

Run npm run dev.

Next.js - full setup

shell

1npm create next-app@latest -- my-chat-app --typescript --tailwind --app --src-dir2cd my-chat-app3npm install @realtimexsco/live-chat

src/app/chat/page.tsx

tsx

1"use client"; // Next.js only - required on any file that imports chat2 3import ChatMain from "@realtimexsco/live-chat";4import { chatConfig } from "@/configs/chat.config";5 6export default function ChatPage() {7  return (8    <div className="h-dvh min-h-0 overflow-hidden">9      <ChatMain10        clientId={chatConfig.clientId}11        accessToken={chatConfig.accessToken}12        loggedUserDetails={chatConfig.loggedUserDetails}13        apiUrl={chatConfig.apiUrl}14        socketUrl={chatConfig.socketUrl}15        themeColor={chatConfig.themeColor}16      />17    </div>18  );19}

Run npm run dev and open http://localhost:3000/chat. Remember transpilePackages in next.config.ts.