Microsoft has made several advancements when it comes to using AI to build Power Apps. In this post, we will look at Generative Pages, or Gen Pages.
Gen Pages is a technology that allows users to generate Power Apps pages, and more. In the past, we have relied on the Power Apps Maker Portal UI to build Power Apps model-driven app forms, which are restricted is various ways. With Gen Pages we have the ability to create pages almost without restrictions. The design is largely up to the user.
Why Use Gen Pages?
Gen Pages offers several advantages, including:
- The pages you build are not restricted by the typical out of the box form constraints. You can make them look and feel how you like.
- Rapid development of pages you can use in Power Apps.
- You theoretically don’t need to be a developer to use Gen Pages (depending on your scenario, it might help).
How the Gen Page Development Flow Works
Before we start building, let’s look at how the different pieces fit together.
With Generative Pages, we can use AI as part of the application development process. We start by describing the page we want to build in natural language, including the requirements, functionality, and layout.
An AI coding assistant such as GitHub Copilot or Claude Code can then help us generate and refine the React code used by the Generative Page. An important point is that the generated application is still code that we can work with directly. The React project lives in our local development environment, such as Visual Studio Code, where we can inspect the source code, make changes, test the application, and continue iterating with AI.
The overall development flow looks like this:
Once the page is ready, we use the Power Platform CLI to work with our Power Platform environment and deploy the Generative Page. The page can then become part of the Power Apps experience and work with Dataverse data and other Power Platform components.
What makes this development model particularly interesting is that AI does not replace the application development lifecycle. Instead, it becomes another participant in it. We can describe what we want, let AI help generate or modify the application, inspect and test the code locally, deploy it to Power Platform, and then continue iterating.
How to Use Gen Pages
There are 2 experiences in Gen Pages:
- AI code-generation tools
- In-browser authoring
The former is recommended as it gives you a lot more control, and in this post we will look at using AI code-generation tools.
AI Code Generation Tools
The pro-code experience is very much encouraged when it comes to using Gen Pages. Even though a core feature of Gen Pages is that “anyone can use it”, having a developer build a page through the pro-code experience gives you even more control and power.
To build a page using the pro-code method, you will need:
Once this is done, run the command:
iwr https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js -OutFile install.js; node install.js; del install.js
Once you have all of this installed, connect to a Power Apps org in the pac cli. You can do this by opening a Terminal in VS Code (Terminal->New Terminal).
pac auth list will tell you which connections you currently have. Create a new connection if you don’t already have one with pac auth create –environment <envurl>.
Next, let’s create a new folder to keep our Gen Page in, and open that folder in VS Code. In my case, I have created a folder called GenPageTest:
We’re now ready to build our page. Let’s start with a simple example. Let’s say we want to build a page that displays accounts sorted by name.
Prompt:
Build a Gen Page that is a list of Contacts sorted by last name.
The AI then runs and determines how to implement this in the org. In my case, I have already created an app which lists Accounts. The AI is taking advantage of this app, and creating a Contacts page as specified. Note we can be as specific or not as we want.
Note also that when the AI is running you may need to approve requests as it runs.
Once complete, GitHub Copilot will deploy the page to your org (you don’t need to think about the pac cli commands), and you can iterate from there. We see here the AI has deployed our Contacts page!
And our React code is held locally:
We can see the page has built-in Search as well, type in a letter and it automatically filters the list:
Let’s iterate on this. Prompt:
Can you change this so instead of a view, it shows each customer in a tile.
On refreshing the page:
Once your page is built, you can continue to reiterate over the design as you like.
In our next post, we will look at how to use the Copilot CLI to create Gen Pages.
