AI UX patterns

150+ curated AI UX patterns from shipped products, chat, agents, trust, onboarding, and more. Each entry includes when to use it, pitfalls, examples, and interactive demos where available.

Featured

Trust AI UX patterns

Prove sources, show reasoning, and make consent inspectable before users act.

View all Trust

Chatbot AI UX patterns

Ship turn-taking, streaming, repair, and memory before chat polish.

View all Chatbot

Agents AI UX patterns

Make tools, approval, budgets, and rollback visible before agents act.

View all Agents

Onboarding AI UX patterns

Guide a first success with starters, wizards, and progressive unlock.

View all Onboarding

Inputs AI UX patterns

Clarify tools, attachments, modes, and templates before the user sends.

View all Inputs

Outputs AI UX patterns

Stream answers, refine drafts, compare options, and keep feedback tight.

View all Outputs

Design Tools AI UX patterns

Generate layouts, variants, and canvas edits users can compare and refine.

View all Design Tools

Commerce AI UX patterns

Find by meaning or image, cart across merchants, compare, and complete the buy.

View all Commerce

Collab AI UX patterns

Share sessions, show presence, and review AI changes before they stick.

View all Collab

Audio AI UX patterns

Show listening state, live transcript, and safe interrupt for voice turns.

View all Audio

Performance AI UX patterns

Show model choice, cost, wait time, and limits before users hit a wall.

View all Performance

Frequently asked questions

What counts as an AI UX pattern here?

Each pattern is a named interaction or UI convention for AI products, streaming replies, tool pickers, citation chips, autonomy budgets, and similar, with a short definition, when to use, when not to use, anti-patterns, and product examples. High-intent pattern pages also include a product implementation table and a per-page FAQ.

How many patterns are in the catalog?

The browse catalog lists 150 patterns organized across 11 categories (chatbot, agents, trust, onboarding, commerce, inputs, outputs, and more). New patterns are added as products ship new conventions; category filters and search help you narrow the grid.

How do I use these patterns in product work?

Start from the user risk: trust, cost, reversibility, or latency. Pick a category filter or search by product name, open 2-3 similar patterns, compare anti-patterns, then link the pattern URL in your spec or Figma brief. Pair with Frameworks when you need vocabulary for agentic or chat territories.

Can I filter patterns by AI product or company?

Yes. Use search on this page or scan the examples listed on each card. Patterns reference products like ChatGPT, Claude, Perplexity, Cursor, and others where that convention appears in production.

How do patterns relate to Frameworks?

Frameworks define territories and guiding questions for a whole problem space (for example permission, rollback, and autonomy for agents). Patterns are the catalog entries you implement; framework pages map which patterns belong to each territory and which anti-patterns to avoid.

Are interactive demos available for every pattern?

Most pattern detail pages include a live demo illustrating states and flows. If a pattern is conceptual or documentation-only, the page still lists real-world examples from shipped products so you can research behavior in context.