AI & agents
Animated React AI Chat & Agent UI Components
The hard part of an assistant UI isn't the chat bubble — it's legible agency: what the model is doing, what it's about to do, what it costs, and when it needs permission. These components make those temporal states readable with motion: answers that stream word by word, tool calls that spin up and resolve, plans that fill as they execute, and approval gates that ask for a deliberate hold on risky actions. Every one is a single TypeScript file styled with Tailwind, driven by plain props so it works with any SDK, and settles to its final state under prefers-reduced-motion.
Assistant presence orb on 2D canvas: seeded noise-displaced blobs composited additively inside a glassy clipped sphere with Fresnel rim, soft specular and halo. Morphs per state — breathing idle, level-driven ripples while listening, folding bands and an orbit ring while thinking, pulses and a brighter core while speaking — blending over ~600ms. DPR-clamped, offscreen-paused, polite live-region announcements, a static lit frame per state under reduced motion.
Agent chat panel composing the AI set — a role="log" transcript of right-aligned user bubbles and unbubbled assistant turns (thinking disclosure, inline tool-call cards on a progress spine, an inline approval request, a streamed answer) above a pinned prompt composer. Auto-scroll follows the stream only while you're at the bottom; scrolling up detaches it behind a spring-in "Jump to latest" pill. Empty-state greeting with suggestion chips, rise-in messages, and a seeded useScriptedConversation hook that waits on approvals. Instant scroll and fades under reduced motion.
Streaming assistant message — each arriving word fades up into place behind a breathing caret, with paragraphs, bullet lists and inline code chips, plus a shimmering "Thinking" disclosure that springs closed to "Thought for Ns". Announces completed paragraphs politely; ships a seeded useScriptedStream hook for prototyping.
A context-window / credits meter card: rolling digit headline over one segmented bar that splits usage by category, each slice springing to its width independently. Past the warn threshold the leading edge breathes an amber glow; past critical the headline turns amber and a note fades in. Optional cost line and reset countdown.
Tool-call card for agent UIs — a status glyph spins an accent arc while running, closes into a drawn check on success or a rust shake on error, with a ticking elapsed timer and expandable tinted-JSON input/output. RelayGroup chains calls along a progress spine that fills as each completes.
Prompt composer for chat UIs — an auto-growing textarea in a glass capsule with spring-in attachment chips, an optional model pill, and a send disc that morphs into a stop button while a light laps the border during generation. Enter/Shift+Enter/Escape, IME-safe, file paste, and labelled controls.
Agent approval request card — springs up with a command or unified-diff preview and a low/medium/high risk badge, then collapses on a height spring into a one-line receipt. High-risk actions require press-and-hold (pointer or Space/Enter): an accent fill sweeps across Approve and drains back on release. Non-modal group semantics, Escape to deny, live-region outcome, stepped-opacity hold under reduced motion.
Live agent plan checklist — status markers on a vertical rail where one continuous accent line grows like mercury to the active step, which pings softly. Done steps draw a check and dim, skipped go dashed, failed turn rust; when the plan is revised, inserted steps expand in and dropped ones collapse out. Rolling counter, progress bar, ordered-list semantics with aria-current and polite announcements.