Live Chat & Engagement

SDK v7.x · Last verified March 2026 · iOS · Android · Web

Platform note — code samples below use TypeScript. Every method has an equivalent in the iOS (Swift) and Android (Kotlin) SDKs — see the linked SDK reference in each step.

Speed run — just the code

import { ChannelRepository } from '@amityco/ts-sdk';

// 1. Create the live chat channel (after room + post exist)
const channel = await ChannelRepository.createChannel({
  displayName: room.title,
  type: 'live',
  postId: post.postId,
  roomId: room.roomId,
});

// 2. Drop in the UIKit component — that's it
// React: <AmityLiveChatPage channelId={channel.channelId} />
// iOS:   AmityLiveChatPage(channelId: channel.channelId)
// Android: AmityLiveChatPage(channelId = channel.channelId)

Full walkthrough below ↓

Livestream viewer with host-badged chat message, viewer reply, and thumbs-up reaction button — Live chat with host badge, viewer messages, and reaction button

Every livestream needs a chat. This guide walks through creating the live chat channel, wiring up the UIKit chat components (or building with the SDK directly), adding reactions, and tracking viewer engagement.

Prerequisites:

A room and livestream post already exist → Go Live & Room Management
UIKit installed if using the pre-built components → UIKit Getting Started

Channels are NOT auto-created. Setting channelEnabled: true on the room only flags that a channel is supported. You must manually create the live channel after the post is created, passing both postId and roomId.

Step 1: Create the Live Chat Channel

Create the channel after the room and livestream post exist. The channel needs both the postId and roomId to be properly linked.

const channel = await ChannelRepository.createChannel({
    displayName: room.title,
    type: 'live',
    postId: post.postId,
    roomId: room.roomId,
});

console.log('Live chat channel created:', channel.channelId);

Once created, the channel ID is also available on the room object as room.channelId.

Step 2: Add the Chat UI

Option A: UIKit (recommended)

Drop in a single component for a full chat experience — header with channel name + member count, scrolling message list, and compose bar with mentions and reactions.

iOS
Android
Web / React

import AmityUIKit

let liveChatPage = AmityLiveChatPage(channelId: channel.channelId)

// Use in SwiftUI directly, or wrap for UIKit:
let viewController = AmitySwiftUIHostingController(rootView: liveChatPage)
present(viewController, animated: true)

import co.amity.socialplus.uikit.AmityLiveChatPage

@Composable
fun LiveChatScreen(channelId: String) {
    AmityLiveChatPage(channelId = channelId)
}

import { AmityLiveChatPage } from '@amityco/ui-kit';

function LiveChat({ channelId }: { channelId: string }) {
  return <AmityLiveChatPage channelId={channelId} />;
}

AmityLiveChatPage bundles three sub-components you can also use individually:

Component	What it does
`AmityLiveChatHeader`	Channel name, avatar, live member count
`AmityLiveChatMessageList`	Scrolling messages with copy, reply, delete, and flag actions
`AmityLiveChatMessageComposeBar`	Text input with `@mention` suggestions, reply, and character limit

Full component reference → Live Chat Components

Option B: Build with the SDK

If you need a fully custom UI, use the Chat SDK to send and observe messages directly.

import { MessageRepository, ChannelRepository, ReactionRepository } from '@amityco/ts-sdk';

// Send a message
await MessageRepository.createMessage({
  subChannelId: channel.channelId,
  dataType: 'text',
  data: { text: 'Hello from the stream!' },
});

// Observe messages in real time
const unsubscribe = MessageRepository.getMessages(
  { subChannelId: channel.channelId, limit: 50 },
  ({ data, loading, error }) => {
    if (data) renderMessages(data);
  },
);

Full reference → Chat SDK

Step 3: Reactions

Live chat messages support emoji reactions to drive engagement during the stream.

UIKit

The AmityReactionList component renders reaction counts and user lists out of the box:

