> ## 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.

# Choose Your Path

> Recommended guide sequences for 8 app types — pick your closest match and follow the build order.

Not sure where to start? Pick the app type closest to what you're building. Each path is an ordered sequence of guides — follow them in order for the smoothest build, or jump to any step directly.

<CardGroup cols={4}>
  <Card title="Social" icon="camera-retro" href="#social">
    Instagram, BeReal, Strava
  </Card>

  <Card title="Community" icon="people-group" href="#community">
    Reddit, Discord, Facebook Groups
  </Card>

  <Card title="Gaming" icon="gamepad" href="#gaming">
    Clans, streams, presence
  </Card>

  <Card title="Marketplace" icon="store" href="#marketplace">
    Depop, Etsy, social commerce
  </Card>

  <Card title="Livestream" icon="tower-broadcast" href="#livestream">
    Twitch, YouTube Live
  </Card>

  <Card title="Direct Messages" icon="comment" href="#direct-messages">
    Dating, support, DMs
  </Card>

  <Card title="Group Chat" icon="users" href="#group-chat">
    Discord, Slack, team rooms
  </Card>

  <Card title="Live Chat" icon="messages" href="#live-chat">
    Twitch chat, events, Q\&A
  </Card>
</CardGroup>

***

## Social

> **Instagram, BeReal, Strava** — content sharing with profiles, stories, and a social graph.

```mermaid theme={null}
graph LR
    subgraph Build
        A["Onboarding"] --> B["Feed"]
        B --> C["Content"]
        C --> D["Comments"]
        D --> E["Stories"]
        E --> F["Profiles"]
    end
    subgraph Engage & Grow
        G["Notifications"] --> H["Moderation"]
        H --> I["1:1 Chat"]
    end
    subgraph Monetize
        J["Product Tags"] --> K["Ads"]
    end
    F --> G
    I --> J

    style A fill:#e1f5fe,stroke:#0288d1
    style E fill:#fff3e0,stroke:#f57c00
    style J fill:#fff3e0,stroke:#f57c00
    style K fill:#e8f5e9,stroke:#388e3c
```

### Build

Core platform — users, content, and social graph.

<Steps>
  <Step title="User Onboarding & Visitor Mode" icon="door-open">
    Let users explore content before signing up, then transition to authenticated sessions with profile setup.

    → [Open guide](/use-cases/social/user-onboarding-and-visitor-mode) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Build a Social Feed" icon="rectangle-list">
    The core loop — home timeline, community feeds, and a global discovery feed with real-time updates.

    → [Open guide](/use-cases/social/build-a-social-feed) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Rich Content Creation" icon="pen-to-square">
    Text, image, video, and poll posts with @mentions, hashtags, and media uploads.

    → [Open guide](/use-cases/social/rich-content-creation) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>

  <Step title="Comments & Reactions" icon="comments">
    Threaded comments and emoji reactions on posts — the engagement layer.

    → [Open guide](/use-cases/social/comments-and-reactions) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Stories & Ephemeral Content" icon="circle-play">
    24-hour stories with story rings, view counts, and impression analytics.

    → [Open guide](/use-cases/social/stories-and-ephemeral-content) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>

  <Step title="User Profiles & Social Graph" icon="user-group">
    Follow/unfollow, connection requests, profile pages, and follower lists.

    → [Open guide](/use-cases/social/user-profiles-and-social-graph) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>
</Steps>

### Engage & Grow

Retention, safety, and private messaging.

