Generative pages in model-driven apps: a practical guide

A chat bubble turning, through a stream of code blocks, into an app page made of cards, lists and charts.

Generative pages let you describe a page of a model-driven app in plain language and get a working React page back, wired to your Dataverse data. This article explains where the feature stands in November 2026, the two ways to build a page, what the generated code looks like, how to plug a page into an app, and the limits you should know before you promise one to a customer.

What a generative page is

A generative page is a page of a model-driven app whose code is written by an AI agent from your description. You say what you need, point the agent at the Dataverse tables, connectors or custom APIs it may use, optionally attach a sketch or a screenshot, and the agent produces the page: layout, components and the business logic behind them.

The output is real code, not a configuration. Microsoft's documentation describes it as a React page written in TypeScript, which reads and writes data through a dataApi object provided by the host. You can keep refining the page by chatting with the agent, or open the code and edit it yourself.

This matters for the way we build model-driven apps. Until now, a screen that did not fit a form, a view or a dashboard meant a custom page (a canvas app embedded in the app), a PCF control or an HTML web resource. Generative pages add a fourth option, where the first version of the page costs a prompt instead of a sprint.

Where it stands in November 2026

The feature arrived in stages, and some parts are still in preview. Here is the status as of November 2026, with the source of each line.

Capability	Status
Generative pages in the Power Apps maker portal	Generally available in the U.S. since November 5, 2025, after about four months of public preview. The maker experience now requires an environment in the United States, Great Britain, Australia or Singapore.
Building pages with external AI coding tools (GitHub Copilot CLI, Claude Code…)	Generally available in all public clouds worldwide since April 2026.
Context input (`recordId`, `entityName`, `data`) and launch from a command bar button, a grid row or a sub-grid	Announced as available in the May 2026 feature update.
Embedding a page in a form section or tab, opening it in a side pane	Documented on Microsoft Learn (September 2026) and in the client API examples (October 2026).
Power Platform connectors, Dataverse custom APIs, Application Insights telemetry	Preview. Microsoft states that these previews "aren't meant for production use".

One point is inconsistent between sources. The November 2025 announcement says generative pages are powered by GPT-5, while the current Learn page says that GPT-4.1 "is currently the only available model" in the maker portal. Microsoft's own advice is the same in both cases: if you want the newest models, use the external tools route described below, where the model is the one your coding tool provides.

On cost, the FAQ states that the maker experience does not consume additional AI or message credits.

Two ways to build a page

Both routes produce the same kind of page. The difference is where you work and which model writes the code.

In the browser. From make.powerapps.com, you add a generative page to a model-driven app and describe it in a chat panel. This is the quickest way to try the feature, but it is limited to the four regions above and to prompts in U.S. English.

With an AI coding tool. Microsoft now recommends this route. You work locally with GitHub Copilot CLI, Claude Code or another assistant, and a Power Platform plugin teaches it how to write and deploy generative pages. Its advantages are concrete:

it works in every public cloud region;
you get the latest models of your tool rather than the one built into the portal;
one request can produce several pages, create the Dataverse tables they need with sample data, and place everything in the right app and solution;
you work on TypeScript files in your own editor, with npm install and IntelliSense.

The prerequisites are Node.js 18 or later, the latest Power Platform CLI with an authenticated session on the target environment, and your coding tool. In Claude Code or GitHub Copilot CLI, the generative page plugin is installed with two commands:

/plugin marketplace add microsoft/power-platform-skills
/plugin install model-apps@power-platform-skills

You then run /genpage, or simply describe the page you want. A planner agent proposes a plan (pages, tables, data sources, target app and solution), you adjust it, and specialised agents generate the code and deploy it with PAC CLI. The plugin can also run generated Playwright tests against the deployed page before you open it yourself.

Building a page in the browser

The maker portal flow is short:

Open a model-driven app in the app designer and select Add page > Generative page > Describe a page.
Describe the page: the data, what the user does with it, and any layout requirement.
Select Add data to link up to six Dataverse tables, and optionally a prepared connection reference (preview) or custom API (preview).
Optionally attach an image: a wireframe, a napkin sketch or a screenshot of a page you like.
Select Generate page, then iterate in the chat or edit the code directly.

You can watch the agent work: it first writes out how it understood your request and its plan, then generates the code, transpiles it and renders the result. After each iteration, an Accessibility assistant scans the code and can pass the issues it finds back to the agent with Auto fix. When the page is right, Save and Publish publishes it with the rest of the app.

A useful habit is to write the prompt like a short functional specification. For example:

Build a page that lists open opportunities from the Opportunity table as cards,
grouped by sales stage. Show the name, the account, the estimated revenue and the
estimated close date on each card. Add a filter on the owner and sort each group
by estimated close date. Use the theme of the app.

Be explicit about the tables, the columns and the behaviour you expect. The vaguer the request, the more the agent decides for you.

What the generated code looks like

All data access goes through the dataApi object. Its Dataverse table methods are createRow, retrieveRow, updateRow, deleteRow, queryTable and getChoices. Other groups cover connectors, custom APIs (executeAction, executeFunction) and the page itself (setPageOutput).

