In a previous post we looked at creating Gen Pages using VS Code. In this post, we will look at how to do this using the Copilot CLI.
How the Copilot CLI Gen Page Flow Works
Before we run Copilot CLI, let’s look at what is happening at a high level.
With Copilot CLI, we can start with an idea for a page and use the /genpage command to create the initial Generative Page project.
We begin by describing what we want to build, including the page requirements, functionality, and the data we want to work with. Copilot CLI then uses AI to generate the initial project and supporting files.
The overall flow looks like this:
The result is a React-based Generative Page project that we can open locally and work with directly. We can review the generated code, change the user interface, configure data connections, test the page, and continue refining it.
Once we are happy with the page, we can deploy it to our Power Apps environment, where it can work with Dataverse and become part of the broader Power Platform solution.
This is an interesting development model because the AI helps us get from an idea to a working application structure very quickly, while we still retain access to the underlying code and can continue developing it using familiar pro-code tools.
Running Genpage
From here, let’s run /genpage and see how the process works.
First, install and configure the Copilot CLI.
Once complete, run copilot to start the CLI and log into GitHub with login:
copilot
To use gen pages, we’re going to run the command:
/genpage
Our AI comes back with:
And we’re now prompted to create a new page or edit an existing one:
My prompt:
List all leads in the system. Make the background of the list light blue. The lead fields to display should be: First Name, Last Name, Topic, Created Date. Sort by Created Date.
We can see here the page was deployed successfully, and it is now prompting us to verify in a browser using Playwright:
Once complete, we see a new app has been created:
And a page has been created to our specifications:
We can see the code is located in genpage folder that was created:
And we can see the Plan used by the Planner to create the page:
Once again, we can continue to iterate over our page and improve it through feedback loops.
