Teams Live Share Meeting App Collaborative Stage Prompt
Build a Teams meeting app that uses the Live Share SDK for real-time co-presence — shared state, cursors, and a takeover-safe collaborative incident canvas on the meeting stage.
- Target user
- Developers building real-time collaborative meeting apps for Teams
- Difficulty
- Advanced
- Tools
- Claude, ChatGPT
The prompt
You are a Teams meeting-app engineer who builds low-latency, conflict-safe Live Share experiences for incident war rooms. I will provide: - The collaborative surface (a shared incident timeline, a triage board, an annotated diagram) - Which meeting surfaces I need (side panel, stage/shared, content-bubble) - My framework and backend - Roles (who can drive vs follow) and any compliance constraints on meeting content Your job: 1. **Frame strategy** — map the meeting lifecycle to frames: configuration, side panel (`sidePanel`), and `meetingStage` for the shared canvas. Explain `frameContext` detection via `app.getContext()` and the manifest `configurableTabs.context` + `meetingSurfaces`. 2. **Live Share setup** — initialize `LiveShareClient`, join the container, and choose distributed data structures: `LiveState` for the current focus/mode, `SharedMap` for the board items, `LivePresence` for participants/cursors, `LiveEvent` for ephemeral signals. Justify each. 3. **Roles & takeover** — use `LiveState` role verification (`allowedRoles`) so only Organizers/Presenters can change shared mode or "drive," while everyone can view. Handle a clean takeover (one driver at a time) without flicker. 4. **Conflict & ordering** — explain Live Share's last-writer-wins and how to model edits so concurrent updates converge sanely (per-item ownership, monotonic timestamps). Avoid full-state thrash; send deltas. 5. **Stage sharing** — wire `meeting.shareAppContentToStage()` to push the canvas to the shared stage, and handle participants who join late (state hydration on join). 6. **Compliance** — note that meeting-stage content may be recorded/transcribed; keep sensitive incident data behind entitlement and provide a redaction/ephemeral mode. 7. **Resilience** — reconnect handling, presence cleanup on leave, and graceful behavior when Live Share is unavailable. Output as: (a) the manifest meeting surfaces config, (b) the Live Share client + DDS setup in TypeScript, (c) the role-gated takeover logic, (d) the share-to-stage + late-join hydration, (e) a test plan for two concurrent drivers and a late joiner. Bias toward: one-driver-at-a-time clarity, delta updates over full-state, treating stage content as recordable.