Agent UI kit · 29 componentsMIT
Interfaces for agents that think, act and ask.
React components for AI agents, built for shadcn/ui and the Vercel AI SDK. Watch a real run below, hover any part to see what it is, and open it to copy the code.
$npx shadcn@latest add https://ui.cuelark.com/r/prompt-input.json
Research agent UI
A research agent that plans its work, hands it to two sub-agents running in parallel, cites every claim and writes a brief into an artifact beside the chat, while you queue follow-ups.
research-agentnorthwind · support + surveys
Up next1
- 1Also check what churned accounts said
Guide
Where each piece goes in an agent app
Every agent interface has the same seven places. Put each component where people expect it and the run explains itself. Hover a zone to find it on the map.
- 01
Composer
The bottom of the chat, where people start and steer a run.
- Prompt Input
- Always: the one place to type, attach files, pick a model and stop a run.Avoid: A plain textarea without a Stop button once replies stream.
- Suggestions
- Empty states and after an answer, to show what to ask next.Avoid: More than three or four at once; they become noise.
- Queue
- Runs that take more than a few seconds, so people can line up follow-ups instead of waiting.
- Model Selector
- Products that let people trade speed, cost and quality per task.
- 02
Thread
The conversation itself: who said what, in order.
- Conversation
- The scroll container: it follows a streaming reply and lets go when people scroll up.
- Message
- Every turn, with actions (copy, retry, rate) on assistant replies.
- Streaming Text
- Any reply that arrives token by token.
- Branch
- Regenerated or edited replies, so earlier versions stay one click away.
- Checkpoint
- Before an agent changes files or data, so people can roll back to that point.
- 03
Work in progress
Inside the assistant's turn, before the answer: what it is thinking and doing.
- Reasoning
- Models that think before answering: stream it, then fold it to one line.Avoid: Leaving the full trace open after the answer starts.
- Chain of Thought
- Multi-step work where people want to see progress at a glance.
- Task
- A checklist the agent works through, such as a research or migration plan.
- Tool
- Every tool call: name, status, duration, and the exact input and output one click away.
- Subagent
- Work handed to another agent, so it is always clear who did what.
- Text Shimmer
- Short live status lines like “Searching…”.
- 04
Approvals
The moments the agent stops and asks. They block the run, so make them unmissable.
- Plan
- Before multi-step work: show the steps and wait (optionally auto-run after a countdown).
- Confirmation
- Before one action with side effects: sending, paying, deleting, deploying. Risky ones need a hold.Avoid: Asking for harmless reads; people learn to click through.
- 05
Evidence
Why people can trust the answer.
- Inline Citation
- Right after the claim it supports.
- Sources
- Under the answer: everything the agent read, collapsed to one pill.
- 06
Side panel
Beside the chat: the things the agent made or changed, too big for a message.
- Artifact
- Documents, charts and components the agent produced, with full screen and download.
- Web Preview
- A page or deploy the agent built, in a framed browser.
- File Tree
- The files a coding agent touched, marked added, modified or deleted.
- File Diff
- A proposed change, to accept or reject (also fine inline in the thread).
- Code Block
- Code or queries the agent wrote.
- Terminal
- Live command output while the agent runs something.
- Test Results
- The outcome of a test run, failures open.
- Stack Trace
- Errors the agent hit or is fixing, with library frames folded.
- 07
Run header
For power users and developers: what the run costs and where the time went.
- Context Meter
- Long sessions where the context window fills up, with tokens and cost on hover.
- Trace Waterfall
- Agent runs with many steps or sub-agents: every model and tool call on one timeline.
All 29 components
Every agent component, by moment
From the first prompt to the trace of the finished run. Each one installs on its own with the shadcn CLI.
Ask
Start and steer a run.
- Prompt InputThe composer for prompting an agent: autosize, attachments, model picker, stop.In the coding agent, research agent, data analyst demo
- SuggestionsFollow-up prompt chips that scroll sideways on small screens.In the coding agent, data analyst demo
- QueueMessages queued while the agent is busy, reorderable.In the research agent demo
- Model SelectorPick the model: grouped by provider, searchable, with context and tags.In the coding agent, data analyst demo
Think
Show the work without burying the answer.
- ReasoningA model's thinking, streamed live, then folded to "Thought for 6s".In the coding agent, research agent, data analyst demo
- Chain of ThoughtThe steps an agent took, on a rail with live status.In the coding agent demo
- TaskA to-do list the agent works through, with progress.In the research agent demo
- Text ShimmerA light sweeping through muted text: the "working" status.
Act
Tool calls, delegation and the things they produce.
- ToolA tool call: name, live status, timing, parameters and result.In the coding agent, research agent, data analyst demo
- SubagentWork delegated to a sub-agent, nested with its live activity.In the research agent demo
- TerminalStreaming command output in a dark console.In the coding agent demo
- File DiffA change an agent proposes to a file, with accept and reject.In the coding agent demo
- File TreeThe files an agent touched, with added, modified and deleted marks.In the coding agent demo
- Code BlockCode in a reply: filename, line numbers, highlights, wrap and copy.In the data analyst demo
- Test ResultsPass/fail summary with failing assertions inline.In the coding agent demo
- Stack TraceReadable errors: your frames highlighted, library frames folded.In the data analyst demo
- Web PreviewA small browser for what the agent built, with device widths.
Approve
Stop and ask before anything with side effects.
Answer
The reply, its versions and where it came from.
- ConversationA transcript that sticks to the bottom while streaming and lets go when you scroll.
- MessageOne conversation turn: user bubble or assistant document, with hover actions.In the coding agent, research agent, data analyst demo
- Streaming TextA reply arriving token by token, without the jitter.In the coding agent, research agent, data analyst demo
- BranchFlip between regenerated versions of a reply.In the data analyst demo
- Inline CitationNumbered citations inside a sentence, with a preview on hover.In the coding agent, research agent demo
- Sources"Used N sources" with stacked tiles, expanding into the list.In the coding agent, research agent demo
- ArtifactSomething the agent made, in its own panel with actions.In the research agent, data analyst demo
Observe
Cost, context and timing.
Agentic UI, answered
- What is agentic UI?
- Agentic UI is the interface layer for AI agents that take actions, not just answer questions: showing reasoning, tool calls, plans that wait for approval, file changes, test runs and the sources behind an answer, so people can follow and steer the agent.
- Where should tool calls go in a chat interface?
- Inside the assistant's turn, before the answer, as compact rows: tool name, status and duration, with the exact input and output one click away. Failed calls open themselves. Big outputs (documents, charts, diffs of many files) go to a side panel as artifacts.
- When should an agent ask for approval?
- Before anything with side effects: sending, paying, deleting, deploying or writing to shared data. Show a plan before multi-step work and a confirmation with the exact command before a single risky action. Don't ask for harmless reads, or people learn to click through.
- Is this an alternative to shadcn AI Elements?
- Yes. It covers the same building blocks (prompt input, message, conversation, reasoning, chain of thought, tool, sources, inline citation, plan, confirmation, task, queue, terminal, file tree, stack trace, test results, artifact, web preview, branch, checkpoint, model selector, context) in the Cuelark style, with GSAP motion and extra pieces like a trace waterfall, sub-agents and file diffs.
- Does it work with the Vercel AI SDK?
- Yes. The components are presentational: map useChat messages, message parts, tool invocation states and reasoning onto their props. They also work with LangChain, the OpenAI or Anthropic SDKs, or any stream.
- How do I install an agent component?
- Run npx shadcn@latest add https://ui.cuelark.com/r/<name>.json, for example prompt-input or reasoning. The source lands in your project, so you own and can change every line.