Menu
Use when implementing conversational AI chat interfaces.
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill ai-chatThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Showing SKILL.md
| name | ai-chat |
| description | Use when implementing conversational AI chat interfaces. |
| metadata | {"id":"ai-chat","category":"ai-intelligence","pattern":"AI Chat Interface","source":"uxpatterns.dev","url":"https://uxpatterns.dev/patterns/ai-intelligence/ai-chat","sourcePath":"apps/web/content/patterns/ai-intelligence/ai-chat.mdx"} |
Conversational AI chat interfaces
A AI Chat Interface pattern helps teams create a reliable way to combine prompt entry, streaming output, history, and follow-up actions inside a conversational workflow. It is most useful when teams need assistant sidebars and copilots. Compared with adjacent patterns, this pattern should reduce friction without hiding the state, rules, or recovery paths people need to keep moving.
references/pattern.md, then choose the smallest viable variation.aria-describedby or structural headings when useful.The Problem: Users cannot tell whether the model is waiting, streaming, retrying, or done.
How to Fix It? Expose clear request lifecycle states and keep them visible near the content they affect.
The Problem: AI failures include safety blocks, context limits, model availability, and partial output, not just a failed request.
How to Fix It? Differentiate failure modes and give recovery actions that match each one.
The Problem: The experience feels unpredictable when responses get slower, shorter, or more expensive without explanation.
How to Fix It? Design token, latency, and provider constraints into the interface from the beginning.
For full implementation detail, examples, and testing notes, see references/pattern.md.
Pattern page: https://uxpatterns.dev/patterns/ai-intelligence/ai-chat