Skip to main content
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.
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
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:
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

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. 
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)
AmityLiveChatPage bundles three sub-components you can also use individually:
ComponentWhat it does
AmityLiveChatHeaderChannel name, avatar, live member count
AmityLiveChatMessageListScrolling messages with copy, reply, delete, and flag actions
AmityLiveChatMessageComposeBarText 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 } 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 MessageRepository.addReaction(message.messageId, 'fire');

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

​
Step 4: Viewer Count & Channel Info

The live chat channel exposes real-time metadata you can display alongside the stream:
PropertyWhat it tells you
channel.memberCountTotal members who joined the channel
channel.metadataCustom 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
await MessageRepository.flagMessage(message.messageId);
Community moderators and admins can hard-delete messages:
TypeScript
await MessageRepository.deleteMessage(message.messageId);
Remove disruptive users from the live chat channel:
TypeScript
await ChannelRepository.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

​
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

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.