Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
[This article is prerelease documentation and is subject to change.]
Use natural language to build a generative page that's created using AI. Generative pages are an AI-driven experience designed to simplify, accelerate, and improve your app design process in model-driven apps. By interacting with the app agent, you create fully functional pages in your model-driven apps by describing what you need in natural language and specifying which Microsoft Dataverse tables to reference. You can even attach an image of what you’d like the page to look like.
After you describe the page, the system then processes your requirements and specifications and intelligently generates React code that covers both the front-end user experience by selecting the right components and determining the best layout, and the corresponding business logic. Through an interactive, conversational experience, you can refine the page design in real time, adjusting elements, layout, and functionality to perfectly match your vision.
Important
- This is a preview feature.
- Preview features aren’t meant for production use and might have restricted functionality. These features are subject to supplemental terms of use, and are available before an official release so that customers can get early access and provide feedback.
Prerequisites
- The Power Platform environment must be located in the US region.
- The Enable new AI-powered Copilot features for people who make apps environment setting must be enabled. More information: Copilot environment setting
- This feature is being gradually rolled out across regions and might not be available yet in your region.
Create a generative page in model-driven apps
Sign in to Power Apps.
Open a model-driven app for editing.
In the app designer, select Add a page > Describe a page.
A full-page generative page experience opens.
In the textbox, type a description of the type of page you want to create. The description should include functional requirements and optionally any UX specifications. For example, you could enter Build a page showing Account records as a gallery of cards using a modern look and feel. Include name, entityimage on the top, and website, email, phone number. Make the gallery scrollable by using data from the Account table.
Add tables and images as appropriate by selecting Add data > Add table. You can link up to six Dataverse tables. In the screenshot, the account table is added.
Optionally upload an image to guide the UI of your generated page by selecting Add data > Attach image. This can be a rough napkin sketch or a higher resolution image.
Optionally choose the AI model you want to use to generate the page.
When you're finished describing the page, select Generate page.
When the agent finishes building your page, the user experience is displayed. If the user experience isn't already displayed, you can view it by selecting Preview.
View the generated code, iterate, and publish
Select Code to view the code generated by the app agent.
Refine the output to fix errors, adjust layout, or add more functionality by iteratively chatting with the app agent or by manually editing the code. To manually edit, select Edit on the Code tab. Once editing is complete, select Save to commit your changes as a new iteration, or Cancel to discard them.
Note
After completing two or more iterations with the agent, you can select Compare on the Code tab to view a code diff between the current and previous iteration to view what changed in the code. This feature is currently only available starting with the second iteration in the current session.
Select Save to make sure you don't lose your generated page. When you're satisfied with the generated page, select Save and Publish to publish all pending changes for the app, including any added generative pages.
Important
While the agent makes a best-effort attempt to generate complete, production-ready code, including considerations for accessibility and security best practices, you're ultimately responsible for validating the code. Ensure the generated code meets your organization’s standards and compliance requirements.
Limitations
These are the current limitations of generative pages:
- Your page can connect to only Dataverse tables (up to 6 for a single page). You can perform create, read, update, and delete (CRUD) operations against these tables. No other data sources can be used.
- Virtual tables aren't supported.
- Generated pages can't be exported and imported in other Power Platform with Dataverse environments.
- Only US English is supported.
- Collaboration isn't supported. Ensure only one maker is working on a generative page at a time to avoid unintended conflicts.
- When returning to a page, you can only access the first prompt + 5 most recent iterations.
- Only these data types are supported:
- Choice
- Currency
- Customer
- Date and Time
- Date Only
- Decimal Number
- Floating Point Number
- Image
- Lookup
- Multiline Text
- Status
- Status Reason
- Text
- Whole Number
- Yes/No
- Unique Identifier
Frequently asked questions
Can I start designing my app in Plan Designer and then use generative pages?
Yes, while there's currently no direct integration between Plan designer and generative pages, you can use Plan designer to define your tables and apps, and then switch to the app designer to create any desired generative pages.
Are there any additional fees or credits needed to use generative pages?
No, the maker experience for generative pages (and plan designer) don't require any additional AI or message credits.
What kind of images work best for guiding the UI generation?
Clear sketches or wireframes—whether hand-drawn or digital—are most effective, though whiteboard or napkin drawings can also be used.
Can I use generative pages with canvas apps or other app types?
No, generative pages are currently only supported in model-driven apps.
Is there a way to reuse or clone a generative page across environments?
Currently, you can't move generated pages between environments.
Can I edit the generated code manually?
Yes. You can manually edit the generated code by selecting Edit on the Code tab. Your changes are saved as a new iteration. Select Cancel to cancel your edits if you choose not to keep them.
Is the code generated by generative pages guaranteed to be production-ready and compliant with my organization’s standards?
No. While the agent makes a best-effort attempt to produce high-quality, production-ready code with accessibility and security best practices in mind, it's your responsibility to validate the output. Always review the generated code to ensure it aligns with your organization’s standards, policies, and compliance requirements.
How do I give feedback on the feature?
The best way to give feedback on generative pages is to use the thumbs up/down buttons in the chat experience that are available after each iteration. We also strongly encourage you to select Yes on Share relevant content samples and additional log files so that we can debug or attempt to recreate any issues you encountered with the feature.
What if I don't see generative pages enabled in my environment?
Here are the conditions to check to make sure the feature is available in your environment:
- Confirm your environment is in the US region.
- Confirm that Copilot is enabled for your tenant.
- Power Platform admins should check that the Enable new AI-powered Copilot features for people who make apps environment setting is enabled. This setting can be found in the Power Platform admin center under environment > Settings > Features.