<Steps>
  <Step title="Notifications & Engagement" icon="bell">
    In-app notification tray and push notifications to drive retention.

    → [Open guide](/use-cases/social/notifications-and-engagement) · <span style={{color:"#dc2626",background:"#fee2e2",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Advanced</span>
  </Step>

  <Step title="Content Moderation Pipeline" icon="shield-check">
    User flagging → admin review → AI moderation → webhook automation.

    → [Open guide](/use-cases/social/content-moderation-pipeline) · <span style={{color:"#dc2626",background:"#fee2e2",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Advanced</span>
  </Step>

  <Step title="1:1 Chat & DMs" icon="comment">
    Private direct messaging between users.

    → [See Direct Messages path](#direct-messages) · <span style={{color:"#2563eb",background:"#dbeafe",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>All levels</span>
  </Step>
</Steps>

### Monetize

Turn engagement into revenue.

<Steps>
  <Step title="Product Tagging & Social Commerce" icon="tags">
    Turn posts into shoppable content — tag products from your catalogue so followers can browse and buy.

    → [Open guide](/use-cases/social/product-tagging-and-social-commerce) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>

  <Step title="Advertising & Monetization" icon="rectangle-ad">
    Native ads in feeds — console-driven placement, frequency, and impression tracking.

    → [Open guide](/use-cases/social/advertising-and-monetization) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>
</Steps>

***

## Community

> **Reddit, Discord, Facebook Groups** — discussions, moderation, and discovery.

```mermaid theme={null}
graph LR
    subgraph Build
        A["Communities"] --> B["Roles"]
        B --> C["Content"]
        C --> D["Comments"]
    end
    subgraph Engage & Grow
        E["Search"] --> F["Moderation"]
        F --> G["Group Chat"]
    end
    subgraph Monetize
        H["Product Tags"] --> I["Ads"]
    end
    D --> E
    G --> H

    style A fill:#f3e5f5,stroke:#7b1fa2
    style D fill:#fce4ec,stroke:#c62828
    style H fill:#fff3e0,stroke:#f57c00
    style I fill:#e8f5e9,stroke:#388e3c
```

### Build

Community spaces, governance, and content.

<Steps>
  <Step title="Community Platform" icon="users">
    Create public and private communities with categories, membership, and governance settings.

    → [Open guide](/use-cases/social/community-platform) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>

  <Step title="Roles, Permissions & Governance" icon="user-shield">
    Moderator roles, post review queues, and ban management.

    → [Open guide](/use-cases/social/roles-permissions-and-governance) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>

  <Step title="Rich Content Creation" icon="pen-to-square">
    Posts and polls inside community feeds.

    → [Open guide](/use-cases/social/rich-content-creation) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>

  <Step title="Comments & Reactions" icon="comments">
    Threaded discussions and emoji reactions.

    → [Open guide](/use-cases/social/comments-and-reactions) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>
</Steps>

### Engage & Grow

Discovery, safety, and communication.

<Steps>
  <Step title="Search & Discovery" icon="magnifying-glass">
    Find communities, trending topics, and category browsing.

    → [Open guide](/use-cases/social/search-and-discovery) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Content Moderation Pipeline" icon="shield-check">
    Rules enforcement — flagging, AI screening, webhook automation.

    → [Open guide](/use-cases/social/content-moderation-pipeline) · <span style={{color:"#dc2626",background:"#fee2e2",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Advanced</span>
  </Step>

  <Step title="Group Chat" icon="message">
    Persistent chat rooms for community members.

    → [See Group Chat path](#group-chat) · <span style={{color:"#2563eb",background:"#dbeafe",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>All levels</span>
  </Step>
</Steps>

### Monetize

Turn community activity into revenue.

<Steps>
  <Step title="Product Tagging & Social Commerce" icon="tags">
    Let members tag products in community posts — marketplace boards, group buys, and curated recommendations.

    → [Open guide](/use-cases/social/product-tagging-and-social-commerce) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>

  <Step title="Advertising & Monetization" icon="rectangle-ad">
    Sponsored posts and native ads in community feeds.

    → [Open guide](/use-cases/social/advertising-and-monetization) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>
</Steps>

***

## Gaming

> **Discord, Twitch** — clans, livestreams, and real-time presence.

```mermaid theme={null}
graph LR
    subgraph Build
        A["Clans"] --> B["Roles"]
        B --> C["Livestream"]
    end
    subgraph Engage & Grow
        D["Presence"] --> E["Group Chat"]
        E --> F["Notifications"]
    end
    subgraph Monetize
        G["Product Tags"] --> H["Ads"]
    end
    C --> D
    F --> G

    style A fill:#f3e5f5,stroke:#7b1fa2
    style C fill:#ede7f6,stroke:#4527a0
    style E fill:#e0f2f1,stroke:#00695c
    style G fill:#fff3e0,stroke:#f57c00
    style H fill:#e8f5e9,stroke:#388e3c
```

### Build

Clans, governance, and streaming.

<Steps>
  <Step title="Community Platform" icon="users">
    Clan and team spaces with membership and privacy settings.

    → [Open guide](/use-cases/social/livestream/go-live-and-room-management) · <span style={{color:"#dc2626",background:"#fee2e2",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Advanced</span>
  </Step>

  <Step title="Roles, Permissions & Governance" icon="user-shield">
    Clan leadership roles, mod tools, and member management.

    → [Open guide](/use-cases/social/roles-permissions-and-governance) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>

  <Step title="Livestream & Video Posts" icon="tower-broadcast">
    In-game streams, co-hosting, VOD playback, and live chat.

    → [Open guide](/use-cases/social/livestream-and-video-posts) · <span style={{color:"#dc2626",background:"#fee2e2",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Advanced</span>
  </Step>
</Steps>

### Engage & Grow

Presence, chat, and push alerts.

<Steps>
  <Step title="Real-time Presence & Activity" icon="signal">
    "Online now" indicators and channel presence tracking.

    → [Open guide](/use-cases/social/realtime-presence-and-activity) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>

  <Step title="Group Chat" icon="message">
    Text channels for clans and teams.

    → [See Group Chat path](#group-chat) · <span style={{color:"#2563eb",background:"#dbeafe",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>All levels</span>
  </Step>

  <Step title="Notifications & Engagement" icon="bell">
    Match alerts, tournament updates, and push notifications.

    → [Open guide](/use-cases/social/notifications-and-engagement) · <span style={{color:"#dc2626",background:"#fee2e2",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Advanced</span>
  </Step>
</Steps>

### Monetize

Merch, sponsorships, and partner revenue.

<Steps>
  <Step title="Product Tagging & Social Commerce" icon="tags">
    Tag merch, in-game items, and partner products in clan posts and stream content.

    → [Open guide](/use-cases/social/product-tagging-and-social-commerce) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>

  <Step title="Advertising & Monetization" icon="rectangle-ad">
    In-feed ads for tournament sponsorships and partner promotions.

    → [Open guide](/use-cases/social/advertising-and-monetization) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>
</Steps>

***

## Marketplace

> **Depop, Etsy** — social commerce with buyer-seller messaging and shoppable content.

```mermaid theme={null}
graph LR
    subgraph Build
        A["Onboarding"] --> B["User Search"]
        B --> C["Deep Links"]
        C --> D["Product Tagging"]
    end
    subgraph Engage & Grow
        E["1:1 Chat"] --> F["Moderation"]
    end
    subgraph Monetize
        G["Ads"]
    end
    D --> E
    F --> G

    style A fill:#e1f5fe,stroke:#0288d1
    style D fill:#fff3e0,stroke:#f57c00
    style G fill:#e8f5e9,stroke:#388e3c
```

### Build

Storefront, discovery, and shoppable content.

<Steps>
  <Step title="User Onboarding & Visitor Mode" icon="door-open">
    Let browsers explore listings before signing up.

    → [Open guide](/use-cases/social/user-onboarding-and-visitor-mode) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="User Search & People Discovery" icon="user-magnifying-glass">
    Find sellers, creators, and shops.

    → [Open guide](/use-cases/social/user-search-and-people-discovery) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Content Sharing & Deep Links" icon="share-nodes">
    Shareable product pages and deep-link routing.

    → [Open guide](/use-cases/social/content-sharing-and-deep-links) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Product Tagging & Social Commerce" icon="tags">
    Turn posts and livestreams into shoppable storefronts with product tagging, catalogues, and engagement analytics.

    → [Open guide](/use-cases/social/product-tagging-and-social-commerce) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>
</Steps>

### Engage & Grow

Buyer-seller communication and trust & safety.

<Steps>
  <Step title="1:1 Chat" icon="comment">
    Buyer-seller messaging with read receipts.

    → [See Direct Messages path](#direct-messages) · <span style={{color:"#2563eb",background:"#dbeafe",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>All levels</span>
  </Step>

  <Step title="Content Moderation Pipeline" icon="shield-check">
    Keep listings safe — flagging, AI screening, and admin review.

    → [Open guide](/use-cases/social/content-moderation-pipeline) · <span style={{color:"#dc2626",background:"#fee2e2",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Advanced</span>
  </Step>
</Steps>

### Monetize

Promoted listings and native ads.

<Steps>
  <Step title="Advertising & Monetization" icon="rectangle-ad">
    Native ads in feeds with console-driven config and impression tracking.

    → [Open guide](/use-cases/social/advertising-and-monetization) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>
</Steps>

***

## Livestream

> **Twitch, YouTube Live** — broadcast with interactive chat, streamer profiles, and shoppable streams.

```mermaid theme={null}
graph LR
    subgraph Build
        A["Livestream"] --> B["Communities"]
    end
    subgraph Engage & Grow
        C["Live Chat"] --> D["Profiles"]
        D --> E["Notifications"]
    end
    subgraph Monetize
        F["Product Tags"] --> G["Ads"]
    end
    B --> C
    E --> F

    style A fill:#ede7f6,stroke:#4527a0
    style C fill:#e0f2f1,stroke:#00695c
    style F fill:#fff3e0,stroke:#f57c00
    style G fill:#e8f5e9,stroke:#388e3c
```

### Build

Broadcasting and community spaces.

<Steps>
  <Step title="Livestream & Video Posts" icon="tower-broadcast">
    Broadcast rooms, co-hosting, live chat overlay, and recorded playback.

    → [Open guide](/use-cases/social/livestream/go-live-and-room-management) · <span style={{color:"#dc2626",background:"#fee2e2",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Advanced</span>
  </Step>

  <Step title="Community Platform" icon="users">
    Stream communities where followers gather and discover content.

    → [Open guide](/use-cases/social/community-platform) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>
</Steps>

### Engage & Grow

Chat, audience building, and notifications.

<Steps>
  <Step title="Live Chat" icon="message">
    Real-time stream chat with high-volume message handling.

    → [See Live Chat path](#live-chat) · <span style={{color:"#2563eb",background:"#dbeafe",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>All levels</span>
  </Step>

  <Step title="User Profiles & Social Graph" icon="user-group">
    Follow streamers, view streamer profiles, and build an audience.

    → [Open guide](/use-cases/social/user-profiles-and-social-graph) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Notifications & Engagement" icon="bell">
    "X just went live" push alerts and activity notifications.

    → [Open guide](/use-cases/social/notifications-and-engagement) · <span style={{color:"#dc2626",background:"#fee2e2",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Advanced</span>
  </Step>
</Steps>

### Monetize

Shoppable streams and ad revenue.

<Steps>
  <Step title="Product Tagging & Social Commerce" icon="tags">
    Pin products during a stream, let viewers browse and buy — turn broadcasts into revenue.

    → [Open guide](/use-cases/social/product-tagging-and-social-commerce) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>

  <Step title="Advertising & Monetization" icon="rectangle-ad">
    Native ads alongside streams and in the VOD feed.

    → [Open guide](/use-cases/social/advertising-and-monetization) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>
</Steps>

***

## Direct Messages

> **Dating apps, customer support, marketplace DMs** — private 1:1 messaging with read receipts and rich media.

```mermaid theme={null}
graph LR
    A["Conversation"] --> B["Messaging"]
    B --> C["Read Receipts"]
    C --> D["Rich Media"]

    style A fill:#e1f5fe,stroke:#0288d1
    style B fill:#e8f5e9,stroke:#388e3c
    style C fill:#fff3e0,stroke:#f57c00
    style D fill:#fce4ec,stroke:#c62828
```

<Steps>
  <Step title="Channels & Conversations" icon="message">
    Create a private Conversation channel between two users and display a chat list.

    → [Open guide](/use-cases/chat/channels-and-conversations) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Sending Messages" icon="paper-plane">
    Build the message thread — send, receive, and load history.

    → [Open guide](/use-cases/chat/sending-messages) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Unread Counts & Read Receipts" icon="envelope-open">
    Show the sender when their message was delivered and read.

    → [Open guide](/use-cases/chat/unread-counts-and-read-receipts) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Rich Media Messages" icon="photo-film">
    Photos, voice notes, files, and custom content types.

    → [Open guide](/use-cases/chat/rich-media-messages) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>
</Steps>

***

## Group Chat

> **Discord, Slack, team rooms** — persistent channels with roles, media, threaded replies, and moderation.

```mermaid theme={null}
graph LR
    A["Channels"] --> B["Roles"]
    B --> C["Messaging"]
    C --> D["Threads"]
    D --> E["Moderation"]

    style A fill:#e1f5fe,stroke:#0288d1
    style B fill:#e8f5e9,stroke:#388e3c
    style C fill:#fff3e0,stroke:#f57c00
    style D fill:#fce4ec,stroke:#c62828
    style E fill:#f3e5f5,stroke:#7b1fa2
```

<Steps>
  <Step title="Channels & Conversations" icon="message">
    Create a Community channel, invite members, and display a real-time channel list.

    → [Open guide](/use-cases/chat/channels-and-conversations) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Channel Roles & Permissions" icon="user-shield">
    Establish who can do what before the first message is sent.

    → [Open guide](/use-cases/chat/channel-roles-and-permissions) · <span style={{color:"#d97706",background:"#fef3c7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Intermediate</span>
  </Step>

  <Step title="Messaging & Rich Media" icon="paper-plane">
    Text, images, audio, files, and custom message types.

    → [Open guide](/use-cases/chat/sending-messages) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Threads & Reactions" icon="reply">
    Threaded replies and emoji reactions to keep the main chat clean.

    → [Open guide](/use-cases/chat/message-reactions-and-replies) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Chat Moderation" icon="shield-check">
    Muting, banning, AI content screening, and webhook automation.

    → [Open guide](/use-cases/chat/chat-moderation) · <span style={{color:"#dc2626",background:"#fee2e2",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Advanced</span>
  </Step>
</Steps>

***

## Live Chat

> **Twitch chat, sports events, live Q\&A** — high-volume, many-to-many commentary alongside live content.

```mermaid theme={null}
graph LR
    A["Live Channel"] --> B["Real-time Chat"]
    B --> C["Reactions"]
    C --> D["Moderation"]

    style A fill:#e1f5fe,stroke:#0288d1
    style B fill:#e8f5e9,stroke:#388e3c
    style C fill:#fff3e0,stroke:#f57c00
    style D fill:#fce4ec,stroke:#c62828
```

<Steps>
  <Step title="Channels & Conversations" icon="message">
    Create a Live-type channel that persists across broadcast sessions.

    → [Open guide](/use-cases/chat/channels-and-conversations) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Sending Messages" icon="paper-plane">
    Real-time message sending and querying with automatic rate limiting.

    → [Open guide](/use-cases/chat/sending-messages) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Message Reactions" icon="reply">
    Emoji reactions without flooding the chat with text messages.

    → [Open guide](/use-cases/chat/message-reactions-and-replies) · <span style={{color:"#16a34a",background:"#dcfce7",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Beginner</span>
  </Step>

  <Step title="Chat Moderation" icon="shield-check">
    Automated and manual tools for high-volume chat — mute, ban, AI screening.

    → [Open guide](/use-cases/chat/chat-moderation) · <span style={{color:"#dc2626",background:"#fee2e2",padding:"2px 8px",borderRadius:"12px",fontSize:"0.85em",fontWeight:"500"}}>Advanced</span>
  </Step>
</Steps>