AI Interaction Patterns
Patterns
93 patterns for interaction scenarios that did not exist before agents. These are not adaptations of existing patterns for AI use cases — they are new responses to new questions: How do you show an agent asking for permission? How do you make a tool call visible without overwhelming the user? How do you build a consent ceremony for an autonomous action?
Agency & Control10
Who acts, and how much latitude they have.
5-level agency scale from autonomous to human-controlled
Layered agency visualization with progress meters
Agent identity card with trust level, status, and expandable permissions
Force-directed graph of agent relationships and communication
Chronological log of agent actions with status filtering
Three-surface agent identity signal — inline @mention chip, card with capabilities, full sidebar panel. Encodes role, execution state, and approval-gated capabilities using semantic tokens.
Non-intrusive background activity indicator. Shows agents working without demanding attention. Three variants: dot (toolbar), strip (bottom bar), tray (collapsible side panel).
Chronological feed of agent actions, tool calls, decisions, and state transitions. Each entry carries type, actor, description, and relative timestamp.
Inline confidence bar for a single agent output. Renders a colored progress bar with optional numeric label. Color maps to outcome tokens.
Animated loading indicator communicating an agent is actively processing. Supports text label, step counter, and elapsed time. Uses temporal color.
Tool Execution3
What agents do when they use tools — and how you show it.
Conversation8
The back-and-forth between agent and user.
Conversational message bubble for human or AI sender
Streaming LLM output with temporal cursor. Displays content immediately — no fake simulation. StreamingDot disappears instantly on completion.
Token budget visualization showing context utilization
Data source citation with type icon, inline freshness timestamp, and stale indicator (DAN-17)
AI model picker with capability comparison
Microphone trigger with integrated waveform animation. States: idle, listening (agency red), processing (temporal blue), done, error. Waveform bars animate to real or simulated audio amplitude while listening; freeze and pulse during STT processing.
Live speech-to-text output with per-segment confidence signaling. Low-confidence words are underlined in gold (validation) with a confidence pill. Temporal blue border while transcribing, gold for low-confidence final output, error red for STT failure.
Compact audio playback with waveform visualization. Played portion shown in temporal blue; unplayed in border-structure. Click waveform to seek. Supports controlled and uncontrolled modes. States: idle, playing, paused, loading (skeleton bars), error.
Human-in-the-Loop19
The patterns for keeping humans in the chain.
Queue of pending human approvals with priority ordering
Multi-step consent wizard with step indicator
UI for correcting AI output with diff preview
High-priority alert banner for human escalation
Visual indicator of active guardrails and safety constraints
Containment unit for agent errors — severity-coded card with recovery actions
Recovery breadcrumb timeline showing every step an agent attempted after hitting a dead end
Partial completion panel — agent did N of M steps, human needed on step K
Color-coded uppercase badge for the six canonical AI interaction states (loading, thinking, acting, confirming, error, recovery)
Animated dot indicator for AI interaction states — CSS-only animations with prefers-reduced-motion support
Linear step sequence for documenting agent interaction flows — shows state badge, copy, and annotation per step
Pause/resume control for in-flight agents with execution state preservation — shows step count and last completed action when paused
Mid-execution goal redirect — shows agent progress, struck-through original goal, and preview of new goal before confirming
High-stakes override with consequence preview and mandatory acknowledgment — no blind overrides, consequences always shown first
Scannable grid of agents × capability dimensions — blue=granted, gold=conditional, red=denied — designed for treasury dashboards at 3am
Single permission grant card with conditions (time-bounded, value-bounded, approval-gated), audit trail toggle, and revoke trigger
Two-step revocation ceremony: Step 1 shows task impact preview (will-fail / may-degrade), Step 2 requires written reason — non-repudiable audit trail
Structured justification form for human overrides of agent decisions. Captures reason category, free-text rationale, and acknowledges accountability.
Card surface for human review requests from an agent. Shows the decision context, confidence, urgency level, and approve/reject actions.
Trust & Provenance14
Where did this content come from, and should you trust it?
Immutable action log with integrity hash chain
Linked chain of data sources showing transformation provenance
Visual boundary between vault permission zones
Grid of resource-permission grants for agent authorization
Labeled confidence gauge with low/moderate/high qualifier
Time-based scale showing recency and freshness
Multi-dimensional certainty visualization. Shows uncertainty fingerprint across epistemic, aleatory, temporal, and consensus dimensions. Distinct from ConfidenceMeter (single-axis).
Traceable action attribution receipt. Shows decision authority, executing agent, human approver, confidence at decision time, and evidence used. Mandatory for consequential agentic actions.
Inline citation block listing the evidence sources an agent used. Each entry has source name, type, confidence score, and retrieval timestamp.
Compact hop-chain tag showing data lineage from source to consumer. Each hop has a system name and optional transformation type.
Composite trust score display with breakdown by factor (accuracy, recency, source quality, consensus). Score maps to outcome color tokens.
Sequential validation pipeline display. Each step shows rule name, result (pass/fail/warning/pending/skipped), and optional message. Used for data quality and policy gates.
Side-by-side reconciliation diff — expected vs actual with match/break/tolerance/missing status per row and delta values
Cryptographic audit attestation display — signer, subject, full hash, algorithm, verified/invalid/pending status, compact inline variant
Orchestration7
How multiple agents coordinate toward a shared goal.
Agent-to-UI renderer — accepts declarative nodus:* component specs and renders the appropriate Nodus component
Agent-to-agent task handoff visualization with protocol steps
Ordered task list with status tracking and priority
SSE stream subscription hook — returns { chunks, status, latency, start, reset }. Simulates token-by-token delivery with configurable TTFT, chunkInterval, and chunkSize.
Live FX position tick hook — returns { positions, lastUpdate, delta, running, pause, resume }. Configurable volatility and tick interval.
Agent status polling hook — returns { agents, lastPing, stale, ping }. Marks agents stale after configurable staleness window. Used in multi-agent orchestration views.
Pipeline view of a multi-agent workflow. Shows each agent step with status (queued/active/done/failed/blocked/skipped), duration, and dependency connectors.
Reasoning5
Making agent thought visible without overwhelming the interface.
Collapsible tree of reasoning steps with depth indicators
Single reasoning step with type indicator and content
In-progress LLM reasoning indicator with temporal pulse, elapsed timer, and optional chain-of-thought trace
Side-by-side or inline diff of iteration changes
Vertical branching logic tree. Each node shows condition evaluated, agent verdict, and whether that branch was taken. Terminal nodes show final outcome.
Learning3
How systems improve from feedback and signal.
Visualization6
Rendering complex agent state as legible structure.
Visual cluster of semantically similar items
Ranked list of retrieved documents with relevance scores
Token cost breakdown by model and operation
Real-time deadline countdown. Transitions color from validation → caution → agency as deadline approaches. Supports critical threshold configuration.
Localized relative timestamp that updates in real time. Shows '2 min ago', 'just now', etc. with a tooltip showing the absolute ISO time.
Time-grid schedule view with columns (agents/pipelines) and rows (time slots). Tasks displayed as colored blocks with status-mapped outcome tokens.