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

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.