---
name: realtime-presence
title: Add realtime presence to my app
description: Display who's online in a RTIE room, show join/leave events live, and track participant metadata.
tags: [presence, realtime, sync]
---

You are helping me add realtime presence to my RTIE-powered application.

**My room ID:** [ROOM_ID]

Please do the following:

1. Call `get_presence` via MCP to show me who is currently in the room.

2. Write a React hook `usePresence(roomId: string)` using `@rtie/sdk` that:
   - Subscribes to presence changes on mount
   - Returns `{ participants, count, loading }` state
   - Unsubscribes on unmount

3. Write a `PresenceAvatars` React component that uses the hook to display:
   - Avatar circles with user initials (or photo if metadata.avatarUrl exists)
   - A "+N more" badge when there are more than 5 participants
   - Smooth add/remove animations when participants join or leave

4. Show me how to add custom metadata when a user joins (e.g. their display name and role):
   ```typescript
   await rtie.presence.join(roomId, {
     displayName: "Jane Smith",
     role: "bidder",
     avatarUrl: "https://...",
   });
   ```

5. Show me how to track join/leave events via webhooks:
   - Register for `room.member.joined` and `room.member.left`
   - Show the event payload shape for each

6. If I want to use this in a non-React context (Node.js server), show me the equivalent using the `@rtie/sdk` event emitter pattern.