@assistant-ui

The cn class name helper that every assistant-ui component imports from @/lib/utils.

Shared design language for the elements family: surface, ink, and motion class recipes plus the shimmer utility.

Range normalization for the elements family: clamping a caller's counts, indexes, and shares to what the element can render.

Shared task state, labels, timing, and elapsed time for task elements.

A pixel matrix that keeps time while the model has nothing to show yet.

A live status line that names what the agent is doing right now, with elapsed time.

A collapsible trace that streams reasoning steps along a timeline, then settles into a summary.

Tokens arrive softly: the newest words land in blue and settle into ink.

The classic three dots, tuned to read as presence rather than noise.

A user bubble and a streaming assistant reply, with actions that appear on hover.

Navigate between regenerated versions of the same answer without losing your place.

Copy, rate, and regenerate. Each action confirms itself with a small state change.

Prompt pills that stagger in after a reply and invite the next turn.

A quiet failure banner with a retry path, not a modal in your face.

One tool invocation with its request and result tucked behind a disclosure.

A whole working session summarized as verbs, targets, and file stats.

Command output that streams line by line and ends with an exit status.

A unified diff with tinted additions and removals, sized for chat.

A search query and its results landing one by one as the agent reads.

Citations collapsed into a pill, expanding into scannable source cards.

Numbered references inside a sentence, each with a hover preview of its source.

A dot grid holds the frame while the image resolves out of a blur.

A small comparison table the model can answer with directly.

Digits that roll into place as a count updates in real time.

A checklist the agent works through, with progress you can glance.

Parallel workers with their own progress, models, and completions.

One pill that always answers: what is it doing, and for how long.

A delegated task with its state, timing, result, and transcript in one card.

Human in the loop: the agent asks before it runs anything with side effects.

The agent proposes a change with its confidence, and waits for a yes.

A generated document as a tangible object, written live and versioned.

The unified input: attachments, commands, mentions, models, voice, and context in one surface.

The whole family working together: a message, a pause, a streamed reply.

The first screen: a greeting, three ways in, and the composer front and center.

Conversation history with unread marks and actions that wait for hover.

Streaming never steals your scroll position; a pill offers the way back down.

A rail of the whole thread: one tick per turn, the turn being read marked and the ones on screen deepened, and a hover preview of what it says.

The agent's own working list, rewritten mid-run as it discovers what else is needed.

Turns you typed while a run was in flight, stacked and cancelable until it finishes.

Files as received rather than staged: an image to open, a document with its page count.

The same diff, but each hunk is a decision: keep it, discard it, apply what survived.

Everything a run touched, as a tree, with the churn spelled out per file.

A server pausing mid-tool-call to ask you for the fields it still needs.

The passages a retrieval answer stands on, scored, before the answer itself arrives.

Area, line, and bars, with points landing one at a time as the series streams in.

Every span in a run on one time axis, nested, so you can see where it actually went.

The thread steps aside and the document takes the room, still being written as you read.

A live call: the orb tracks your voice, the caption names the turn, the transcript follows.

An answer played back, the spoken word lit as it goes, speed under your thumb.

Which servers are connected, what each one brought, and which is still waiting on you.

A thumbs-down that asks why, so the signal arrives with a reason attached.

Select a phrase in an answer and a toolbar offers to quote, explain, or rewrite it.

Rewrite a turn in place, told up front how many replies the edit throws away.

You pressed stop. The half-written answer stays, and continuing is one tap away.

What the turn cost: time to first token, throughput, tokens, money.

The socket drops, the run keeps going on the server, and the stream is picked back up.

Who you are about to talk to: its skills, its model, and the endpoint behind it.

Chrome for a sandboxed preview: a URL bar, reload, and open-in-new around a frame you isolate.

Come back to a thread and the sentence you never sent is still waiting.

A drawn answer with zoom, reset, and a full-bleed view; you hand it the rendered graphic.

Work as a graph rather than a list: branches that fan out and rejoin.

A half-year of runs as a calendar of cells, dense where the work was.

Calls that went out together, collapsed to one row until you want the detail.

Where the window actually went: prompt, tools, files, conversation, and what's left.

The full list rather than the rail: grouped by family, priced, with what each one can do.

How hard to think, and how much of that budget the run actually spent.

A refusal in its own shape, with the nearest thing it can do instead.

Chronology in a long thread: days marked, times on hover.

Who is talking, once a thread holds more than a user and one model.

Fork the same turn to a different model instead of rolling the same dice.

Which claims came from a source, which were inferred, and which are guesses.

One call failed. The error, the attempt count, and a retry that doesn't restart the turn.

Granting a capability rather than approving one action, with the reach spelled out.

The screen the agent is driving, with a cursor trail and what it is doing right now.

A snippet with a run button, and the output it produced attached below it.

