What “generative pages” actually means
Normally, building a page in a model-driven app means manually configuring layout, picking a form or view, and wiring up controls one at a time. Generative pages skip that step: you describe the page you want in plain language, and an AI agent writes the underlying React code in real time, rendering a live preview as it goes.
You’re still working inside the standard model-driven app designer — this is just a new way to add a page, alongside the usual “table, form, view” options.
At a glance:
- You describe the data, layout, and behavior you want in a conversational prompt.
- The agent generates real React code, not just a mockup.
- You can attach a sketch or wireframe image to guide the layout.
- You keep iterating conversationally, or drop into the code editor and hand-edit.
- The finished page is solution-aware, so it packages and moves between environments like any other component.
Important caveats before you start
Two things are worth internalizing before you build anything real with this feature:
You’re responsible for the output. Microsoft does not guarantee that AI-generated code is production-ready out of the box. Treat “publish immediately” as the wrong instinct — always review generated code against your organization’s security and compliance requirements before shipping it.
Regional availability is limited. The maker experience for generative pages is currently limited to environments located in the US, UK, Australia, and Singapore. Makers elsewhere can still use general AI code-generation tools, but not this specific in-product experience. Check current availability before planning a rollout around it.
Build one, step by step
We’ll build this using a running scenario: Contoso IT wants an “Equipment Loan Tracker” — staff check out laptops, monitors, and phones; a manager approves requests and tracks returns.
Generative pages still read from real Dataverse tables — the AI generates UI, not data — so you need a table to point it at. If you don’t have one yet, create a custom Equipment table with this schema (a similarly-shaped table works too; the important part is having a Choice column like Status to demonstrate conditional styling below):
| Column | Type | Notes |
|---|---|---|
| Equipment Name | Text | Primary column |
| Category | Choice | Options: Laptop / Monitor / Phone / Other |
| Serial Number | Text | |
| Status | Choice | Options: Available / Checked Out / In Repair |
| Assigned To | Lookup → User table | Your first relationship on this table |
| Checkout Date | Date only | |
| Return Due Date | Date only |
With the table in place:
- Pages → + New → Generative page. In the app designer, go to Pages, select + New, and choose Generative page.
-
Type a specific description of the data, layout, and behavior you want. For our tracker, use:
“Build a page showing Equipment records as a gallery of cards, showing Equipment Name, Category, Status, and Assigned To. Highlight cards where Status is Checked Out.”
- Link your data. Use Add data → Add table and select the Equipment table (you can link up to 6 Dataverse tables total) — the agent needs it linked to know what fields exist. You can also use Add data → Attach image to upload a sketch or wireframe if you want to guide the layout visually.
- Select Generate page. The agent writes real React code and renders a Preview. For our example, you should see a card-based gallery with the four requested fields, and visually distinct styling on any record where Status is “Checked Out.”
- Refine conversationally. Ask the agent to adjust it — for example, “make the checked-out cards red” — and watch the page update. Alternatively, switch to the Code tab and edit the generated React directly if you need precision the chat can’t give you.
- Save and Publish once you’re happy with the result.
Because it’s a real generative page, that conditional styling comes from actual generated code — open the Code tab afterward and you can see the logic the agent wrote to apply it.
Iterating further
Beyond the refine step above, you have two more tools for working with a generated page over time:
- Compare — after two or more iterations, see a diff between versions to track what changed.
- Accessibility assistant — automatically scans each generation for accessibility issues and offers an Auto fix.
Generative pages are also solution-aware — they package into a solution and move between environments exactly like a hand-built page, form, or view. That makes them viable for real ALM (application lifecycle management) workflows, not just prototyping: you can use natural language to get to a working first draft fast, then treat code review and accessibility checks as a normal part of your release process.
Key takeaways
- Generative pages turn a plain-language description into real, editable React code with a live preview — not a static mockup.
- You can ground the generation in real data (up to 6 linked Dataverse tables) or a visual reference (an uploaded sketch/wireframe).
- Iteration happens either conversationally or by hand-editing code, with diff comparison after multiple rounds.
- Always review AI-generated code for security and compliance before publishing — this is explicitly called out as a shared responsibility, not something Microsoft guarantees for you.
- Availability is currently regional (US, UK, Australia, Singapore) — verify current coverage before planning a rollout around it.