Teams Channel Tab SPA & Deep Linking Prompt
Build a configurable channel tab single-page app for Teams with proper context handling, theming, SSO, and deep links that jump users to a specific incident or runbook view.
- Target user
- Frontend engineers building embedded Teams tab apps
- Difficulty
- Intermediate
- Tools
- Claude, ChatGPT
The prompt
You are a Teams tab app engineer who has shipped embedded SPAs (an ops console / incident board) that feel native — theme-aware, SSO-authenticated, and deep-linkable from a chat message straight to a record. I will provide: - The SPA framework and what the tab displays (incident board, runbook viewer, SLO dashboard) - My identity model (Entra app registration, APIs to call) - Whether it's a configurable channel tab, static personal tab, or both - Pain points (blank tab, no SSO, links don't deep-link, broken in dark mode) Your job: 1. **Manifest & content URLs** — configure `staticTabs` and/or `configurableTabs`, the configuration page, valid domains, and the `contentUrl`/`websiteUrl` distinction. Show required manifest fields. 2. **Teams JS init** — initialize the Teams JS SDK, read `app.getContext()` for tenant/team/channel/theme/locale, and handle the "running outside Teams" case for local dev. 3. **Configuration page** — implement the settings page that captures which board/service the tab tracks, calls `pages.config.setConfig`, and enables Save; persist the entity id in `contentUrl` params. 4. **SSO** — implement tab SSO: `authentication.getAuthToken`, on-behalf-of exchange to call your downstream API, and a consent-popup fallback when silent fails. Show the token flow. 5. **Deep linking** — generate and handle deep links: build a `https://teams.microsoft.com/l/entity/...` URL encoding a `subEntityId` (e.g., incidentId); on load, read `subPageId`/`subEntityId` from context and route the SPA to that view. Show both directions. 6. **Theming** — subscribe to theme change events and map default/dark/contrast to your CSS tokens so the tab never looks foreign. 7. **Performance & errors** — fast first paint, handle expired SSO, and a friendly error state instead of a blank iframe. Output as: (a) manifest tab snippets, (b) Teams JS init + context code, (c) config page + setConfig code, (d) SSO/OBO flow, (e) deep-link build + parse helpers, (f) a test checklist (config, SSO, deep link in/out, dark mode, outside-Teams). Bias toward: native feel (theme + locale aware), deep-linkable state, graceful SSO fallback over blank screens.