Editing Canvas Power Apps with GitHub Copilot

IT work is rapidly becoming AI-assisted or even completely (AI) agent-driven. The same development can be seen in the Power Platform. In previous articles, I have introduced different ways to vibe-code with the Power Platform . This time, we will introduce another new way, namely how to modify an existing Canvas Power Apps using the GitHub Copilot CLI (command line interface).

Why is this interesting?

The world is full of large and small Canvas Power Apps made by creators of different levels. More of them will be made for a long time to come, and existing ones will be expanded and various bugs will be fixed. In this work, you can now utilize language models if you wish.

Installation

What all needs to be installed on the machine before starting?

• PowerShell v6 or later
• GitHub Copilot CLI (GitHub Copilot license required, starting at 0€)

Editing Canvas Apps is based on Power Platform skills, which GitHub Copilot (or Claude Code) uses to work with Power Platform.

• Installing Power Platform skills
• PAC (Power Platform CLI) is also required, but it is automatically installed with the skills.

This time we will use the Canvas Apps skill, which again uses a locally running MCP server. Therefore, also .NET 10 SDK have to be installed.

Now we can start!

Change to an existing application

Open a command line, navigate to the working folder (where Copilot, for example, retrieves the Canvas Apps code) and start Copilot.

GitHub Copilot looks like this on the command line.

Let’s open the Canvas App that we want to make changes to. The app has one screen that lists accounts from Dataverse.

The Canvas Power Apps skill utilizes the MCP server, which in turn uses the Canvas app’s coauthoring feature, so it must be turned on.

The actual work is a discussion with GitHub Copilot. There are many different ways to get to the finish line. This is how I started.

I like to edit existing Canvas app (https://make.powerapps.com/e/x13d4bb5-1101-e001-9088-a60dca1 
3f00a/canvas/?action=edit&app-id=%2Fproviders%2FMicrosoft.PowerApps%2Fapps%2Fad8a1575-9056-4542-bef0-468d4bc9124x)

The address I provided is the address of the Canvas Apps that is being modified when it is open in the editor. Please note that the application must be open in the browser (editor) during the work.

GitHub Copilot will first think about how it would perform the given task. During the process, it will ask you at least

• allows reading and editing various configuration files
• help with starting the MCP server
• log in (with the ID that gives access to the application you are editing)

You will probably also need to restart the command line at some point.

Changes can be made as long as GitHub Copilot can read the Canvas Apps code files (yaml).

Files are uploaded to the workstation and Copilot always edits them there first.

Let’s start with the easy one.

Could you make the screen header font bigger and bolder?

Copilot verifies whether the change made to the local yaml file is correct. If you are not familiar with the yaml format and Canvas Power Apps, this may be difficult to understand.

And look, the title has been updated!

A more complex change

After the warm-up, we move on to a slightly more complex change. The application only has one screen that shows customers. We ask the copilot to add a second screen where the name of the selected customer can be edited.

Could you add a new screen for editing account information? For now, only account name can be edited. So user should 
be able to select account (edit button on gallery showing accounts) and then navigate to he edit screen. In the edit 
screen there should be save and back buttons.

Copilot’s plans show that it isn’t super experienced with Canvas applications.

But it creates a working solution on the first try. I would have done this a little differently myself, but this works.

Looking ahead, it will be easier if the customer data editing is implemented using a form control. Let’s ask the copilot to make this change. This time I want to see the implementation plan first.

Can you change the edit screen so that it uses form control and submitform function instead of custom form and patch 
function? Make the first plan for changes and do all the changes after I have reviewed the plan.

The plan seems reasonable and I give the copilot permission to make the changes.

The end result is almost successful. No fields have been added to the form.

It turns out that handling form controls is not a simple task for copilot.

Let’s fix the form manually and try something else next.

Renaming controls

In the hustle and bustle of work, it can be easy to forget to name your controls wisely. How does Copilot handle this?

Copilot is asked to name all screens, controls, and variables in the application using the naming convention introduced by Microsoft ( https://learn.microsoft.com/en-us/power-apps/guidance/coding-guidelines/code-readability).

Could you rename all screens, controls and variables using this naming convention: https://learn 
.microsoft.com/en-us/power-apps/guidance/coding-guidelines/code-readability

One can only be satisfied with the end result.

Taking over an unknown application

Next, I’ll open an app I made years ago. I have no idea how it was implemented. Could Copilot help with this?

Let’s ask Copilot to first document the application.

Write technical documentation for this app. Describe what it does and how it is implemented.

A good start. Copilot writes an md file that describes at a high level what the application does and how it is implemented.

Next, let’s ask Copilot to examine the code more closely. Are there any errors?

Check for any bugs, user flows that lead to errors, situations that put the app into an invalid state, 
or flows where required code is not executed. Document all observations in a file named bugs.md.

Copilot found 200 lines of potential bugs. Impressive and a bit depressing at the same time. After all, this is my own work.

A quick browse reveals that these are not (all) bugs. But it’s an excellent list to go through.

Next, let’s ask Copilot to comment on the code.

Can you add the necessary comments to the app? 
If there are already comments (or commented-out code), do not remove them under any circumstances. 
For existing comments, please add a remark stating that this is an original comment by the original author. 
Do not change anything else. 
Do not update the code or add new code.

Now we have rough documentation of the application, a list of possible bugs, and all the code properly commented. Not a bad starting point to start making changes (by ourselves or with Copilot) to this application that was made 5 years ago.

How does this work roughly?

Sometimes living with GitHub Copilot isn’t completely smooth sailing. It’s amazingly good at self-correcting, but sometimes it helps to understand at least at a high level what’s going on. So.

• Canvas Apps are handled using Canvas Apps skills. Sometimes this is forgotten and Copilot tries to push its changes to the environment using PAC, for example.
• The Canvas Apps you want to edit must be open and coauthoring enabled. Copilot will communicate with the app on the MCP server on your workstation, which will utilize the coauthoring capabilities.
• Sometimes the MCP server is not running or is stuck in the wrong application.
• Initially, Copilot retrieves the application codes to your workstation (canvas-edit-planner agent)
• All edits are made to these local files.
• Changes are validated using the compile_canvas tool on the MCP server
• Finally, the changes are exported back to the application using the sync_canvas tool on the MCP server.

Summary

Power Platform skills and GitHub Copilot CLI are a great addition to a Power Platform consultant’s toolkit. I wouldn’t start building a new Canvas app with these. If I could start from scratch and develop with AI, I would start directly with Code Apps.

This is an excellent helper for managing old applications.

• Please write documentation for this application. I want the documentation to include at least these sections.
• Change old brand color x to new color y everywhere
• etc

The same applies to work as to all agent development. If you don’t understand anything about the object of work (the Canvas application), you will probably quickly create a lot of mess. On the other hand, if you understand what the agent is doing and can occasionally guide it in the right direction, this tireless helper will speed up your work significantly.

This can’t do everything (yet). I noticed that the custom components are too much for Copilot. Too bad, because I use them myself very often. Also, manipulating the form control doesn’t work very well yet.

This may not work in all environments yet. The Canvas editor authoring version must be at least 3.26034.

Regardless, it’s definitely worth a try!