> ## Documentation Index
> Fetch the complete documentation index at: https://learn.social.plus/llms.txt
> Use this file to discover all available pages before exploring further.
# Live Chat & Engagement
> Add real-time chat, reactions, viewer counts, and moderation alongside your livestream.
**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.
```typescript theme={null}
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:
// iOS: AmityLiveChatPage(channelId: channel.channelId)
// Android: AmityLiveChatPage(channelId = channel.channelId)
```
Full walkthrough below ↓
.png?fit=max&auto=format&n=Whepx2DgDzjvHcd8&q=85&s=911c718afff562d5c7e11f209656ab95)
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.
```mermaid theme={null}
graph LR
A[Create Room] --> B[Create Post]
B --> C[Create Channel]
C --> D{Choose approach}
D -->|UIKit| E["AmityLiveChatPage
(header + messages + compose)"]
D -->|SDK| F[Custom Chat UI]
E --> G[Live viewers see chat]
F --> G
```
**Prerequisites**:
* A room and livestream post already exist → [Go Live & Room Management](/use-cases/social/livestream/go-live-and-room-management)
* UIKit installed if using the pre-built components → [UIKit Getting Started](/uikit/getting-started/overview)
**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.
```typescript theme={null}
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.
```swift theme={null}
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)
```
```kotlin theme={null}
import co.amity.socialplus.uikit.AmityLiveChatPage
@Composable
fun LiveChatScreen(channelId: String) {
AmityLiveChatPage(channelId = channelId)
}
```
```tsx theme={null}
import { AmityLiveChatPage } from '@amityco/ui-kit';
function LiveChat({ channelId }: { channelId: string }) {
return ;
}
```
`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](/uikit/components/chat/live-chat)
### Option B: Build with the SDK
If you need a fully custom UI, use the Chat SDK to send and observe messages directly.
```typescript theme={null}
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](/social-plus-sdk/chat/overview)
***
## 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:
```typescript theme={null}
const reactionList = AmityReactionList({
referenceId: message.messageId,
referenceType: 'message',
});
```
### SDK
Add and remove reactions programmatically:
```typescript theme={null}
// 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
Any user can flag an inappropriate message. Flagged messages appear in the Admin Console for moderator review.
```typescript theme={null}
await MessageRepository.flagMessage(message.messageId);
```
Community moderators and admins can hard-delete messages:
```typescript theme={null}
await MessageRepository.deleteMessage(message.messageId);
```
Remove disruptive users from the live chat channel:
```typescript theme={null}
await ChannelRepository.Moderation.banMembers(channel.channelId, ['user-id']);
```
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](/analytics-and-moderation/console/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
* 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
* 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
* 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
Room creation, broadcast setup, and lifecycle management.
Invite co-hosts to share the stage during a broadcast.
Pin products to the stream for live commerce.