A document the answer leans on, with the quoted passage and the page to jump to.

What it now remembers about you, written during the turn and removable.

An outline that fills in section by section, each carrying the sources behind it.

A location answer: pins, a route between them, and the list they came from.

Rendered expressions with the working shown, one step at a time.

The most common structured answer after a table: one object, labeled.

Two options weighed side by side, with the pick named and argued.

Events on a time axis, with what already happened and what is still coming.

Work measured in minutes: weighted stages, an ETA, and a way out.

A verdict with its arithmetic shown: criteria, weights, and what pulled it down.

What the run spent, split by model, against the session total.

How much is left, when it comes back, and the way to get more.

Control passing between agents, with the reason and what came along.

Work still going somewhere else, and the results waiting to be collected.

Points you can fall back to, with what each one would give back.

A run that repeats on its own, with its cadence and how it has been doing.

Prompts you saved, searchable, with their variables shown before you insert one.

Everything the app can do, one keystroke away and grouped by where it acts.

A read-only transcript someone sent you, with a way to pick it up yourself.

Find inside a long thread, with every hit marked down the scrollbar.

History you can actually get back into: pinned first, then grouped by when.

The floating entry point, and the panel it opens into.

Model, system prompt, temperature, and what the assistant is allowed to do.

First run: three moves that teach what this assistant is actually for.

The bottom sheet: keyboard-aware, quick actions above, thumb-sized targets.

Keyframes and theme variables for the streaming shimmer animation.

Assistant page wired to the AI SDK chat route, with the thread component installed.

Next.js route handler that streams chat completions through the AI SDK.

AI SDK route handlers with resumable stream context, so a run survives a reload.

Chat page for an Eve agent, rendering the session through an assistant-ui thread.

Chat container with message list, composer, auto scroll, and accessibility built in.

The props-driven voice orb: five session states and four palettes, no runtime required.

The props-driven context usage display: ring, bar, and text presets with the usage popover, no runtime required.

Realtime voice session controls with connect, mute, and a status indicator.

The live call screen bound to the thread's voice session: orb, caption, transcript, mute, and end call.

A runtime task card with nested transcripts, timing, results, and grouped task lanes.

A runtime task summary chip with an optional tray for every task in the thread.

Copy text to the clipboard with a temporary copied state.

Render assistant markdown with headings, lists, links, and code blocks.

Collapsible panel for assistant reasoning and thinking content.

Runtime-backed thread rail: a tick per turn, the turn being read marked and the ones on screen deepened, a hover preview, and a click that scrolls there.

The props-driven reasoning disclosure: streaming preview, fades, and variants, no runtime required.

Badge with streaming stats: time to first token, total time, and tokens per second.

Token usage against a model's context window as a ring, bar, or text, with a hover popover.

Sidebar or dropdown for switching conversations, with search and active selection.

Dialog listing MCP connectors and custom servers, with OAuth and bearer auth controls.

Resolve an image attachment to a preview source URL.

Attach files from the composer and view them inside messages.

Prompt chips rendered from runtime generated follow up suggestions.

Icon button with an accessible tooltip label, shared across the assistant UI components.

Code block highlighting powered by react-syntax-highlighter.

Floating chat bubble for support widgets and help desks, with a thread list and a resizable window.

Side panel chat for copilot experiences and inline assistance.

Default renderer for tool calls that have no dedicated UI.

Collapsible wrapper around consecutive tool calls.

Code block highlighting powered by react-shiki.

The props-driven Shiki code block: streaming-aware highlighting, no runtime required.

Render Mermaid diagrams in messages, including while they stream.

The props-driven Mermaid renderer: zoom overlay, skeleton, and error fallback, no runtime required.

Render code diffs with highlighted additions and deletions.

Sidebar shell that hosts the thread list beside a thread.

Select and quote message text with a floating toolbar and a composer preview.

Display URL sources with favicon, title, and an external link.

Display image parts with preview, loading states, and a fullscreen dialog.

Display file parts with icon, name, size, and a download button.

Model picker with reasoning effort levels, search, and runtime integration.

The props-driven model picker: search, groups, and reasoning effort levels, no runtime required.

Model provider logos as inline SVG components.

Dropdown select with composable trigger, content, and item components.

Direction provider and hook for right to left layouts.

Small label for status, categories, and metadata.

Tabs for organizing content into switchable panels.

Stacked headings that reveal or hide content sections.

5x5 dot matrix indicator with state specific blink patterns.

Animated number that rolls its digits odometer style when the value changes.

Activity heat map with month and weekday labels.

Character triggered picker for @ mentions, / commands, and similar popovers.

Render mention directives as inline chips in user messages.

The props-driven directive chip renderer: bring your own formatter, no runtime required.

Theme variables and vocabulary CSS for generative UI output.

Styled component library for rendering generative UI output.