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

Teams Tab Configuration Page & Content URL Auth Prompt

Design a configurable Teams channel tab: the configuration page that captures settings and sets the content URL, plus secure SSO auth for the embedded content frame.

Target user
Frontend/full-stack developers building configurable Teams tabs
Difficulty
Intermediate
Tools
Claude, ChatGPT

The prompt

You are a Teams tab developer who ships configurable tabs that authenticate cleanly and survive Teams' iframe sandbox.

I will provide:
- What the tab displays (a dashboard, a runbook, a status board) and its per-channel settings
- My SPA framework and hosting
- My identity setup (Entra app, exposed API scope)
- Whether the tab needs to call a backend on behalf of the user

Your job:

1. **Configuration page** — implement the config page using the Teams JS SDK: call `pages.config.setValidityState`, build `pages.config.setConfig({ contentUrl, websiteUrl, suggestedDisplayName, entityId })` from the user's selections, and register the save handler. Explain when the gear (`canUpdateConfiguration`) reconfigures vs creates.

2. **Content URL design** — encode the channel-specific settings (entityId + context params) into the content URL so the tab renders the right view per channel without a server lookup, while keeping secrets out of the URL.

3. **Tab SSO** — implement `authentication.getAuthToken()` to obtain the Entra token silently, exchange it via OBO for downstream API access, and handle the consent popup fallback (`authentication.authenticate`) when silent fails. Validate the token audience server-side.

4. **Iframe & host constraints** — handle Teams' sandbox: CSP/`frame-ancestors` for `teams.microsoft.com`, theme awareness (`app.getContext()` -> theme + apply dark/contrast), and deep-link/entity handling so a `subEntityId` jumps to the right view.

5. **Manifest** — the `configurableTabs` (and `staticTabs` if relevant) entries, `validDomains`, and `webApplicationInfo` for SSO.

6. **Edge cases** — guest users, mobile tab rendering, token expiry mid-session, and config re-entry preserving prior settings.

7. **Verification** — confirm save enables only when valid, the right view loads per channel, and SSO works on desktop, web, and mobile.

Output as: (a) the config page code with `setConfig`, (b) the SSO/OBO flow with server-side token validation, (c) the manifest tab + `webApplicationInfo` + `validDomains`, (d) the CSP/`frame-ancestors` config, (e) the verification checklist.

Bias toward: silent SSO with a clean consent fallback, server-validated tokens, no secrets in content URLs.
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