Reading data looks like this. queryTable takes the logical name of the table and an options object with select, filter (OData), orderBy and pageSize, and returns the rows with a way to load the next page:

const result = await dataApi.queryTable("opportunity", {
  select: ["opportunityid", "name", "estimatedvalue", "estimatedclosedate"],
  filter: "statecode eq 0",
  orderBy: "estimatedclosedate asc",
  pageSize: 50,
});

let rows = result.rows;
if (result.hasMoreRows && result.loadMoreRows) {
  const next = await result.loadMoreRows();
  rows = rows.concat(next.rows);
}

Two recommendations from the reference are worth keeping in mind when you review generated code:

Always limit the columns with select. It is the first thing to check for performance.
Check that optional methods exist before calling them. Connector and custom API methods are optional members of the contract and some hosts do not implement them, so the documentation recommends a test such as if (dataApi.executeAction) { … } and explicit error handling.

The custom API support (preview) is the cleanest way to keep business rules on the server: the page calls a named operation, such as approving an order, and a plug-in does the work. Plug-ins that run on create, update or delete still fire when the page writes data; you only add a custom API when the page must trigger an operation explicitly. Note that custom APIs using the EntityCollection binding type or Entity parameters are not supported.

Plugging a page into the app

A page that only lives in the sitemap is of limited use. Generative pages can now receive context through three input parameters, recordId, entityName and data. You ask for them in the prompt ("set up the page to accept an account recordId…") and the agent writes the initialisation code; inside the page, the values are read from pageInput.

From there, you have several ways to open a page:

In a form. In the form designer, Components > Display > Generative page embeds a published page in a section or a tab, and the form passes the current record as recordId.
From script, with Xrm.Navigation.navigateTo and the page type generative, inline (target: 1) or as a dialog (target: 2):

Xrm.Navigation.navigateTo(
  {
    pageType: "generative",
    pageId: "00000000-0000-0000-0000-000000000000",
    entityName: "account",
    recordId: "00000000-0000-0000-0000-000000000001",
  },
  {
    target: 2,
    position: 1,
    width: { value: 70, unit: "%" },
    height: { value: 80, unit: "%" },
    title: "Account summary",
  },
).then((result) => {
  // result.returnValue holds the value the page set with dataApi.setPageOutput
});

In a side pane, with Xrm.App.sidePanes.createPane() followed by pane.navigate(...) with the same page input.

The page ID is the GUID shown in the Generative page field of the page properties in the app designer. The client API examples cover dialogs that return a value to a form script, which makes a generative page a reasonable replacement for many "select something, then fill the form" dialogs that used to need a custom page.

ALM and governance

Generative pages are solution-aware. You add the model-driven app to a solution, and the pages come with it as dependencies of the sitemap: they appear as UX Agent Project rows. A few details will save you time:

Only the first prompt and the published code travel with the solution. The full conversation with the agent stays in the source environment, so keep your prompts and decisions somewhere else if they matter.
Pages created during the preview must be opened once in the app designer to be migrated to the solution-aware model; until then, they are not picked up during export.
No collaboration. Only one maker should work on a page at a time.
You own the code. Microsoft is clear that the agent makes "a best-effort attempt" at production-ready code, and that validating accessibility, security and compliance is your responsibility. Treat a generated page like code written by a new team member: review it before it ships.

If you go the external tools route, you also get the generated TypeScript as local files, which makes it easy to put the pages under source control and review them like the rest of your code.

Limits to plan for

As of November 2026, the documented limits are:

up to six Dataverse tables per page;
data sources limited to Dataverse tables and, in preview, Power Platform connectors;
prompts of 50,000 characters at most, and only in U.S. English in the maker portal;
supported column types: choice, currency, customer, date and time, date only, decimal, floating point, image, lookup, multiline text, status, status reason, text, whole number, yes/no and unique identifier. File columns are not in the list;
only model-driven apps: generative pages are not available for canvas apps;
the sitemap entry of a page is not localised automatically, even when the page itself supports several languages.

Key takeaways

Generative pages are generally available, and the recommended way to build them is now an AI coding tool with Microsoft's Power Platform plugin, which works in every public cloud region.
The result is a React and TypeScript page that talks to Dataverse through dataApi: review it as you would any code, starting with column selection and error handling.
With context input, form embedding, dialogs and side panes, a generative page can now replace many custom pages and HTML web resources inside a model-driven app.
Connectors, custom APIs and telemetry are still in preview: use them to prototype, not yet for a production commitment.

Researched and drafted with AI assistance, then reviewed, edited and published by a human.

Sources

Generate a page using natural language with model-driven apps in Power Appslearn.microsoft.com
Create and edit generative pages with AI code generation toolslearn.microsoft.com
Dataverse table methods for generative pageslearn.microsoft.com
Navigate to and from a generative page using client APIlearn.microsoft.com
Generative pages in Power Apps is now generally availablemicrosoft.com
What's new in Power Platform: April 2026 feature updatemicrosoft.com
What's new in Power Platform: May 2026 feature updatemicrosoft.com