MCP Create Adaptive Cards

A skill for generating Microsoft Adaptive Cards through MCP interfaces, creating rich, interactive card layouts for Teams, Outlook, and Copilot Studio.

What Is This?

Overview

This skill generates Adaptive Card JSON via MCP tool calls, producing interactive cards with text, images, inputs, and actions for Microsoft Teams, Outlook, and Copilot Studio.

Who Should Use This

Perfect for developers building Teams bots and message extensions, Copilot Studio creators needing rich responses, and enterprise teams automating notifications with interactive card layouts.

Why Use It?

Problems It Solves

Adaptive Card JSON schema is complex with nested containers and action sets. Manual authoring is error-prone and iteration is slow. This skill generates valid JSON from natural language descriptions.

Core Highlights

• Schema Compliant - Generates valid Adaptive Cards 1.5+ JSON
• Rich Layouts - Columns, containers, image sets, and fact sets
• Interactive Elements - Input fields, buttons, toggles, and choice sets
• Action Support - Submit, OpenURL, ShowCard, and Execute actions
• Platform Aware - Adapts output for Teams, Outlook, or Copilot contexts

How to Use It?

Basic Usage

Ask Claude to create Adaptive Cards, and this skill generates complete JSON payloads.

Scenario 1: Notification Card

Ask Claude: "Create an Adaptive Card for a deployment notification"

Claude will generate:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "auto",
          "items": [{ "type": "Image", "url": "${deployIcon}", "size": "Small" }]
        },
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            { "type": "TextBlock", "text": "Deployment Successful", "weight": "Bolder", "size": "Medium" },
            { "type": "TextBlock", "text": "Production v2.4.1", "spacing": "None", "isSubtle": true }
          ]
        }
      ]
    },
    {
      "type": "FactSet",
      "facts": [
        { "title": "Environment", "value": "Production" },
        { "title": "Version", "value": "2.4.1" },
        { "title": "Deployed By", "value": "CI/CD Pipeline" },
        { "title": "Duration", "value": "3m 42s" }
      ]
    }
  ],
  "actions": [
    { "type": "Action.OpenUrl", "title": "View Logs", "url": "${logsUrl}" },
    { "type": "Action.OpenUrl", "title": "Rollback", "url": "${rollbackUrl}" }
  ]
}

Scenario 2: Interactive Form Card

Tell Claude: "Create an approval form Adaptive Card"

Claude will generate cards with Input.Text, Input.ChoiceSet, and Action.Submit elements:

{
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    { "type": "TextBlock", "text": "Expense Approval", "weight": "Bolder", "size": "Large" },
    { "type": "Input.Text", "id": "comments", "label": "Comments", "isMultiline": true },
    {
      "type": "Input.ChoiceSet",
      "id": "decision",
      "label": "Decision",
      "choices": [
        { "title": "Approve", "value": "approved" },
        { "title": "Reject", "value": "rejected" }
      ]
    }
  ],
  "actions": [
    { "type": "Action.Submit", "title": "Submit Decision" }
  ]
}

Real-World Examples

IT Incident Alerts

An operations team automated incident cards in Teams with severity, affected services, and acknowledge buttons, reducing response time by 45%.

HR Onboarding Workflow

HR built onboarding cards collecting equipment preferences and introductions through Input.ChoiceSet fields in Teams.

Advanced Tips

Templating with Data Binding

Use Adaptive Cards Templating to separate structure from data. Define templates with ${expression} bindings populated at runtime.

Platform-Specific Features

Test cards across target platforms. Teams supports Action.Execute for bot interactions, while Outlook limits some interactive elements. Use the Adaptive Cards Designer to preview rendering differences.

When to Use It?

Use Cases

• Teams Notifications - Send rich alerts and updates to Teams channels
• Approval Workflows - Create interactive approval forms in Teams or Outlook
• Dashboard Cards - Display KPIs and metrics in conversational interfaces
• Bot Responses - Generate structured bot replies with action buttons
• Copilot Responses - Provide rich formatted responses from Copilot tools

Related Topics

When you ask Claude these questions, this skill will activate:

• "Create an Adaptive Card for Teams"
• "Generate Adaptive Card JSON"
• "Build interactive card for approval workflow"
• "MCP tool that returns Adaptive Cards"

Important Notes

Requirements

• Adaptive Cards schema 1.5+ for latest features
• Microsoft Teams, Outlook, or Copilot Studio as rendering host
• Understanding of JSON structure for card customization
• Bot Framework SDK if integrating with Teams bots

Usage Recommendations

Do:

• Test in target platform - Rendering varies between Teams, Outlook, and web
• Use FactSets for data - Structured key-value display for clean layouts
• Keep cards focused - One primary action per card for engagement
• Use templating - Separate structure from data for reuse

Don't:

• Don't nest too deeply - Limit container nesting to 3 levels for readability
• Don't overload with actions - Maximum 3 to 4 actions per card
• Don't ignore accessibility - Include alt text for images and labels for inputs

Limitations

• Rendering capabilities vary by host application and version
• Some input types are not supported in Outlook or older Teams clients
• Card payload size limited to 28KB in Teams
• Action.Execute requires Bot Framework integration