Learn 9 AI Interfaces concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
Combines message entry, attachments, model options, and send controls.
Create an accessible chat composer with a multiline field, attachment action, clear Send button, Enter and Shift+Enter behavior that is explained and configurable, character and file limits, disabled and sending states, draft preservation, validation that retains content, and keyboard focus that stays predictable after sending.Presents one conversational turn with author, content, metadata, and actions.
Create accessible user and assistant message bubbles with author identity, semantic text, timestamp, delivery or generation status, code and citation support, copy and retry actions that appear on focus as well as hover, sensible maximum width, selectable text, and no meaning conveyed by alignment or color alone.Lets people scan, select, rename, organize, and revisit conversation threads.
Create an accessible conversation list with search, date groups, descriptive titles, selected and unread states, per-thread actions, keyboard navigation, rename and delete confirmation, lazy loading, empty and error states, and preserved selection when the sidebar collapses or the viewport changes.Builds a structured AI request from instructions, context, variables, and attachments.
Create a prompt composer with a spacious multiline editor, variable tokens, attachment and context controls, model or capability context, token estimate, reusable templates, clear Run action, keyboard shortcut, draft autosave, sensitive-data warning, validation, and an explicit distinction between system instructions and user content.Offers concise example requests that can seed or refine an empty composer.
Create prompt suggestions as short descriptive buttons near an empty AI composer. Tailor them to the current context, make each suggestion understandable out of context, insert rather than immediately submit unless clearly stated, support keyboard access, allow dismissal, avoid horizontal scroll traps, and remove suggestions once they no longer help.Communicates whether an AI agent is idle, planning, acting, waiting, complete, or failed.
Create an accessible agent status indicator with distinct Idle, Planning, Working, Waiting for approval, Complete and Failed states. Pair icons and text with color, expose concise live updates without chatter, show elapsed time only when useful, provide Stop or Resume actions when available, preserve the final result, and avoid an endless spinner with no explanation.Shows an AI tool invocation, its arguments, progress, output, and failure state.
Create a collapsible tool-call card showing the tool name, safe argument summary, running or completed status, duration and concise result. Redact secrets, keep raw payloads behind an optional technical disclosure, provide retry only when safe, distinguish requested approval from execution, support copy, and announce important failures without exposing internal reasoning.Displays a concise, user-facing progress summary without exposing hidden reasoning.
Create a thinking or progress panel that reports short user-facing milestones such as Searching, Comparing and Drafting without exposing private chain-of-thought. Keep it collapsed by default when verbose, update at meaningful boundaries, provide stop control for long work, preserve the final summary, avoid fake precision, and distinguish progress from completed output.Links a generated claim to its supporting source or document location.
Create accessible inline citation chips for AI-generated content. Use stable numbered or descriptive labels, make each chip a real link or button, show source title and relevant location in a preview, preserve context when opened, distinguish unavailable sources, support keyboard and screen readers, and never imply a source supports a claim it does not contain.