Chat UI kit

AI agent components

Prompt inputs, streaming responses, tool approvals and agent timelines for AI products.

Agent TimelinePro

Live timeline of an agent's steps — thinking, searching, reading, editing — with morphing status icons, ticking timers, expandable details and a shimmer on the active step.

Assistant WorkspaceNewPro

Complete chat block — conversation sidebar, grouped messages, streaming markdown replies and a composer — driven by a local mock assistant.

Citations

Inline numbered citation chips that open a source card with a spring on hover or focus, plus a sources list that highlights the cited item.

Code Block

AI-style code block with filename header, copy button, line numbers, line highlights and a tiny highlighter; long code collapses behind a height spring.

Message Bubble

User and assistant chat bubbles that spring in, group consecutive messages and reveal copy, retry and feedback actions on hover or focus.

Model pickers grouped by provider with monogram marks — a searchable popover with keyboard selection, or a provider rail beside selectable model cards — with springy indicators and blurred crossfades.

Prompt Composers4NewPro

Four composers for AI products — an image prompt with references, a capsule that grows as you type, a playground with model and temperature controls and a metered box that prices each send.

Prompt Input

Chat composer with an auto-growing textarea, model picker and attachment chips; the send button morphs into a stop button while a reply streams.

Thinking Indicators6NewPro

Six small indicators for an AI reply that is on its way, from a pixel trail to a hopping graph, each with an optional shimmering status label.

Token StreamNew

Renders an AI reply token by token from a string or async stream, fading each chunk in behind a blinking caret, with safe markdown.

Tool Permission CardPro

Card that asks a person to approve an agent's tool call — arguments, risk level and an always-allow switch — then springs down into a compact receipt.

Usage MeterNewPro

Usage card with a segmented meter coloured by resource, a hatched projection and animated totals; the monthly budget slider rescales every segment live.