Build Interactive Copilot Widgets with Power Apps

Imagine asking your Copilot agent “Show me the dog walking schedule for Chicago next week” and instead of a plain text list, you get a visual calendar widget that shows each sitter’s assignments at a glance. That’s the power of custom UI widgets in Power Apps. You can create rich, interactive components that render directly inside the Copilot conversation window, pulling data from Dataverse.

In this guide, you’ll learn how to build a Copilot agent backed by a model‑driven app, define a custom tool that returns structured data, and generate a UI widget that turns that data into a visual calendar. While the example uses a pet care scheduling scenario, the same pattern works for any data model.

A Pet Care Scheduling Agent

Your company, Fluffy’s Friends, needs a way for managers to quickly view the next week’s schedule for pet sitters across cities. The agent should respond with an interactive calendar that shows each sitter, their assignments, and the dates.

You’ll use three Dataverse tables:

• Pet Sitters — sitter name, specialty, and contact info
• Pet Owners — owner name, address, and phone
• Pet Care Assignments — links a sitter to an owner for a specific job with start and end dates

Pet Sitters table

Pet Owners table

Pet Care Assignments table

Populate the tables with a handful of records so you have realistic data to test with later.

Create a Model‑Driven App

In Power Apps, create a new model‑driven app called Pet Care Management. Add the three tables you just created and make sure their main views and forms appear in the app navigation.

Set Up the MCP Server

Open your app in the modern designer. Go to the MCP menu (sometimes labelled Manage Connected Experiences / MCP) and click Set up MCP server. After a few moments you’ll see a list of built‑in tools and an option to Create custom tool.

Create a Custom Tool for Schedule Data

Click Create custom tool and fill in:

• Name: Get Weekly Schedule
• Description: “Retrieves pet care assignments for the upcoming week, grouped by sitter, for a given city. Use this when the user asks about the schedule.”

The description is critical — it helps the Copilot orchestrator decide when to invoke this tool.

Instructions — provide a natural language prompt and sample data that the model will use to generate the JSON output.

Get all Pet Care Assignment records between {StartDate} and {EndDate} for sitters in {City}.

Return a JSON object with an array of sitters, each containing:
- name (from Pet Sitter.Name)
- specialty (from Pet Sitter.Specialty)
- assignments: an array of objects with:
  - ownerName (from Pet Owner.Name)
  - startDate
  - endDate
  - jobType (from Pet Care Assignment.Name)

Rules:
- Use camelCase for all property names.
- Dates in yyyy-mm-dd format, no time.

Sample output:
{
"sitters": [
  {
    "name": "Maria Gomez",
    "specialty": "Dog Walking",
    "assignments": [
      {
        "ownerName": "John Smith",
        "startDate": "2026-06-08",
        "endDate": "2026-06-10",
        "jobType": "Daily walks"
      }
    ]
  }
]
}

Under Settings choose:

• Model: GPT‑5 Chat (or the latest available)
• Record Retrieval: 1000 records

Test the tool and verify the JSON structure matches what you intend to feed the widget generator.

Generate the UI Widget Locally

Currently, Power Apps cannot produce the widget code in‑browser. You need to use a coding agent on your local machine with the Power Platform Skills plugin for GitHub Copilot CLI.

Open VS Code, start a terminal, and launch GitHub Copilot CLI. Install the plugin:

/plugin install mcp-apps@power-platform-skills

After the plugin is installed successfully, call the skill that generates the UI widget:

/mcp-apps:generate-mcp-app-ui Visualize the weekly schedule as a calendar: each row is a pet sitter, each column a weekday (Mon–Fri). For each assignment, show a colored block spanning start to end dates, with the owner name and job type inside the block. Include the sitter’s name and specialty on the row header.

Here is an example of the tool output:
{
"sitters": [
  {
    "name": "Maria Gomez",
    "specialty": "Dog Walking",
    "assignments": [
      {
        "ownerName": "John Smith",
        "startDate": "2026-06-08",
        "endDate": "2026-06-10",
        "jobType": "Daily walks"
      }
    ]
  }
]
}

The agent will create an HTML file (commonly named ui.html) that contains the widget definition.

Open the URL shown in your terminal. The widget should render with the sample data you provided. Tweak the HTML, CSS, or JavaScript directly and refresh to iterate quickly.

Deploy the Widget to Power Apps

Back in the MCP settings for your custom tool, you’ll see a text box labelled Widget code. Copy the entire contents of your ui.html file and paste it there. Save the tool.

Now the widget is linked to the custom tool. When Copilot calls this tool and receives data that matches the widget’s expected schema, the widget will render inside the chat.

Test in Copilot

Publish the model‑driven app and open a Copilot client (for example, in Teams or the Copilot Studio web interface). Ask:

“Show me the weekly schedule for dog walkers in Chicago.”

You should see the calendar widget appear with your live data.

Security and Performance Considerations

• Data limit: The tool’s record retrieval caps at 1000 records. Always include filters so the result set stays under this limit.
• Widget content: The HTML code is stored in Dataverse. It cannot call external APIs unless you inline the data. All data must come from the tool’s JSON response.
• User context: The widget runs under the signed‑in user’s identity. Ensure your Dataverse security roles grant appropriate access to the underlying tables.
• Tool descriptions: Write clear, unambiguous descriptions. Vague wording can cause the orchestrator to skip the tool or call the wrong one.

Common Mistakes and Troubleshooting

Recommendation

This pattern opens up a wide range of possibilities — from calendars to charts to interactive forms. Keep your sample data realistic and your tool description precise. The upfront effort of building a widget pays back many times by dramatically improving the Copilot experience.

References

• Original tutorial: How To Create Copilot Custom UI Widgets In Power Apps by Matthew Devaney
• Microsoft Learn – Power Platform MCP connector overview (placeholder)
• Microsoft Learn – Generate MCP app UI widgets (placeholder)