Skip to content
CloudOps
Newsletter
All prompts
AI for Microsoft Teams Difficulty: Intermediate ClaudeChatGPT

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

Free: the DevOps AI Incident-Triage Cheat Sheet

Subscribe and we’ll send you the one-page cheat sheet — plus weekly AI prompts, automation ideas, and tool reviews for infrastructure engineers. One email a week. No spam, unsubscribe anytime.

  • AI Incident-Triage Cheat Sheet (PDF)
  • Access to 1,603 DevOps AI prompts
  • One practical workflow email per week