Animated AI agent components
Build clear, responsive AI experiences with open-source React components for agent reasoning, progress, tool activity, and conversation states.
Each agent component is designed for long-running, interruptible AI work and includes a live preview, shadcn install command, TypeScript source, API reference, and reduced-motion support.
Conversation components
Compose prompts, arrange sender-aware messages, shape conversational surfaces, and keep streamed turns stable while the reader moves through the transcript.
Prompt Input
An auto-growing agent composer with prompt actions, model selection, keyboard submission, and animated send and stop states.
Message
Composable conversation primitives for message rows, grouped bubbles, avatars, metadata, live markers, and a mount-only trailing-edge pop-up for newly sent rows.
Message Bubble
A focused conversational surface with visual tones, independent alignment, grouped messages, expandable content, and interactive link or button support.
Message Scroller
A reader-aware conversation viewport that follows streamed output at the live edge and releases control when the reader moves away.
Response and evidence components
Render rich answers as they arrive, reveal completion actions at the right time, and connect generated claims to inspectable sources.
Streaming Response
A stable response surface with completion actions, rendered content, and an expandable source summary.
Image Generation
A stable generated-image surface that moves from queued work through progressive refinement to a completed result without layout shift.
Citations
Inline citation markers paired with a collapsible, progressively rendered reference collection for grounded agent responses.
Progress and planning components
Communicate unknown waits, durable task plans, and chronological agent activity without inventing precision or exposing an unfiltered trace.
Agent Loading States
Three thoughtful loading states for AI interfaces: shimmering status text, live agent progress, and cycling reasoning phrases.
Todo List
A collapsible agent task plan with morphing status marks, a completion count, compact metadata, and smooth list updates.
Agent Activity
One adaptive activity stream for reasoning, searches, tool calls, structured execution traces, or a chronological mix.
Tool and code components
Present execution outcomes, generated source, and file changes with bounded streaming, stable highlighting, and inspectable completion states.
Tool Result
A lightweight execution disclosure for syntax-highlighted terminal output and request responses that collapses into a compact completed state.
Code Block
A syntax-highlighted code surface with stable streaming updates, line numbers, focused lines, smooth following, and copy feedback.
File Diff
A syntax-highlighted file change disclosure with progressive rows, line numbers, live change counts, smooth following, and completion collapse.
Human-in-the-loop components
Pause agent work for a scoped permission, clarification, review, or decision, then preserve the resolved outcome in the run history.