Quick start

You need two things to render the chat: a server URL (where @aw-chat/server runs on your infrastructure) and a session token (a JWT your backend mints for the signed-in user — see Auth).

Web

pnpm add @aw-chat/web

import { AWChat } from "@aw-chat/web";

export function Support() {
  return (
    <div style={{ height: "100dvh" }}>
      <AWChat
        userId="user-123"
        sessionToken={session.token}
        serverUrl="https://chat.example.com"
        telemetry={{
          appVersion: "6.1.4",
          hardwareId: "web",
          osVersion: navigator.userAgent,
          deviceLang: "ru",
        }}
        theme="light"
        locale="ru"
        onSessionExpired={() => {
          /* refresh JWT and update sessionToken */
        }}
      />
    </div>
  );
}

<AWChat /> fills its container — give the parent a height. Add your web origin to the backend’s CORS_ORIGINS.

React Native

pnpm add @aw-chat/react-native react-native-svg lottie-react-native

import { AWChat } from "@aw-chat/react-native";
import * as ImagePicker from "expo-image-picker";

export function SupportScreen() {
  return (
    <AWChat
      userId="user-123"
      sessionToken={session.token}
      serverUrl="https://chat.example.com"
      telemetry={{
        appVersion: "6.1.4",
        hardwareId: "iPhone15,2",
        osVersion: "iOS 17.4",
        deviceLang: "ru",
      }}
      fcmToken={fcmToken}
      theme="light"
      locale="ru"
      // Required for attachments on native — without it the attach control is hidden.
      onPickFiles={async () => {
        const r = await ImagePicker.launchImageLibraryAsync({ allowsMultipleSelection: true });
        if (r.canceled) return [];
        return r.assets.map((a) => ({
          uri: a.uri,
          name: a.fileName ?? "upload",
          type: a.mimeType ?? "application/octet-stream",
          size: a.fileSize ?? 0,
        }));
      }}
      onSessionExpired={() => {
        /* refresh JWT */
      }}
    />
  );
}

Peers: react-native-svg (Expo includes it) and lottie-react-native (channel reaction animations). Details: React Native.

Telegram Mini App

Use @aw-chat/web and pass telegramChatId for Telegram push:

<AWChat
  userId="user-123"
  sessionToken={session.token}
  serverUrl="https://chat.example.com"
  telemetry={{ appVersion: "6.1.4", hardwareId: "tma", osVersion: "tma", deviceLang: "ru" }}
  telegramChatId={String(tg.initDataUnsafe.user.id)}
/>

Try it without a backend

Both SDKs ship a mock mode (demo prop) on built-in sample data (no network):

<AWChat demo userId="demo" sessionToken="" serverUrl="" telemetry={{ /* … */ }} />

The repo examples/ apps also have a Mock/Live toggle for local/stand backends.

Next

• Props reference
• Auth & sessions
• Data model — where messages and comments are stored
• Limitations