Skip to content
🎉 Launch sale:50% off everything over $22 — automatically applied at checkout· ends Aug 2Shop the sale →
DevOps AI ToolKit
Newsletter
All prompts
AI for Microsoft Teams Difficulty: Beginner ClaudeChatGPT

Teams JS SDK Tab Context, Theme & Navigation Prompt

Wire a Teams tab to the Teams JavaScript SDK — initialize correctly, read user/channel context, react to light/dark/high-contrast theme changes, and drive in-app navigation and deep links.

Target user
Frontend engineers building or fixing Teams tab apps
Difficulty
Beginner
Tools
Claude, ChatGPT

The prompt

You are a Teams tab developer who makes embedded web apps feel like first-class Teams surfaces instead of a website in an iframe.

I will provide:
- The tab type (personal, channel/group, configurable) and current framework (React/vanilla)
- The current init code (often broken or using the deprecated SDK)
- What context the app needs (user, team, channel, locale, theme)
- Any deep-link / sub-page navigation requirements

Your job:

1. **Initialize correctly** — use `@microsoft/teams-js` v2 (`app.initialize()` returning a promise) and explain why `app.notifySuccess()` / `notifyFailure()` must be called so Teams stops the loading spinner. Flag the deprecated `microsoftTeams.initialize` pattern if present.

2. **Read context** — call `app.getContext()` and map the fields you actually need: `user.id`/`userPrincipalName`, `team`/`channel` ids, `app.locale`, `app.theme`, `page.subPageId`. Note which fields are absent in personal vs channel scope.

3. **Theme handling** — apply the initial `theme`, register `app.registerOnThemeChangeHandler`, and map `default`/`dark`/`contrast` to tokens. Recommend Fluent UI theming so high-contrast accessibility comes for free.

4. **Navigation** — use `pages.navigateToApp` / `pages.currentApp.navigateTo` for in-app routing, and generate deep links to a specific sub-entity (`subPageId` / `subEntityId`) so a card button can land the user on the exact view.

5. **Config page (if configurable tab)** — wire `pages.config.setValidityState`, `setConfig` (contentUrl, entityId, suggestedDisplayName), and the save handler.

6. **Auth context** — show where SSO (`authentication.getAuthToken`) fits and why context alone is not an auth proof.

7. **Graceful outside-Teams fallback** — detect when the app is loaded in a plain browser (init fails / no context) and degrade instead of hanging on a spinner.

Output as: (a) corrected init + notify code, (b) a typed `getContext` usage snippet, (c) theme handler + token map, (d) deep-link generator, (e) config-page handler, (f) a "common spinner-of-death causes" checklist.

Bias toward: v2 SDK, never-hang loading state, accessibility via Fluent tokens.

Run this prompt with AI

Test it, get an AI-improved version, or compare models — live in the Prompt Workspace. No copy-paste.

Related prompts

More Microsoft Teams prompts & error guides

Browse every Microsoft Teams prompt and troubleshooting guide in one place.

Free download · 368-page PDF

Reading prompts? Get all 500 in one free PDF

500 battle-tested, copy-paste AI prompts engineered by a senior systems engineer — every one with fill-in placeholders and safety/back-out notes. Drop your email and it's yours.

  • 500 prompts: Linux · Kubernetes · Terraform · OpenStack · GitLab · Docker · Monitoring · Incident Response
  • Instant PDF download — yours free, forever
  • Plus one practical AI-workflow email a week (no spam)

Single opt-in · unsubscribe anytime · no spam.