Use Adaptive Cards with Copilot

What are Adaptive Cards?

Adaptive Cards are a cross-platform, open framework for creating visually rich, flexible, and interactive card-based UI components. They can be used across various Microsoft applications like Teams, Outlook, and even custom apps integrated with Microsoft Graph or Power Automate.

Adaptive Cards are built using JSON and rendered natively inside host applications, allowing for consistent experiences across devices. They can display rich content like text, images, input forms, and action buttons and dynamically adjust based on the host's capabilities.

Why Use Adaptive Cards in Copilot?

When integrated into Microsoft Copilot, Adaptive Cards allow developers to provide users with more than just textual responses. They enable interactive inputs and dynamic content inside Copilot responses. By using Adaptive Cards, developers can create highly interactive user interfaces that seamlessly blend with Copilot's conversational interface.

Scenario: This copilot takes basic details from the user via the Adaptive card and shows the details ( which are dynamically recorded) in the Adaptive card only.

Let's test this scenario step by step.

Step 1. Go to https://copilotstudio.microsoft.com/ and create a new copilot.

Step 2. Rename the copilot with "Copilot with Adaptive Cards". Add the description as shown in the image. Click on the Create button on the top right corner.

Step 3. Go to the Topics and create a new Topic. Rename it as "My Details" and Add the trigger terms.

Step 4. Add the trigger terms as per the image and save the copilot.

Step 5. Click on the Plus sign and add the action "Ask with Adaptive cards".

Step 6. Add the following JSON in the Adaptive card properties after selecting the added node. Save the Copilot.

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Enter your details"
        },
        {
            "type": "Input.Text",
            "id": "myName",
            "label": "Your name (First Last)",
            "regex": "^[A-Z][a-z]+( [A-Z][a-z]+)*$",
            "errorMessage": "Please enter your name in the specified format (First Last)",
            "isRequired": true
        },
        {
            "type": "Input.Text",
            "id": "myEmail",
            "label": "Your email",
            "regex": "^[\\w\\.-]+@[a-zA-Z\\d\\.-]+\\.[a-zA-Z]{2,}$",
            "errorMessage": "Please enter a valid email address",
            "isRequired": true
        },
        {
            "type": "Input.Text",
            "id": "myPhone",
            "label": "Phone number (xxx xxx xxxx)",
            "regex": "^\\d{3} \\d{3} \\d{4}$",
            "errorMessage": "Please enter your phone number in the format xxx xxx xxxx"
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Submit"
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.5"
}

Step 7. Again, click on the plus sign and add the "Send the message action".

Step 8. After clicking the message, select "Adaptive card" as shown in the image.

Step 9. Select the added node and in the Adaptive card properties pane select "Edit formula" from the dropdown instead of "Edit JSON" and add the code below in that. We will use Power Fx to get the dynamic data added by the user.

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Thanks for information!"
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "title": "Name",
                    "value": Topic.myName
                },
                {
                    "title": "Email",
                    "value": Topic.myEmail
                },
                {
                    "title": "Phone",
                    "value": Topic.myPhone
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "Your information is recorded successfully!"
        }
    ]
}

Step 10. Save the copilot and Test the copilot by clicking on the "Test" button from the upper right corner.