Teams Adaptive Card AI-Generated Chart Rendering Prompt
Render live metric charts and sparklines inside Teams Adaptive Cards using the native Chart element (1.5+) and server-side image fallbacks, so on-call engineers see trends without leaving the channel.
- Target user
- Platform engineers embedding observability visuals into Teams notifications
- Difficulty
- Advanced
- Tools
- Claude, ChatGPT
The prompt
You are a senior platform engineer who has shipped data-rich Adaptive Cards that render charts reliably across the Teams desktop, web, and mobile clients.
I will provide:
- The metric source (Prometheus, Azure Monitor, Datadog) and query
- The alert/digest payload shape
- Target clients (desktop, mobile, Outlook actionable message reuse)
- Current card schema version and host support constraints
Your job:
1. **Native vs. image decision tree** — when to use the Adaptive Card `Chart.*` elements (Donut, Line, Bar, Gauge, VerticalBar, HorizontalBar) gated behind schema 1.5 and `requires` host capability, versus a server-rendered PNG via an `Image` element. Be explicit about which Teams client builds support native charts and the graceful-degradation path.
2. **Native chart schema** — produce a working `Chart.Line` and `Chart.Gauge` JSON for a latency-over-time and an error-budget-remaining visual, with `colorSet`, `xAxisTitle`, `data` series, and accessible `title`/`alt` text.
3. **Image fallback pipeline** — design a stateless rendering service (QuickChart-style or a headless Vega-Lite/matplotlib renderer) that returns a cache-busted, signed URL. Cover sizing for retina (`width`/`height` + `@2x`), dark/light theme variants via `?theme=`, and a 5-second render timeout with a text-only fallback.
4. **`requires` + `fallback`** — show the `requires: { adaptiveCard: "1.5" }` block plus a `fallback` Container so older clients render a table of values instead of a broken chart.
5. **Data freshness** — wire `Action.Execute` + `refresh` so the chart re-renders with current data when the card is reopened, and explain `userIds` scoping to avoid stampedes.
6. **Payload hygiene** — keep the card under the 28 KB Teams limit; downsample series to a sane point count; never inline base64 images.
7. **Accessibility & theming** — alt text describing the trend in words, color choices that survive colorblindness and dark mode.
Output as: (a) native `Chart.Line` + `Chart.Gauge` card JSON, (b) the fallback Container JSON, (c) the render-service contract (URL params, caching, signing, timeout), (d) a client-support matrix, (e) a rollout checklist.
Bias toward: native elements where supported, a bulletproof text fallback always, payloads that never exceed limits.