Free React AI Interface Components

Interfaces for AI products have their own vocabulary, streaming states, tool calls, token costs, human-in-the-loop approvals, and generic UI kits have none of it. This set covers the real surface of an agent product: a prompt composer, reasoning disclosure, tool call timeline, sub-agent tree, context meter, run cost ticker, guardrail notices, and HITL approval cards. Each one is designed around what the state actually means, so your app explains itself instead of hiding behind spinners.

20 components · MIT licensed · installable with the shadcn CLI

Agent Status Strip

A slim strip for app headers, agent name, state lamp, a one-line current step that shimmers while running, and an SSR-safe elapsed mono timer that starts post-mount.

AI Empty State

Agent session zero state for React AI apps, starter prompt cards, connected-tool chips, and an honest scope note, styled with Tailwind hairline restraint; composes above any composer.

Citation Rail

Inline numbered source chips paired with a rail of sources, favicon placeholder, domain, and title, plus a keyboard-accessible snippet peek on hover or focus.

Context Meter

Context-window usage meter, a hairline bar with a tabular tokens-used/limit readout and per-source breakdown rows, shifting to an honest warning treatment at 85 percent.

Diff Approval Block

An agent's proposed change as reviewable hunks, mono before/after lines with token-honest added and removed tints, per-hunk approve/reject callbacks, and j/k keyboard navigation.

Generative Skeleton

A streaming placeholder that morphs, shimmering blocks resize and settle into real headings, rows, and cards as each section's content lands, so the answer arrives without a layout jump.

Guardrail Notice

An inline policy interjection, a quiet card explaining why the agent modified or declined an action, with an expandable mono policy reference; honest tone, destructive keyline only when blocked.

HITL Approval Card

Human-in-the-loop approval for a pending agent action, plain-language summary, honest risk chip, expandable raw-payload mono block, and allow-once / always-allow / deny callbacks.

Latency Heartbeat

A tiny inline streaming-health signal, an SVG heartbeat trace pulsing beside a mono millisecond readout, with an honest destructive shift past a threshold; parks flat when idle.

Memory Ledger

What the agent remembers, as ruled ledger rows, stored facts with source chips, mono added-at stamps, per-row forget buttons, and one pinned fact held on a primary keyline.

Message Action Bar

Assistant message action toolbar for React chat UIs, copy, retry, edit, and feedback buttons with a mono model attribution seam; Tailwind-styled, roving tabindex, SDK-agnostic.

Model Picker Row

A segmented row of model options, name over quiet mono context, speed, and cost data, with a spring-loaded sliding thumb marking the selection; display plus callback only.

Prompt Composer

The agent input surface done right, auto-growing textarea, attachment chips, a slash-command hint row, and a model-plus-cost strip on the bottom seam; fully controlled, submits on cmd-enter.

Reasoning Disclosure

A model thinking block, collapsed to a shimmering summary line while streaming, expanding to the full reasoning text with a mono character count; settles quiet when done.

Run Cost Ticker

Live run-cost readout, tabular currency with rolling digits, per-model breakdown rows, and a session total that settles with a single spring when the run ends.

Session Timeline Scrub

A horizontal session scrubber, turn markers on a hairline rail with drag and arrow-key navigation under role=slider semantics, and a preview chip summarizing the focused turn.

Slash Command Menu

Anchored slash-command menu for React chat composers, query-prop filtering, grouped commands with argument hints, and listbox semantics for any host input; Tailwind-styled, portal-free.

Sub-Agent Tree

Nested agent delegation as an expandable tree, hairline connectors, per-node status lamps and mono duration chips, for orchestrator runs that fan out past a single level.

Tool Call Timeline

An agent run as a collapsible ledger timeline, mono tool names, arg and result summaries, duration chips, honest per-step status, and one level of nested sub-agent groups.

Voice Waveform Bar

Voice agent waveform bar for React, prop-driven amplitude bars across idle, listening, processing, and speaking states, with Tailwind token styling and zero microphone access.