Designing responsive UIs in Copilot Studio (formerly Power Virtual Agents with advanced capabilities) requires an understanding of how to create adaptive and user-friendly interfaces that work across various screen sizes and devices. Below is a fully detailed guide covering each step, from planning to implementation, with best practices.

Step 1: Understanding Copilot Studio’s UI Capabilities

Before designing a responsive UI, it’s important to understand how Copilot Studio handles UI elements:

Copilot Studio enables chatbot interactions with users via web chat, Teams, and custom embedded experiences.
It supports adaptive cards for displaying rich media, text, buttons, and interactive elements.
The layout automatically adjusts based on the platform but requires optimization for different screen sizes.
Power Automate and Dataverse can be used for advanced integrations.
Custom Canvas Apps (PowerApps) can be embedded to provide more flexible UI designs.

Step 2: Planning the Responsive UI

A well-structured responsive UI design starts with proper planning. Consider these aspects:

1. Define the User Flow

Identify how users interact with the chatbot and UI elements.
Determine key touchpoints where responsiveness matters.
Define different screen sizes the UI should support (mobile, tablet, desktop).

2. Choose the Right UI Components

Copilot Studio supports:

Text-based interactions: Simple chatbot responses.
Adaptive Cards: Rich UI elements with images, buttons, and input fields.
Embedded Web Content: Custom HTML, JavaScript, or PowerApps integration.

3. Use a Mobile-First Approach

Design for small screens first, then scale up.
Ensure text is readable, and buttons are easy to click on touchscreens.
Test how components behave on different resolutions.

Step 3: Implementing Responsive UI in Copilot Studio

Now that the planning is complete, let’s go step by step through implementation.

Step 3.1: Creating an Adaptive Card for a Responsive UI

Adaptive Cards are JSON-based UI components that automatically adjust to different screen sizes.

1. Open Copilot Studio

Go to Copilot Studio (https://copilotstudio.microsoft.com/).
Create a new bot or select an existing one.

2. Add an Adaptive Card

In the authoring canvas, select + (Add Node).
Choose Send a Message → Show an Adaptive Card.

3. Define the JSON for the Adaptive Card

Modify the JSON to ensure responsiveness:

{
  "type": "AdaptiveCard",
  "version": "1.4",
  "body": [
    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "Welcome to the Responsive UI!",
          "wrap": true,
          "size": "Medium",
          "weight": "Bolder"
        },
        {
          "type": "Image",
          "url": "https://example.com/responsive-image.png",
          "size": "Stretch",
          "altText": "Responsive Image"
        },
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "auto",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Click below:",
                  "wrap": true
                }
              ]
            },
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "ActionSet",
                  "actions": [
                    {
                      "type": "Action.OpenUrl",
                      "title": "Visit",
                      "url": "https://example.com"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Key Features:

size: "Stretch" ensures images adjust dynamically.
ColumnSet aligns text and buttons flexibly.
TextBlock with wrap prevents text from getting cut off.

4. Save and Test the Adaptive Card

Click Preview in the chatbot window.
Resize your browser window and test on mobile and desktop.

Step 3.2: Embedding Responsive Web Content

For more complex UI elements, you can embed PowerApps or custom web pages.

1. Embed a PowerApps Form

Go to PowerApps (https://make.powerapps.com/).
Create a responsive Canvas App.
Use the Container control in PowerApps to ensure adaptive layouts.
Publish the app and copy its URL.

2. Add Web Content in Copilot Studio

In the bot editor, add a Custom Message node.
Use the following Markdown format: [Click here to open the form](https://apps.powerapps.com/play/responsive-app)
This ensures a clickable link to the PowerApps UI.

3. Adjust the Embedded Content for Mobile View

Inside PowerApps, use the formula: If(App.Width < 600, "Mobile View", "Desktop View")
This dynamically adjusts content based on the screen width.

Step 3.3: Implementing Dynamic UI with Power Automate

If your chatbot needs real-time dynamic UI updates, integrate Power Automate.

1. Create a Power Automate Flow

Go to Power Automate and create a new flow.
Use the Trigger: “When a message is received in Copilot Studio”.
Add an HTTP request or Dataverse query to fetch dynamic UI content.

2. Return Adaptive Cards Based on User Context

Use Conditions in Power Automate to modify the JSON response: { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "text": "Welcome back, John!", "weight": "Bolder", "size": "Medium" } ], "actions": [ { "type": "Action.Submit", "title": "Continue" } ] }
This ensures personalized and responsive UI.

Step 4: Testing and Debugging Responsiveness

After designing the UI, testing is critical.

1. Test on Different Devices

Desktop: Resize the window in a browser.
Mobile: Open the chatbot in Microsoft Teams or a web browser.
Tablet: Use an emulator or a real device.

2. Debug Adaptive Cards

Use Adaptive Cards Designer (https://adaptivecards.io/designer/) to validate JSON.
Check the “preview” in Copilot Studio.

3. Analyze Performance

Minimize large images and unnecessary UI elements.
Reduce API calls for better mobile performance.

Step 5: Deployment and User Feedback

Once your UI is tested, deploy it:

1. Publish the Chatbot

Click Publish in Copilot Studio.
Share the bot in Microsoft Teams, Web, or Embed it in an App.

2. Gather User Feedback

Use built-in analytics to track UI performance.
Implement feedback collection cards in the bot.

Designing responsive UIs in Copilot Studio