Story
When I ask the AI to compare or sort things, I want the answer laid out as a table or cards I can scan and change, so I can decide without reading a long paragraph twice.
Lerato, a teacher in Johannesburg, comparing phone data plans on her tablet after school.
- 01 Setting
Lerato asks to compare 3 data plans. She uses about 10 GB a month.
- 02 Trigger
The answer has 3 plans and 4 facts each to weigh.
- 03 Without it
She gets 1 long paragraph and scrolls up and down to compare the prices.
- 04 With it
The answer is 1 line plus a table: 1 plan per row, the prices in 1 column.
- 05 Outcome
She switches to yearly prices with 1 tap and chooses Flex.
Live demo
This demo follows a script, so it plays the same every time - there is no real AI behind it. Change a setting to see the same moment play out differently.
What happens, step by step
| State | The person sees | The AI is | When | Screen reader |
|---|---|---|---|---|
| 1 | The ask. | Starts work. | 0 s | - |
| 2 | A grey outline in the shape of the widget (the table or cards the AI builds), so the layout does not jump later. | Builds the data. | 0.5-2 s | “Generating a response” |
| 3 | 1 line that answers, then the table or cards, with at most 2 actions. | Idle. | when done | “Response complete” |
| 4 | A switch inside the widget (Monthly / Yearly) changes the numbers. No new message. | Idle - the widget does it. | on tap | - |
| 5 | The person taps "Choose Flex". The card shows what was done. | Records the choice. | on tap | “Flex chosen” |
On each device
- phone
- A 4-column table does not fit. Show the same data as a row of cards to swipe, with the next card peeking in. Keep actions at the bottom, by the thumb, and at least 44 px tall.
- tablet
- The table fits inline (inside the chat thread). Open full screen only for big tables, maps or editing.
- desktop
- The widget sits inline in the thread. A big or long-lived widget can open side by side. The inline card then shrinks to a small chip, so the chat keeps its place.
When to use it
- The answer compares several items on the same facts - plans, flights, products, options.
- People will act on the answer at once: choose, book, confirm, sort or filter.
- The data has a natural shape - rows and columns, a list of places, a chart over time.
- The answer is 1 fact or 1 sentence. A sentence is faster to read than a card.
- The output is long writing or code that people will edit. Use Side pane and artifacts instead.
- People want to change the wording, not the data - that is a request for the chat. Use Adjust length and tone instead.
The parts of the pattern
- ALead line1 sentence that answers the question. The widget holds the detail.
- BThe widgetA table, cards or a chart, shaped by the content. No inner scroll.
- CDirect controlA switch, sort or filter that changes what is already on screen, without a new ask.
- DActionAt most 2, at the bottom. The main one names the verb and the thing.
- EThe chatStays below. Follow-ups and changes to the request still go here.
Do and Avoid
Flex covers your 10 GB for the least money.
PlanDataPer monthLite5 GBR99Flex12 GBR179Max30 GBR349Lite gives you 5 GB for R99 a month and does not roll over. Flex gives you 12 GB for R179 and rolls over for 1 month. Max gives you 30 GB for R349 and also rolls over…
Flex · 12 GB · R179
Rollover: 1 month
Choose FlexFull screen
Flex · 12 GB · R179 ▾
Rollover · Speed · Hotspot · Roaming · Contract…
Choose · Compare · Share · Save · Retry · More ▾
Writing and accessibility
- Start with 1 sentence that answers. Do not repeat the numbers that are in the widget.
- Label columns with what people compare: "Per month", not "Cost".
- Name the action with a verb and the thing: "Choose Flex", not "Submit".
- Keep inline cards to 4 or 5 facts. Put the rest in full screen.
- Use a real table with header cells, so a screen reader reads each value with its column name.
- Hide the skeleton from screen readers. Announce "Generating a response" when it appears and "Response complete" when the widget is filled.
- Every control in the widget is a real button or switch, reachable by keyboard, at least 44 px on touch.
- In a swipeable row, give each card a name like "Flex, 2 of 3", and make the row readable in order without swiping.
Seen in real products
- Gemini appWeb and apps · Nov 2025Google is rolling out generative UI as "dynamic view": the model builds a custom interactive page for the prompt. Google says it can take a minute or more.Google Research blog, 18 Nov 2025 ↗
- ChatGPT appsWeb and apps · Nov 2026Apps answer with an inline card (at most 2 actions, no inner scroll), a carousel of 3-8 items, full screen with the chat box still there, or picture-in-picture.OpenAI Apps SDK: UI guidelines ↗
- Claude (MCP Apps)Web, desktop and mobile · Nov 2026Inline cards have at most 2 actions and 4-5 data points. On mobile the next carousel card peeks in. Sorting and filtering stay in the app; follow-ups go through the chat.Claude Docs: MCP Apps design guidelines ↗
- Microsoft 365 CopilotWeb and desktop · Jun 2026Inline widgets are required; side-by-side is optional, and the inline widget then collapses into a small chip. Widgets must not copy Copilot's own prompt box, retry or reasoning.Microsoft Learn: MCP Apps UI guidelines (18 Jun 2026) ↗
Each example comes from the product’s help pages, release notes or teardowns, with the month it was checked. Products change every month - tell us when 1 is out of date.
Check yourself
Seen this pattern done better, or a product that changed? Press Suggest next to any heading, or tell us about the whole page.