Building Generative Pages in Power Platform

Artificial Intelligence is now embedded across the Power Platform, and Generative Pages are among its most significant innovations. Instead of manually arranging controls, configuring forms, linking views, or writing Power Fx expressions, creators can now describe their requirements in plain language. Power Apps then converts those instructions into a complete, responsive, and data-enabled page.

This article explains how to build Generative Pages step by step, explores the technology behind them, shares practical prompt-writing tips, and compares them with conventional page designs.

Understanding Generative Pages

Generative Pages offer an AI-powered way to design pages in model-driven apps. Using natural language, makers can request complete layouts that automatically connect to Dataverse tables. An intelligent agent analyses the request and selects suitable React-based components and logic to match the intended purpose.

For example, you might write:

“Design a card gallery that displays account names, images, email addresses, websites, and phone numbers.”

Based on this input, the system produces the structure, visual layout, and functional logic, optimized for performance and usability.

Main Features

• Page creation using conversational language
• Native integration with Dataverse, supporting create, read, update, and delete actions (up to six tables per page)
• Automatically generated React code visible in the designer
• Support for uploading wireframes, screenshots, or sketches
• Interactive refinement through ongoing conversations with Copilot.

Requirements for Getting Started

Before using Generative Pages, make sure the following conditions are met:

1. Your Power Platform environment is hosted in the US region.
2. Copilot and AI features are enabled in environment settings.
3. You are working within a model-driven app (canvas apps are not supported yet).

Creating a Generative Page: Step-by-Step Guide

Step 1: Open the App Designer

Visit make.powerapps.com, sign in, and open your model-driven app in edit mode.

Step 2: Start a New Generative Page

In the designer, choose:

Add a page → Describe a page

This launches the AI-driven page creation interface.

Step 3: Write Your Prompt

Describe the goal, layout, and functionality of the page.

Example:

“Create a responsive page with a three-column card layout showing account records. Include name, image, website, email, and phone. Add search and filtering options. Optimize for mobile devices.”

Clear and detailed prompts lead to better results.

Step 4: Connect Dataverse Tables

Select Add data → Add table and choose up to six tables, such as Account, Contact, or Opportunity.

Step 5: Upload a Design Reference (Optional)

Attach a wireframe or mock-up to help guide the layout. Even simple sketches improve visual accuracy.

Step 6: Generate and Improve

After generation, Power Apps displays the page and its underlying React structure.

You can refine it with requests such as:

• “Increase card size”
• “Add a status badge”
• “Enable dark mode”
• “Sort by last activity date”

All updates are handled through conversational prompts.

Step 7: Publish the Page

Each Generative Page must be published separately. Publishing the app alone does not activate newly generated pages.

Writing Better Prompts: Practical Tips

To get the best outcomes, follow these guidelines:

1. Start With Data Details

Mention tables, columns, relationships, and filters.

Example:
“Display active accounts only and sort by last modified date.”

2. Be Specific About Layout

Describe how elements should appear across devices.

Example:
“Use a three-column grid on desktop and a single column on mobile.”

3. Use Visual References

Upload sketches or screenshots to clarify expectations.

4. Make Small, Gradual Changes

Request improvements in stages instead of all at once.

Example:
“Add a search box that filters by account name.”

5. Plan for Application Lifecycle Management

Include Generative Pages in solutions when moving between environments.

Known Limitations

Although powerful, Generative Pages currently have some known limitations:

• Limited to Dataverse data sources (external connectors are only available through virtual tables)
• Availability restricted to US regions during early rollout
• Individual publishing is required
• Direct editing of generated React code is not supported

Generative Pages vs. Traditional Pages

When to Use Each Approach

Choose Generative Pages If You Need:

• Rapid interface development
• Modern designs with minimal effort
• Dataverse-centred applications
• Quick creation of dashboards, lists, and task views

Choose Standard Pages If You Need:

• Advanced customization
• Access to non-Dataverse data
• Stable and predictable ALM processes
• Detailed control over rules, forms, and formulas

Conclusion

Generative Pages significantly reduce the time required to design user interfaces in model-driven apps. Tasks that once took hours can now be completed in minutes. While they do not replace traditional pages, they provide a powerful starting point that allows developers to focus more on optimization and user experience.

With AI-generated React components, built-in Dataverse intelligence, and conversational customization, Generative Pages are emerging as one of the fastest ways to create polished applications in Power Apps. As the technology matures, broader regional availability and deeper platform integration are expected.

References:

• Generate a page using natural language with model-driven apps in Power Apps - Power Apps | Microsoft Learn
• Power Apps Developer Plan | Microsoft Power Platform