ai-component-patternslisted

# AI Component Patterns ## The Law ``` AI UI COMPONENTS ARE NOT GENERIC UI COMPONENTS. "A textarea works for prompt input" and "a div works for streaming" ship components missing required sub-components — no cursor, no stop button, no live region, no token counter. All required sub-components of all 6 AI-native patterns, fully implemented, IS an AI component. ``` ## When to Use Trigger when: - Building any new AI feature UI component from scratch - Auditing an existing component before it ships - Replacing a generic component (textarea, div) that is being used as an AI-native one - Reviewing a PR that introduces chat, streaming output, citations, agent logs, or prompt input ## When NOT to Use - Components that display only static, pre-rendered content (no model calls, no streaming) - Internal admin tools where the audience is developers who understand the system's raw state - Non-interactive AI outputs consumed by the system, not displayed to users ## The Process ### Step 1 — Identify the Component Type From the 6 types below, identify which AI-native components this feature requires. A chat interface may need: Prompt Input + Streaming Output + Citation Display + Empty State. An agent view may need: Agent Action Log + Uncertainty Indicator + Streaming Output. ### Step 2 — Check Each Required Element For every component identified, use the Required Elements checklist as a review gate. A component is not done until every required element is present. Not most. Every.