Components

Dropdown menu on Base UI

Floating panel on Base UI with the kit's surface, origin-aware motion and no animation when opened from the keyboard

A Base UI dialog on the chatcn surface

The thread scroller

One turn in the thread

Renders a message's parts in order

The toolbar under a message

Thumbs up and down

Inline editing of a user message

Moves between the versions of an edited message or a regenerated reply

A failed reply with the fix right next to it

The jump-to-latest pill

The pending state before the first token

The kit's signature mark

Divider-style events inside the thread

A restore point in the thread

The first screen of a chat

Starter prompts and follow-ups as chips, rows or cards, with a scrolling chip row that fades only the edges hiding more

The composer: a growing textarea with slots for context, attachments and tools, IME-safe Enter to send, Escape to stop, and paste and drop that turn into files

Send that becomes Stop in the same footprint

Files in the composer as chips or cards

Composer-sized and full-page drop targets that say before the drop whether files will be accepted, and why not

Model menu for the composer footer, grouped by provider, with search, capability glyphs, a New tag and your own provider marks

How hard the model thinks

The tools menu: web search, deep research, canvas and image

Microphone button with permission, listening with live level bars, transcribing and a blocked state that says how to fix it

The context the agent will read with the next message

Character or token budget for the composer, with soft and hard limits, a ring variant and announcements only at thresholds

The composer with a rich editor

The @ popup for files, folders, symbols, people, agents and connectors

The / popup for commands and skills, with categories, descriptions, shortcuts, the active command's arguments, and a ghost argument hint after insertion

A token inside text for a mention, file, URL, command or prompt variable

Streaming Markdown for assistant answers

Plain text that streams in with the signature caret, an optional cadence buffer and one announcement on completion

Restrained syntax highlighting that keeps up with streaming, with copy, wrap, line numbers, highlighted lines, long-block collapse and multi-file tabs

Mono at 0.9em on a quiet fill

Tables that stay readable at any width

KaTeX math, inline and display, loaded on first use

Mermaid diagrams in the chatcn palette, with source view, zoom, pan and fullscreen

An image inside a message

One to four images in a fixed-shape grid, with a +N tile for the rest and a shared lightbox you can page through

A file the agent made: type icon, a name that never hides its extension, size, preview and download, with generating and error states

An unfurled link: a compact row or an expanded card with image, title and description, with a skeleton in the final layout and a plain-link fallback

A collapsible, searchable tree for tool inputs and outputs, with copy path and copy value on every row and full keyboard navigation

Terminal output with ANSI colors mapped onto the kit palette for both themes, carriage-return progress bars collapsed and incremental parsing for streams

Shows an agent tool call through its whole life

One line primitive for every agent step on a vertical rail

Folds consecutive steps into one line, Read 6 files, with a live line that shows what the agent is doing right now

Model reasoning behind one quiet line

Elapsed and final duration for an agent step, in tabular figures that tick once per second

The state of a whole agent run for a header or thread row

The sources behind an answer

An inline numbered source with a hover card

A web search tool call: the query and result count in the header, results as a quiet list with letter tiles, titles, domains and snippets

A page fetch: the address, the page title and an excerpt of what the agent read

A file read: path and line range in the header, a numbered preview of what the agent saw

A file edit: path and +12 -3 in the header, a unified mini diff that reads without color

A new file: the path in the header, then a file card with its name, size and first lines

A grep or glob: the pattern and match count in the header, matches grouped by file with file:line and the match highlighted

A shell command: a monochrome terminal that streams output and stays pinned to the bottom, the exit code, and Stop while it runs

Code run in a sandbox: the code with line numbers, then output, errors and the result

A call to a tool on an MCP server or connector

The renderer for tools nobody wrote a renderer for

A browser agent at work: the steps it takes (open, click, type, scroll) with the running one live, and a screenshot thumbnail with the cursor where it last acted

The agent's proposed plan, from the first streamed step to the last one done

The agent's checklist with a live 3 of 7 count, a hairline progress rail and a check that draws itself when a todo finishes

A single task row: status, title, mono detail, a live timer that becomes a duration, and details on demand

A subagent folded to one line that says what it is doing right now

The marker between two agents in a transcript, with the reason in plain words so nobody wonders why the voice changed

Messages typed while the agent works, in a visible queue

How full the context window is, as a ring or a bar, with a breakdown on click and a warning before compaction

Who an agent is: name, what it does, the model behind it, the tools it may call and what it is doing now

A node graph of an agent workflow with live status, rounded SVG edges and keyboard-focusable nodes

A live view of the agent's screen

Manual, Auto or Skip, each with one sentence that says what the agent will do without you, a list of saved grants per site and per tool, and calm notices for actions that stay blocked in every mode

Every pending approval across runs in one list

Clarifying questions from the agent, one at a time

A compact selector for the composer

A card for a detached agent task

Background runs in one list, with a Needs input filter and static unread dots

Toasts for needs your input, done and failed that stack, fan out on hover and swipe away, plus a hook for desktop notifications while the tab is hidden

