FitWhen to use it — and when not
Use it when
- Comparisons, lists of entities, options with attributes
- Answers the user will act on (book, buy, assign, open)
- Data that already has a home in your product (tickets, contacts, products)
Skip it when
- Nuanced reasoning or advice — prose carries caveats better
- One-off answers where a card adds chrome without meaning
AnatomyThe parts of the pattern
- Summary lineOne sentence that frames the cards.
- CardsSame fields in the same order on every card.
- HighlightA clear recommendation, with the reason.
- ActionsButtons that do the next real thing in your product.
GuidelinesDo & don’t
Do
- Define a schema per answer type and render it with your own components.
- Keep a one-line text summary above the cards for context and accessibility.
- Make every card action real — deep-link into your product.
Don’t
- Let the model invent the layout with raw HTML.
- Mix units or field order between cards.
- Hide the reasoning behind "Recommended" — say why.
In the wildReal-world examples
PerplexityChatGPT searchGoogle AI OverviewsClaude artifacts
Products named for reference only — no affiliation, and the demo above is an original illustration, not a copy of their UI.
For engineersImplementation notes
- Use the provider's structured-output / JSON-schema mode and validate with the same schema (zod, pydantic) before rendering.
- Stream partial JSON and render cards as each object completes.
- Fall back to plain text when validation fails — never show a broken card.