Copilot Studio: Use of Adaptive Card Node with a Real-World Example

 Introduction

In today’s AI-driven app development, Copilot Studio is emerging as a powerful tool to build conversational agents quickly and smartly. One such hidden gem in the Copilot Studio toolbox is the Adaptive Card Node — a flexible way to show rich content in conversations using JSON-based cards.

In this article, let’s understand the use of Adaptive Card Node in Copilot Studio, and walk through a practical example that you can try out in your own bot. Whether you're building internal tools, IT service bots, or HR assistants, this component can add serious polish to your user experience.

---

🚀 What is an Adaptive Card Node in Copilot Studio?

The Adaptive Card Node allows you to present structured data, images, buttons, and input forms directly in the bot conversation pane — without needing any front-end code. It’s based on the Adaptive Cards framework by Microsoft, which works across platforms like Teams, Outlook, and Web Chat.

Think of it like a dynamic card that you can completely customize using JSON.

---

🔍 When to Use Adaptive Card Node?

Use it when you want to:

• Show user profile or ticket details in a rich UI
• Create feedback forms within the chat
• Embed images, icons, or quick replies
• Display tabular data or summaries

In short, anytime plain text feels boring, go for Adaptive Cards.

---

🛠️ How to Use Adaptive Card Node in Copilot Studio

Follow these steps to integrate an Adaptive Card Node inside your Copilot topic:

Step 1: Open Copilot Studio and edit a topic

Pick an existing topic or create a new one.

Step 2: Add a new Node ➕Click on the "+" button where you want to add the card and select “Adaptive Card” from the list.

Click + button inside the canvas panel,

 Select adaptive Card,

Step 3: Paste Adaptive Card JSON

Write or paste your JSON card schema. You can use https://adaptivecards.io/designer to visually design the card and copy the payload.

Click Edit adaptive card ,

 

Next,

Step 4: Bind Data (Optional)

You can dynamically pass variables like username, ticket number, or product names using curly braces:
"text": "Hello {userName}, here is your ticket info"

🧾 What is "type": "FactSet" in Adaptive Cards?

The "FactSet" is a layout element in Adaptive Cards that helps you display key-value pairs in a clean, tabular format — like labels and their values side by side.

Think of it like a read-only table or a quick summary section.

{
  "type": "FactSet",
  "facts": [
    {
      "title": "Employee:",
      "value": "{userName}"
    },
    {
      "title": "Leave Type:",
      "value": "{leaveType}"
    },
    {
      "title": "From Date:",
      "value": "{fromDate}"
    },
    {
      "title": "To Date:",
      "value": "{toDate}"
    },
    {
      "title": "Status:",
      "value": "Pending Approval"
    }
  ]
}

🔍 Explanation of Each Part

Field	Meaning
"type": "FactSet"	Tells Adaptive Card to render a group of facts (label-value pairs).
"facts"	An array (list) of fact objects. Each fact has:
"title"	The label or heading, usually on the left side.
"value"	The corresponding value, usually on the right side.

---

🖼️ How it appears in the card:

Employee:	John Doe
Leave Type:	Sick Leave
From Date:	2025-07-20
To Date:	2025-07-22
Status:	Pending Approval

This format is ideal for showing summaries, records, order details, or anything you want to display neatly without clutter.

 

Step 4: Save and Publish

  After you copied /created Json card click and save it. (Copy the sample Json from below example for testing)

---

 

Output;

✅ Real Example: Show Leave Request Summary in a Card

Let’s say we are building an Employee Leave Bot and we want to show a leave summary using an Adaptive Card.

Here’s the JSON payload:

{
  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "TextBlock",
      "text": "Leave Request Summary",
      "size": "Large",
      "weight": "Bolder",
      "color": "Accent"
    },
    {
      "type": "FactSet",
      "facts": [
        {
          "title": "Employee:",
          "value": "{userName}"
        },
        {
          "title": "Leave Type:",
          "value": "{leaveType}"
        },
        {
          "title": "From Date:",
          "value": "{fromDate}"
        },
        {
          "title": "To Date:",
          "value": "{toDate}"
        },
        {
          "title": "Status:",
          "value": "Pending Approval"
        }
      ]
    },
    {
      "type": "Image",
      "url": "https://www.shutterstock.com/image-photo/las-vegas-nv-oct-09-600nw-2374385911.jpg",
      "size": "Stretch"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit"
    }
  ]
}

In the conversation, it would look like a nice card with all values neatly aligned — way better than dumping it as plain text!

---

💡 Pro Tips

• Use FactSet for key-value data (like name, date, status).
• Use Images to show profile pictures or product previews.
• Use Actions to allow user responses (like Approve/Reject).
• Always test in the Copilot Studio Test Chat and Teams/Web to see layout consistency.

---

🔚 Conclusion

Using Adaptive Card Node in Copilot Studio is a game-changer when it comes to enhancing the look and usability of your bot conversations. It not only makes your bot more professional but also gives users a more intuitive and interactive experience.

Next time you're designing a topic, don’t just settle for plain text — leverage Adaptive Cards to make your Copilot truly shine!

---

🔗 Related Keywords:

• Copilot Studio Adaptive Card Example
• Use Adaptive Card in Power Virtual Agent
• Microsoft Adaptive Cards in Copilot
• Adaptive Card Designer JSON
• Power Platform Conversational UI

---

Let me know in the comments if you want a tutorial for dynamic Adaptive Cards using Power Automate too! 😊