MCP Create Adaptive Cards

MCP create Adaptive Cards

Adds Adaptive Card response templates to MCP-based API plugins so Microsoft 365 Copilot can present API data visually with citation mappings, template selection, conditional rendering, and responsive single-column layouts.

When to invoke

• "Create an Adaptive Card for this MCP tool response."
• "Add response_semantics and citation mappings to my API plugin."
• "Present this API data as cards in Microsoft 365 Copilot."
• "Use JSONPath to map response fields into an Adaptive Card template."
• "Build static or dynamic Adaptive Card templates for different item types."

Prerequisites and context

Gather these details before producing JSON:

1. What type of data the API returns.
2. Whether all items are the same type (static template) or different types (dynamic templates).
3. Which fields should appear in the card.
4. Whether the card needs actions such as View Details.
5. Whether multiple states or categories require different templates.

Read references/card-reference-examples.md for card type schemas, element details, complete JSON, and common snippets.

Response semantics

Adaptive Card template language

{
  "type": "TextBlock",
  "text": "${if(field, field, 'N/A')}"
}

{
  "type": "TextBlock",
  "text": "${formatNumber(amount, 2)}"
}

{
  "type": "Container",
  "$data": "${$root}",
  "items": []
}

{
  "type": "Image",
  "url": "${imageUrl}",
  "$when": "${imageUrl != null}"
}

Use conditional rendering for missing fields, number formatting for amounts, $data to bind arrays or break to $root, and $when to hide optional images or sections.

Responsive design criteria

Procedure

1. Inspect the API response shape and choose data_path.
2. Map citation properties for title, subtitle, and URL.
3. Decide whether the card uses one static template or dynamic templates with template_selector.
4. Build the Adaptive Card template with safe data bindings, conditional rendering, and responsive layout.
5. Add actions only when the user requested them or the API response includes a trustworthy link.
6. Validate with representative response samples, missing optional fields, long text, narrow width, and each relevant hub.

Progressive disclosure and bundled resources

• references/card-reference-examples.md: Adaptive Card schema patterns, card examples, element details, and reusable JSON snippets.

MCP plugin vocabulary

This skill replaces legacy api-plugin response-templates prompt material with portable Skill instructions. Do not copy old prompt tool IDs such as search/codebase or edit/editFiles into skill frontmatter. Avoid multi-column layouts except when tested; fixed widths are acceptable only for icons/avatars.

Output template

### MCP Adaptive Card result

**Status:** template ready | needs API details | blocked
**Data path:** `<JSONPath>`
**Template mode:** static | dynamic

**response_semantics**
```json
{
  "data_path": "$.results",
  "properties": {
    "title": "$.name",
    "subtitle": "$.description",
    "url": "$.link"
  },
  "template_selector": "$.displayTemplate"
}
```

**Adaptive Card template**
```json
{
  "type": "AdaptiveCard",
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.5",
  "body": [
    {
      "type": "TextBlock",
      "text": "${if(name, name, 'N/A')}",
      "wrap": true
    }
  ]
}
```

**Validation scenarios**
- Same-type item: pass | fail
- Dynamic template item: pass | fail | not applicable
- Missing optional fields: pass | fail
- Narrow viewport: pass | fail
- Teams, Word, PowerPoint: pass | fail | not tested

Quality gate

• data_path points to the actual item collection or response root.
• properties.title, properties.subtitle, and properties.url map real response fields for citations.
• Static vs dynamic template choice matches whether item types vary.
• Optional fields use ${if(...)} or $when instead of rendering broken blanks.
• Numeric values use ${formatNumber(amount, 2)} or another deliberate format.
• Layout is responsive, single-column by default, and avoids fixed widths except icons or avatars.
• Text blocks that can overflow use "wrap": true.
• Validation covers Teams, Word, PowerPoint, and narrow viewports when available.

References

• Adaptive Card Designer
• Adaptive Card Schema
• Template Language
• JSONPath