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.
Agent interface componentsfor React and Next.js
Copy-paste AI agent components built with Motion and Tailwind CSS. Free, open source, and fully customizable.
Agent UI
Agent components
Prompt Input
An auto-growing agent composer with prompt actions, model selection, keyboard submission, and animated send and stop states.
Streaming Response
A stable response surface with completion actions, rendered content, and an expandable source summary.
Agent Activity
One adaptive activity stream for reasoning, searches, tool calls, structured execution traces, or a chronological mix.
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.
Approval Card
A human-in-the-loop decision surface for approvals, single or multiple-choice questions, custom responses, and multi-step review flows.
Todo List
A collapsible agent task plan with morphing status marks, a completion count, compact metadata, and smooth list updates.
File Diff
A syntax-highlighted file change disclosure with progressive rows, line numbers, live change counts, smooth following, and completion collapse.
Citations
Inline citation markers paired with a collapsible, progressively rendered reference collection for grounded agent responses.
Image Generation
A stable generated-image surface that moves from queued work through progressive refinement to a completed result without layout shift.
Message Scroller
A reader-aware conversation viewport that follows streamed output at the live edge and releases control when the reader moves away.
Example feedback
Example builder notes
Maya ChenProduct designer
The motion feels considered without getting in the way.
Theo AlvarezFrontend engineer
The activity states make long-running work easy to follow.
Priya NairAI product lead
I could drop these into a production chat without rebuilding the interaction layer.
Jonah ReedDesign engineer
The components are polished, readable, and easy to adapt.
Samira ColeProduct engineer
The interface stays clear even while a run is still moving.
Leo ParkDeveloper experience
The small transitions make the whole workspace feel alive.
Ada OkaforFounder
This is a calm starting point for an AI product surface.
Noor HassanStaff engineer
The spacing, states, and feedback all feel like part of one system.
Elena VossProduct designer
The source is easy to understand and the motion is easy to tune.
Marco SilvaFull-stack engineer
The previews answer the important question before I install anything.
Riley KimUI engineer
The patterns feel ready to compose, not just ready to demo.
Dario BrooksTechnical founder
A thoughtful base for building a focused agent workspace.
Jamie WuInteraction designer
The interaction patterns are crisp without feeling over-designed.
Soren PatelFrontend architect
Streaming and tool states share the same clear visual language.
Mina LaurentDesign systems lead
The best part is how much of the behavior is already considered.
Alex RiveraIndependent builder
Clean enough for a first screen, flexible enough for a full workspace.
Build with AgentUI
Need components built for your product?
Compose polished agent interfaces with copy-paste components built for React and Next.js.