Embed Grafana Panel Images in Teams Adaptive Cards Prompt
Design an Adaptive Card that renders Grafana panel snapshots as an ImageSet/Image so on-call engineers see live dashboard visuals inside a Teams alert without leaving the channel.
- Target user
- SRE / observability engineers wiring Grafana alerts into Teams
- Difficulty
- Intermediate
- Tools
- Claude, ChatGPT, Cursor
The prompt
You are a senior observability engineer who has shipped Grafana-to-Teams alerting where the card itself shows the panel graph, not just a link.
I will provide:
- Grafana version + whether the image renderer plugin (or grafana-image-renderer) is installed
- Panel/dashboard UIDs and the alert source (Grafana Alerting, Alertmanager, or a webhook)
- How the card is posted (Incoming Webhook / Workflows "Post card", Bot Framework, or Graph)
- Auth model for image fetch (service account token, signed render URL, reverse proxy)
Your job:
1. **Produce the render URL correctly**:
- Use the render endpoint: `/render/d-solo/{dashboardUid}/{slug}?panelId={id}&from={ms}&to={ms}&width=1000&height=500&tz=UTC`
- Explain d-solo vs full-dashboard render, and why `panelId` + explicit `from/to` (absolute epoch ms, not `now-1h`) makes the image reproducible in the postmortem
- Note that `/render` requires grafana-image-renderer; if absent, fall back to a pre-rendered snapshot or Grafana's public snapshot URL
2. **Solve the auth-for-image problem** (Teams fetches the image server-to-server, unauthenticated):
- Option A: short-TTL signed URL from a proxy that injects the service-account token
- Option B: a render proxy that maps an opaque token → panel and strips secrets
- Explain why a raw `Authorization: Bearer` cannot travel in a card, and why public org anonymous access is usually the wrong fix
3. **Build the Adaptive Card JSON** (schema 1.5):
- A `Container` with a header TextBlock (alert name, severity color via `style`/`color`)
- An `Image` (single panel) or `ImageSet` with `imageSize: "large"` for multiple panels
- `altText` describing the metric for screen readers
- A `FactSet` for value/threshold/duration and an `Action.OpenUrl` deep-linking to the live panel
- Handle the fallback: if the image domain is not allowlisted or the render fails, degrade to a text summary rather than a broken-image card
4. **Respect Teams image constraints**:
- Keep the rendered image under the effective card size budget; large PNGs bloat the payload
- Confirm the image host is reachable from Microsoft's fetchers and, for org policy, on the allowed image sources
- Prefer PNG at a sane width (≈1000px) so it stays crisp on desktop but light on mobile
5. **Wire it end to end**: show the Alertmanager/Grafana webhook payload → templating step (Logic App/Workflows/bot) that injects the signed render URL into the card template → post.
Output as: (a) the exact render URL pattern with parameters explained, (b) the image-auth proxy design, (c) the full Adaptive Card JSON, (d) the templating/glue step, (e) the graceful-degradation path when rendering fails.
Bias toward: reproducible absolute time ranges, secret-free card JSON, and a text fallback so an alert is never a blank card.
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
-
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.
-
Teams Adaptive Card Form Designer for Runbook Inputs Prompt
Design Adaptive Card forms for runbook inputs in Teams — typed inputs, validation, conditional visibility, multi-step flows, and submission via Action.Execute to your bot service.
-
Teams Adaptive Card for Incident Notifications Prompt
Design rich Adaptive Card JSON for incident notifications in Microsoft Teams — severity styling, action buttons, deep links to runbooks, and acknowledgement state.
-
Azure Monitor Alerts to Teams Adaptive Cards Prompt
Route Azure Monitor alerts (metric, log query, activity) into Teams as Adaptive Cards with deep links to the Azure portal, AKS / VM / App Service context, and ack workflow.
More Microsoft Teams prompts & error guides
Browse every Microsoft Teams prompt and troubleshooting guide in one place.
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.