Agent Loading States
Three loading states for AI interfaces: shimmering status text, live agent progress, and cycling reasoning phrases.
AI Agents
Build clear, responsive AI experiences with open-source React components for agent reasoning, progress, tool activity, and conversation states.
Code Block
A code block with a label, a copy button, and light coloring for keywords, strings, comments and numbers, with no highlighter dependency.
Flowchart
A sequence of steps on a dotted canvas, connected by curves that measure the actual cards and follow as you drag one. Click a step to light up its connectors, or edit an if/else step's chips with real dropdowns.
Message Bubble
A focused conversational surface with visual tones, independent alignment, and a speech-bubble tail that pops in on arrival.
Pixel Loader
A 3x3 grid of cells that twinkle on independent, randomized cycles, paired with a shimmering label and an optional live elapsed timer.
Prompt Input
A chat composer that grows with its content, submits on Enter, and crossfades its send button into a stop button while a reply streams.
Streaming Response
Wraps a response with the actions people expect once it settles: copy, replay, share, a thumbs up or down, and a list of suggested follow-up prompts. No card or border, so the answer reads as part of the page.
Streaming Text
Reveals a model response as it streams in, fading each newly arrived word in on its own without replaying what's already on screen.
Todo List
A collapsible agent task plan with morphing status marks and a completion count.
Tool Approval
A card for an agent action waiting on approval, with Approve and Deny that collapse into a single status pill once resolved.
Tool Chip
A small pill naming a tool an agent used, with a spinner, check, or error mark that crossfades in place as its status changes.