The agent is controlling the browser, with Take over, Pause and Stop, and the reverse

Parallel agents side by side, each with its status, current step and streaming output

Review an agent's code changes

The files an agent changed, with status letters, dimmed directories, +/- counts and a five-cell bar

A commit or pull request the agent made

The files an agent touched, as a real WAI-ARIA tree

Streaming command output with ANSI colors in the kit palette, a command header, exit code and duration, copy, clear, wrap and follow toggles, and an optional input line

A test run as the agent sees it

The machine an agent works in

A floating toolbar over a live preview for pointing at what to change

An error stack that leads with your code

Environment variables an agent needs or has set

A deep research run from plan to report

A long report built for reading

Web results from a search tool in three views

A document source with its cited page

Page sheets with the cited passage highlighted, a rule in the margin and page navigation that follows your scroll

A document canvas for writing with an agent

A floating toolbar over selected text with Ask, Rewrite, Explain and Copy

Ghost text completion after the caret in a plain textarea

Split panes with pointer and keyboard resizing, pixel or percent limits, collapsible panels and a hairline handle

The inline card that stands for an artifact in a message

The side panel for artifacts

Step through artifact versions or pick one from a list, with edit times and line diff counts to the previous version

An iframe preview for apps an agent builds

Renders JSX written by a model without running it

Bind useChat from AI SDK 7 to chatcn actions, and run it with a scripted transport when there is no server

Renders a JSON spec from the model as chatcn widgets

Bar, line, area and proportion charts in a color-blind aware categorical palette, with dashes and end markers on lines, direct labels, a tooltip on hover and focus, and a table for screen readers

A figure with its delta and a sparkline

Options side by side with the best value in each row marked, the recommended option tinted, and a choose button per column

A form the agent asks the user to fill in

A small interactive tool inside an answer

Horizontal results such as places, products or events

A location card with a monochrome street pattern seeded from the coordinates, so the same place always looks the same and nothing waits on a map provider

The reference generative widget

Events or steps on a vertical rail

The safe pattern for actions an agent takes on the user's behalf

Hosts an MCP App (a ui:// resource, text/html;profile=mcp-app) in a sandboxed iframe through the official app bridge

One surface for voice and text

A monochrome sphere of fine contour lines that carries the whole voice state machine through form and motion

Live input and output levels as a scrolling history, in bars or one continuous line, or a recorded waveform with its played portion

Agent audio in five monochrome forms

The call bar: mute with a live input level and a microphone menu, speaker, captions, your own controls and End

Live voice transcript with speaker labels, unsettled words in a lighter gray, timestamps that seek, typed turns and a clean cut where the user interrupted

Read-aloud and audio output player

Choose a voice after hearing it

A Web Audio level meter for a microphone stream or a media element

A generated image in a conversation

Mark part of an image with a rectangle or a brush, then describe the change

A video job in a conversation

A library of generated images and videos

The renderer for image generation tool calls

The app shell: sidebar, thread and an optional side panel on the shared Resizable

The thread sidebar: New chat, a filter, threads grouped by date with Pinned on top, inline rename, delete with undo, live status per thread, a 52 px rail and a resizable edge

The rows and groups the sidebar is built from

Switches the project a sidebar shows

A segmented control for product modes like Chat, Work and Code

The bar above a thread: a title you rename in place, the model, a Temporary badge, Share and a More menu, plus the sidebar toggle on mobile

Cmd/Ctrl+K: one field that finds chats, runs actions and switches models, with fuzzy matching, groups, shortcut hints and no open animation from the keyboard

Full-text search across chats with the matched words marked in titles and snippets, role filters, recent chats and full keyboard control

A dialog with every shortcut grouped by area, a filter and platform-aware keys, plus a ShortcutKeys renderer for tooltips and menus

A bottom-anchored phone composer that rides the on-screen keyboard, with attach sources and tools in a bottom sheet

First-run UI that stays calm

The settings layout for an AI app

The quiet line under an assistant turn that says memory changed, with View to read exactly what was saved and Undo to take it back

Everything the assistant remembers, searchable and editable in place

A header toggle for chats that stay out of history and memory, and the banner that says plainly what that means

The personalization editor

A connector directory with connect and disconnect states and per-tool permissions

Project files the assistant reads in every chat, each with its indexing state

Plan usage with tabular numbers and live reset times

Docks above the composer when a limit is near or reached

What a message or an agent run cost, in tabular figures, with the breakdown one click away

Degraded, outage or maintenance notice for a model or provider, with when it started, a link to the status page and a switch to a model that works

Share a chat as a snapshot

Refusal and warning messaging with a calm, non-judgmental tone and a next step every time

Tool renderer for memory saved, updated or forgotten, built on Tool call, with the exact text so people can see what the assistant now knows

chatcn components take plain props

Render any AG-UI agent with chatcn

Render LangGraph agents with chatcn

Keep your assistant-ui runtime and render its messages with chatcn text, reasoning and tool components, approvals included