const reactionList = AmityReactionList({
  referenceId: message.messageId,
  referenceType: 'message',
});

SDK

Add and remove reactions programmatically:

// Add a reaction
await ReactionRepository.addReaction('message', message.messageId, 'fire');

// Remove a reaction
await ReactionRepository.removeReaction('message', message.messageId, 'fire');

Step 4: Viewer Count & Channel Info

The live chat channel exposes real-time metadata you can display alongside the stream:

Property	What it tells you
`channel.memberCount`	Total members who joined the channel
`channel.metadata`	Custom data (e.g., pinned announcement)
Room `watcherCount` (via analytics)	Active viewers watching the stream

The AmityLiveChatHeader UIKit component renders member count automatically.

Step 5: Moderation

Flag messages

Any user can flag an inappropriate message. Flagged messages appear in the Admin Console for moderator review.

await MessageRepository.flagMessage(message.messageId);

Delete messages (moderator)

Community moderators and admins can hard-delete messages:

await MessageRepository.deleteMessage(message.messageId);

Ban users from chat

Remove disruptive users from the live chat channel:

await ChannelRepository.Moderation.banMembers(channel.channelId, ['user-id']);

AI content moderation

Enable AI moderation in Admin Console → AI Content Moderation to auto-flag or auto-remove messages matching your policy. Works in real-time for live chat.→ AI Content Moderation

Common Mistakes

Forgetting to create the channel — channelEnabled: true does NOT auto-create the channel. You must call createChannel() with the postId and roomId after both exist. Without this step, room.channelId is null and the chat UI renders nothing.

Creating the channel before the post — The channel needs the postId to be linked properly. Always create in order: room → post → channel.

Not handling high message volume — Live streams can generate hundreds of messages per second. Use UIKit’s built-in virtualization, or if building custom, limit the visible message window and batch DOM updates.

Best Practices

Layout: video + chat side by side

On desktop/tablet, show chat in a right panel alongside the video player
On mobile, use a bottom sheet or overlay that can be swiped away
Keep the compose bar always visible — don’t hide it behind a tap

Performance at scale

Use UIKit’s AmityLiveChatPage which is optimized for high-volume streams
If building custom, debounce re-renders and virtualize the message list
Consider showing only the last 100 messages and lazy-loading history on scroll-up

Engagement features

Pin an announcement message at the top of chat (use channel metadata)
Show host and co-host messages with a distinct badge color
Add a “slow mode” (rate limit) during peak moments to keep chat readable

Next Steps

Go Live & Room Management

Room creation, broadcast setup, and lifecycle management.

Co-Hosting

Invite co-hosts to share the stage during a broadcast.

Product Tagging

Pin products to the stream for live commerce.

Overview

Build Your Community

Create & Share Content

Communication

Engage & Grow

Livestream

Monetize

Live Chat & Engagement

Step 1: Create the Live Chat Channel

Step 2: Add the Chat UI

Option A: UIKit (recommended)

Option B: Build with the SDK

Step 3: Reactions

UIKit

SDK

Step 4: Viewer Count & Channel Info

Step 5: Moderation

Common Mistakes

Best Practices

Next Steps

Go Live & Room Management

Co-Hosting

Product Tagging

​Step 1: Create the Live Chat Channel

​Step 2: Add the Chat UI

​Option A: UIKit (recommended)

​Option B: Build with the SDK

​Step 3: Reactions

​UIKit

​SDK

​Step 4: Viewer Count & Channel Info

​Step 5: Moderation

​Common Mistakes

​Best Practices

​Next Steps

Go Live & Room Management

Co-Hosting

Product Tagging

Step 1: Create the Live Chat Channel

Step 2: Add the Chat UI

Option A: UIKit (recommended)

Option B: Build with the SDK

Step 3: Reactions

UIKit

SDK

Step 4: Viewer Count & Channel Info

Step 5: Moderation

Common Mistakes

Best Practices

Next Steps