# chatcn

> React chatbot and AI agent UI components for shadcn: tool calls, reasoning, approvals, diffs, voice and every state in between. Works with the AI SDK, assistant-ui, AG-UI and LangGraph. 437 icons. Free to use.

Components install with the shadcn CLI from the registry at /r/{name}.json and land in components/ui/chatcn/. They take plain props and follow the chatcn data contract, which mirrors AI SDK UIMessage parts. Keep the chrome calm: one accent from the theme, and red, green, amber and blue only where they carry meaning (diffs, status, errors), always with an icon or label. No gradients, no emoji.

## Get started

- [Introduction](https://chatcn.dev/docs/index.md): shadcn components for AI chat and agent interfaces: tool calls, reasoning, approvals, diffs, voice and every state in between.
- [Installation](https://chatcn.dev/docs/installation.md): Add chatcn components to a React project that uses Tailwind CSS v4 and the shadcn CLI.
- [Use with AI](https://chatcn.dev/docs/agents.md): Point Claude Code, Cursor, v0 or any coding agent at chatcn and let it compose screens for you.
- [License](https://chatcn.dev/docs/license.md): Free to use in personal and commercial projects. Not open source, and not for redistribution as a kit.
- [chatcn Pro](https://chatcn.dev/docs/chatcn-pro.md): Coming soon for $99 once: full agent app templates, premium blocks, image and video generation, more component variants and the extended icon set. Custom work is open today.
- [Migrating from AI Elements](https://chatcn.dev/docs/migrate-from-ai-elements.md): Every AI Elements component and its chatcn counterpart, including the workspace pieces that have no shadcn replacement.

## Guides

- [Build a coding agent UI in 10 minutes](https://chatcn.dev/docs/guides/coding-agent.md): An AI SDK route with tools that wait for approval, useChatcnChat on the client, and the coding agent block rendering every tool call, diff and command.
- [Use with any backend](https://chatcn.dev/docs/guides/any-backend.md): The data contract every component reads, the AG-UI and LangGraph adapters, your own event stream folded into messages, and the mock transport for tests.
- [Generative UI and MCP Apps](https://chatcn.dev/docs/guides/generative-ui.md): Let the model draw charts, forms and confirmations from a Zod-checked spec, stream specs from tools and data parts, and host MCP Apps in the thread.
- [Theming in depth](https://chatcn.dev/docs/guides/theming-in-depth.md): How the tokens reach your CSS, the accent and where it may appear, matching a shadcn theme, dark mode, density, a brand that stays monochrome, and pairing with NeonKit.
- [Accessibility](https://chatcn.dev/docs/guides/accessibility.md): What chatcn guarantees for each kind of component, how it is tested, and what your app still has to do.
- [Performance](https://chatcn.dev/docs/guides/performance.md): Streaming without layout shift, keeping long threads fast, lazy Shiki, KaTeX and Mermaid, measured bundle sizes per item, and notes on the React Compiler.
- [Migrate from assistant-ui](https://chatcn.dev/docs/guides/migrate-from-assistant-ui.md): Keep the assistant-ui runtime and swap only the rendering, or move to plain props. A concept map, both paths in code, and every component and primitive with its chatcn counterpart.
- [Migrate from prompt-kit](https://chatcn.dev/docs/guides/migrate-from-prompt-kit.md): Every prompt-kit component and block with its chatcn counterpart, and what behaves differently.

## Foundations

- [Theming](https://chatcn.dev/docs/theming.md): Pick a preset or build your own theme, install it with one command or paste a few variables. OKLCH tokens, one accent, light and dark.
- [Motion](https://chatcn.dev/docs/motion.md): Short, interruptible, origin-aware motion, with a reason for every animation.
- [Icons](https://chatcn.dev/docs/icons.md): 437 icons on one 24 px grid, drawn as continuous strokes, with a set made for agents.
- [Data contract](https://chatcn.dev/docs/data-contract.md): One message shape for every component, structurally compatible with AI SDK, with scripted streams for demos and tests.

## Components

- [Chatbot](https://chatcn.dev/docs/components/chatbot.md): A complete chat app surface: streaming Markdown, reasoning, tool calls with approvals, message actions, an empty state and a composer with attachments, model picker and reasoning effort. One install, a few lines to wire to AI SDK.
- [AI product hero](https://chatcn.dev/docs/components/ai-product-hero.md): A landing hero for an agent product: an editorial headline row over a live agent run that tracks its own steps and the metric it fixes.
- [AI pricing](https://chatcn.dev/docs/components/ai-pricing.md): Pricing for an agent product: plan columns with a live usage estimate in each, monthly or yearly billing, overage math and a model comparison.
- [Coding agent](https://chatcn.dev/docs/components/coding-agent.md): A Claude Code and Cursor style coding agent in one block: the thread with reasoning, tool calls and approvals, a workspace with changed files, diffs and the agent's terminal, todos, a message queue, permission mode and a context meter.
- [Research agent](https://chatcn.dev/docs/components/research-agent.md): A deep research surface: the conversation with a live progress card, search results streaming in, every source found, read and cited, and the finished report with citations. A composer with deep research mode. Everything is derived from the messages.
- [Agent ops](https://chatcn.dev/docs/components/agent-ops.md): Mission control for background agents: every run in one inbox, every approval in one queue, the selected run's live trace and an activity feed. Approve from anywhere and the run picks up where it stopped.
- [App builder](https://chatcn.dev/docs/components/app-builder.md): Describe an app and watch it build: chat on one side, the running app on the other with versions, device sizes, a code view that streams files as they are written, and select and comment tools over the preview.
- [Menu](https://chatcn.dev/docs/components/menu.md): Dropdown menu on Base UI: actions, checkbox and radio items, groups, shortcuts and submenus, with concentric radii and keyboard-aware motion.
- [Popover](https://chatcn.dev/docs/components/popover.md): Floating panel on Base UI with the kit's surface, origin-aware motion and no animation when opened from the keyboard.
- [Dialog](https://chatcn.dev/docs/components/dialog.md): A Base UI dialog on the chatcn surface. Traps and returns focus, closes on Esc, and grows from the center in 220 ms.
- [Conversation](https://chatcn.dev/docs/components/conversation.md): The thread scroller. Sticks to the bottom only while you are there, lets go the moment you scroll up, and scrolls each new question to the top so the reply has room.
- [Message](https://chatcn.dev/docs/components/message.md): One turn in the thread. Users get a subtle bubble, the assistant writes like a document, and every lifecycle state has a designed look.
- [Message parts](https://chatcn.dev/docs/components/message-parts.md): Renders a message's parts in order: text, reasoning, tool calls, sources, files and app data, with a quiet fallback for anything unknown.
- [Message actions](https://chatcn.dev/docs/components/message-actions.md): The toolbar under a message: copy, retry, edit, feedback, share and more. Visible on the latest reply and on touch, revealed instantly on hover everywhere else.
- [Message feedback](https://chatcn.dev/docs/components/message-feedback.md): Thumbs up and down. The icon fills when chosen, thumbs down asks what went wrong, and both end with a quiet thank-you.
- [Message edit](https://chatcn.dev/docs/components/message-edit.md): Inline editing of a user message. It grows with the text, warns how many replies saving will replace, and never saves in the middle of IME composition.
- [Branch navigator](https://chatcn.dev/docs/components/branch-navigator.md): Moves between the versions of an edited message or a regenerated reply: previous, 2 / 3, next.
- [Message error](https://chatcn.dev/docs/components/message-error.md): A failed reply with the fix right next to it. Network, rate limit with a live countdown, context too long, content filter and a generic failure.
- [Scroll to bottom](https://chatcn.dev/docs/components/scroll-to-bottom.md): The jump-to-latest pill. Appears once you are a viewport away or when something new lands below, counts what you missed, and sticks to the bottom again when pressed.
- [Thinking indicator](https://chatcn.dev/docs/components/thinking-indicator.md): The pending state before the first token. Nothing for 300 ms, then a shimmering Thinking that stays at least 400 ms, so it never flashes.
- [Streaming caret](https://chatcn.dev/docs/components/streaming-caret.md): The kit's signature mark: a small rounded square at the end of text the model is writing. Solid while tokens flow, a slow blink while waiting, gone when done.
- [System notice](https://chatcn.dev/docs/components/system-notice.md): Divider-style events inside the thread: model switched, context compacted, memory updated, agent joined.
- [Checkpoint](https://chatcn.dev/docs/components/checkpoint.md): A restore point in the thread. Rewind to here asks first and lists exactly what will be lost: the messages after it and every file change.
- [Empty state](https://chatcn.dev/docs/components/empty-state.md): The first screen of a chat: a greeting, one line, the composer and up to four suggestions. No illustration.
- [Suggestions](https://chatcn.dev/docs/components/suggestions.md): Starter prompts and follow-ups as chips, rows or cards, with a scrolling chip row that fades only the edges hiding more.
- [Prompt input](https://chatcn.dev/docs/components/prompt-input.md): 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 button](https://chatcn.dev/docs/components/send-button.md): Send that becomes Stop in the same footprint: the arrow lifts and blurs out while the kit's square mark settles in.
- [Attachment](https://chatcn.dev/docs/components/attachment.md): Files in the composer as chips or cards: image thumbnails with a hairline, type icons, sizes, a determinate upload ring, errors with retry, and a 140 ms removal.
- [Drop zone](https://chatcn.dev/docs/components/drop-zone.md): Composer-sized and full-page drop targets that say before the drop whether files will be accepted, and why not.
- [Model picker](https://chatcn.dev/docs/components/model-picker.md): Model menu for the composer footer, grouped by provider, with search, capability glyphs, a New tag and your own provider marks.
- [Reasoning effort](https://chatcn.dev/docs/components/reasoning-effort.md): How hard the model thinks: a segmented Low, Medium, High control with a spring-driven indicator, or a compact Think toggle.
- [Mode switcher](https://chatcn.dev/docs/components/mode-switcher.md): The tools menu: web search, deep research, canvas and image. Active modes become chips in the composer and can change its placeholder.
- [Dictation button](https://chatcn.dev/docs/components/dictation-button.md): Microphone button with permission, listening with live level bars, transcribing and a blocked state that says how to fix it. Backed by useChatcnDictation.
- [Context chips](https://chatcn.dev/docs/components/context-chips.md): The context the agent will read with the next message: files, a selection, a link, the current page. Removable, with overflow folded into +3.
- [Character counter](https://chatcn.dev/docs/components/character-counter.md): Character or token budget for the composer, with soft and hard limits, a ring variant and announcements only at thresholds.
- [Rich prompt input](https://chatcn.dev/docs/components/rich-prompt-input.md): The composer with a rich editor: inline chips for @ mentions and / commands, prompt variables filled with Tab, long pastes as attachments, and a value serialized to text, mentions and commands.
- [Mention menu](https://chatcn.dev/docs/components/mention-menu.md): The @ popup for files, folders, symbols, people, agents and connectors: grouped, fuzzy filtered with the matched characters emphasized, recent first, anchored to the caret.
- [Slash menu](https://chatcn.dev/docs/components/slash-menu.md): The / popup for commands and skills, with categories, descriptions, shortcuts, the active command's arguments, and a ghost argument hint after insertion.
- [Inline chip](https://chatcn.dev/docs/components/inline-chip.md): A token inside text for a mention, file, URL, command or prompt variable. Shares the prose baseline, inverts when selected and removes as one unit.
- [Markdown](https://chatcn.dev/docs/components/markdown.md): Streaming Markdown for assistant answers. Unfinished syntax heals as it arrives, finished blocks never re-render, and code, tables, math and diagrams hold their space from the first character.
- [Streaming text](https://chatcn.dev/docs/components/streaming-text.md): Plain text that streams in with the signature caret, an optional cadence buffer and one announcement on completion.
- [Code block](https://chatcn.dev/docs/components/code-block.md): Restrained syntax highlighting that keeps up with streaming, with copy, wrap, line numbers, highlighted lines, long-block collapse and multi-file tabs.
- [Inline code](https://chatcn.dev/docs/components/inline-code.md): Mono at 0.9em on a quiet fill. Commands and ids can copy on click.
- [Table](https://chatcn.dev/docs/components/table.md): Tables that stay readable at any width: two-way scroll under a sticky header, copy as Markdown, CSV or TSV, and an expanded view.
- [Math](https://chatcn.dev/docs/components/math.md): KaTeX math, inline and display, loaded on first use. The source holds the space while it loads or streams.
- [Mermaid](https://chatcn.dev/docs/components/mermaid.md): Mermaid diagrams in the chatcn palette, with source view, zoom, pan and fullscreen. Mermaid loads on first use.
- [Image](https://chatcn.dev/docs/components/image.md): An image inside a message: holds its final size from the first paint, blurs up from a placeholder, fails gracefully and opens a full-screen lightbox.
- [Image grid](https://chatcn.dev/docs/components/image-grid.md): One to four images in a fixed-shape grid, with a +N tile for the rest and a shared lightbox you can page through.
- [File card](https://chatcn.dev/docs/components/file-card.md): A file the agent made: type icon, a name that never hides its extension, size, preview and download, with generating and error states.
- [Link preview](https://chatcn.dev/docs/components/link-preview.md): 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.
- [JSON viewer](https://chatcn.dev/docs/components/json-viewer.md): A collapsible, searchable tree for tool inputs and outputs, with copy path and copy value on every row and full keyboard navigation.
- [ANSI output](https://chatcn.dev/docs/components/ansi-output.md): Terminal output with ANSI colors mapped onto the kit palette for both themes, carriage-return progress bars collapsed and incremental parsing for streams.
- [Tool call](https://chatcn.dev/docs/components/tool-call.md): Shows an agent tool call through its whole life: streaming input, approval, running, output, failure, denial and cancellation.
- [Trace](https://chatcn.dev/docs/components/trace.md): One line primitive for every agent step on a vertical rail: status glyph, label, mono detail and duration, with ten states and expandable details.
- [Trace group](https://chatcn.dev/docs/components/trace-group.md): Folds consecutive steps into one line, Read 6 files, with a live line that shows what the agent is doing right now.
- [Reasoning](https://chatcn.dev/docs/components/reasoning.md): Model reasoning behind one quiet line: Thinking with a live timer while it streams, then Thought for 12 s. Collapsed by default, never closed on a timer.
- [Step timer](https://chatcn.dev/docs/components/step-timer.md): Elapsed and final duration for an agent step, in tabular figures that tick once per second.
- [Run status](https://chatcn.dev/docs/components/run-status.md): The state of a whole agent run for a header or thread row: idle, running, waiting for input, done, failed or stopped, with elapsed time.
- [Sources](https://chatcn.dev/docs/components/sources.md): The sources behind an answer: a stack of letter tiles and a count, expanding to a numbered list that matches the citations.
- [Citation](https://chatcn.dev/docs/components/citation.md): An inline numbered source with a hover card: title, site, the supporting passage highlighted, open and copy link.
- [Web search tool](https://chatcn.dev/docs/components/tool-web-search.md): 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.
- [Web fetch tool](https://chatcn.dev/docs/components/tool-web-fetch.md): A page fetch: the address, the page title and an excerpt of what the agent read.
- [File read tool](https://chatcn.dev/docs/components/tool-file-read.md): A file read: path and line range in the header, a numbered preview of what the agent saw.
- [File edit tool](https://chatcn.dev/docs/components/tool-file-edit.md): A file edit: path and +12 -3 in the header, a unified mini diff that reads without color. During approval, the diff is what the user approves.
- [File write tool](https://chatcn.dev/docs/components/tool-file-write.md): A new file: the path in the header, then a file card with its name, size and first lines.
- [Code search tool](https://chatcn.dev/docs/components/tool-search-code.md): A grep or glob: the pattern and match count in the header, matches grouped by file with file:line and the match highlighted.
- [Shell tool](https://chatcn.dev/docs/components/tool-bash.md): A shell command: a monochrome terminal that streams output and stays pinned to the bottom, the exit code, and Stop while it runs.
- [Code execution tool](https://chatcn.dev/docs/components/tool-code-exec.md): Code run in a sandbox: the code with line numbers, then output, errors and the result.
- [MCP tool](https://chatcn.dev/docs/components/tool-mcp.md): A call to a tool on an MCP server or connector: the server with its mark, the tool name, input and output, with approval.
- [Tool fallback](https://chatcn.dev/docs/components/tool-fallback.md): The renderer for tools nobody wrote a renderer for: summary first, JSON one click away. Also home to the renderer map that ties tool names to renderers.
- [Browser tool](https://chatcn.dev/docs/components/tool-browser.md): 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.
- [Plan](https://chatcn.dev/docs/components/plan.md): The agent's proposed plan, from the first streamed step to the last one done: approve, edit or reject it before anything runs.
- [Todo list](https://chatcn.dev/docs/components/todo-list.md): 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.
- [Task](https://chatcn.dev/docs/components/task.md): A single task row: status, title, mono detail, a live timer that becomes a duration, and details on demand.
- [Subagent](https://chatcn.dev/docs/components/subagent.md): A subagent folded to one line that says what it is doing right now. Expand it for its own trace on a rail and its result.
- [Handoff](https://chatcn.dev/docs/components/handoff.md): The marker between two agents in a transcript, with the reason in plain words so nobody wonders why the voice changed.
- [Queued messages](https://chatcn.dev/docs/components/queued-messages.md): Messages typed while the agent works, in a visible queue: send after this run or steer now, edit in place, reorder, remove with undo.
- [Context meter](https://chatcn.dev/docs/components/context-meter.md): How full the context window is, as a ring or a bar, with a breakdown on click and a warning before compaction.
- [Agent card](https://chatcn.dev/docs/components/agent-card.md): Who an agent is: name, what it does, the model behind it, the tools it may call and what it is doing now.
- [Workflow](https://chatcn.dev/docs/components/workflow.md): A node graph of an agent workflow with live status, rounded SVG edges and keyboard-focusable nodes. No dependencies.
- [Computer view](https://chatcn.dev/docs/components/computer-view.md): A live view of the agent's screen: a cursor that glides to each action, a label for what it is doing, take over and hand back, and a replay scrubber with a timeline and step thumbnails.
- [Approval mode](https://chatcn.dev/docs/components/approval-mode.md): 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.
- [Approval inbox](https://chatcn.dev/docs/components/approval-inbox.md): Every pending approval across runs in one list. Approve or deny in a batch, filter by run or tool, and expand any row to read the reason and the exact tool input.
- [Questionnaire](https://chatcn.dev/docs/components/questionnaire.md): Clarifying questions from the agent, one at a time: single choice, multiple choice with Other, and free text, with Skip, a stepper and a summary before sending.
- [Permission mode](https://chatcn.dev/docs/components/permission-mode.md): A compact selector for the composer: Ask before edits, Edit automatically or Plan only, shown as an icon and a short label.
- [Background run](https://chatcn.dev/docs/components/background-run.md): A card for a detached agent task: what it is, where it runs, the latest step, elapsed time, a 2 px progress line and Open or Cancel.
- [Run inbox](https://chatcn.dev/docs/components/run-inbox.md): Background runs in one list, with a Needs input filter and static unread dots. Arrow keys move through the rows.
- [Agent notification](https://chatcn.dev/docs/components/agent-notification.md): 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.
- [Takeover banner](https://chatcn.dev/docs/components/takeover-banner.md): The agent is controlling the browser, with Take over, Pause and Stop, and the reverse: You are in control, with Hand back.
- [Agent lanes](https://chatcn.dev/docs/components/agent-lanes.md): Parallel agents side by side, each with its status, current step and streaming output. Compare lines up their results; Use this one picks the winner.
- [Diff viewer](https://chatcn.dev/docs/components/diff-viewer.md): Review an agent's code changes: unified or split, word-level highlights, collapsed unchanged lines, per-hunk accept and reject, streaming patches and a guard for very large files. Red and green by default, with a gray tone.
- [Changed files](https://chatcn.dev/docs/components/changed-files.md): The files an agent changed, with status letters, dimmed directories, +/- counts and a five-cell bar. Selecting a file opens its diff.
- [Commit card](https://chatcn.dev/docs/components/commit-card.md): A commit or pull request the agent made. The message streams in while drafting, then the short sha, branch, files changed, link and push land in place.
- [File tree](https://chatcn.dev/docs/components/file-tree.md): The files an agent touched, as a real WAI-ARIA tree: keyboard navigation with typeahead, change markers, churn counts, indentation guides and virtualization for large repositories.
- [Terminal](https://chatcn.dev/docs/components/terminal.md): 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.
- [Test results](https://chatcn.dev/docs/components/test-results.md): A test run as the agent sees it: counts that double as filters, progress while running, failures that open to the error, diff and stack, and rerun.
- [Sandbox](https://chatcn.dev/docs/components/sandbox.md): The machine an agent works in: status, CPU and memory, open ports with links, a logs drawer and a files shortcut.
- [Preview toolbar](https://chatcn.dev/docs/components/preview-toolbar.md): A floating toolbar over a live preview for pointing at what to change: select an element, edit text, draw or comment, with single-key shortcuts and a selection outline.
- [Stack trace](https://chatcn.dev/docs/components/stack-trace.md): An error stack that leads with your code: app frames in front, dependency and runtime frames folded by package, and file and line links into your editor.
- [Environment variables](https://chatcn.dev/docs/components/environment-variables.md): Environment variables an agent needs or has set: masked values with reveal and copy, copy as .env, and a warning that says which required keys are missing and where to add them.
- [Research progress](https://chatcn.dev/docs/components/research-progress.md): A deep research run from plan to report: four phases, the sources read, elapsed time, the page being read right now, and Cancel.
- [Research report](https://chatcn.dev/docs/components/research-report.md): A long report built for reading: 68ch measure, a table of contents that follows you, citations that preview and jump to sources, and export.
- [Search results](https://chatcn.dev/docs/components/search-results.md): Web results from a search tool in three views: a full list, a compact list and an image grid, with the query and result count on top.
- [Source document](https://chatcn.dev/docs/components/source-document.md): A document source with its cited page. Opens the document with the passage highlighted and scrolled into view.
- [Document viewer](https://chatcn.dev/docs/components/document-viewer.md): Page sheets with the cited passage highlighted, a rule in the margin and page navigation that follows your scroll.
- [Canvas](https://chatcn.dev/docs/components/canvas.md): A document canvas for writing with an agent: select to ask, suggested edits that stream in place, accept or reject each one, and version history.
- [Selection toolbar](https://chatcn.dev/docs/components/selection-toolbar.md): A floating toolbar over selected text with Ask, Rewrite, Explain and Copy. Ask turns it into a question field.
- [Inline suggestion](https://chatcn.dev/docs/components/inline-suggestion.md): Ghost text completion after the caret in a plain textarea. Tab accepts, Esc dismisses.
- [Resizable](https://chatcn.dev/docs/components/resizable.md): Split panes with pointer and keyboard resizing, pixel or percent limits, collapsible panels and a hairline handle. No third-party dependency.
- [Artifact](https://chatcn.dev/docs/components/artifact.md): The inline card that stands for an artifact in a message. It shows what is being written while it streams and opens the artifact panel.
- [Artifact panel](https://chatcn.dev/docs/components/artifact-panel.md): The side panel for artifacts: versions, Code and Preview, copy, download and full screen. Resizable on desktop, a bottom sheet on phones.
- [Artifact versions](https://chatcn.dev/docs/components/artifact-versions.md): Step through artifact versions or pick one from a list, with edit times and line diff counts to the previous version.
- [Web preview](https://chatcn.dev/docs/components/web-preview.md): An iframe preview for apps an agent builds: URL bar with history, device sizes, a browser style loading bar, a crash view and a console drawer.
- [JSX preview](https://chatcn.dev/docs/components/jsx-preview.md): Renders JSX written by a model without running it. Streaming tolerant, allowlisted and calm when it cannot render.
- [AI SDK adapter](https://chatcn.dev/docs/components/ai-sdk.md): Bind useChat from AI SDK 7 to chatcn actions, and run it with a scripted transport when there is no server.
- [Generative UI renderer](https://chatcn.dev/docs/components/gen-ui-renderer.md): Renders a JSON spec from the model as chatcn widgets: validated with Zod, drawn while it streams, and safe when the model gets it wrong. Accepts A2UI-style trees too.
- [Chart](https://chatcn.dev/docs/components/chart.md): 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. No chart library.
- [Stat card](https://chatcn.dev/docs/components/stat-card.md): A figure with its delta and a sparkline. The delta knows whether up is good, the value uses tabular figures, and a group splits several stats with hairlines instead of nesting cards.
- [Comparison table](https://chatcn.dev/docs/components/comparison-table.md): Options side by side with the best value in each row marked, the recommended option tinted, and a choose button per column. The attribute column stays put while options scroll.
- [Form widget](https://chatcn.dev/docs/components/form-widget.md): A form the agent asks the user to fill in. Validates on blur and on submit with messages that say how to fix the value, hands values back through a callback, then becomes a read-only summary.
- [Calculator widget](https://chatcn.dev/docs/components/calculator-widget.md): A small interactive tool inside an answer. Sliders and exact fields drive live results, from formulas the model writes or a compute function you pass.
- [Card carousel](https://chatcn.dev/docs/components/card-carousel.md): Horizontal results such as places, products or events. Cards snap one by one, arrows page the rail and disable at either end, and images hold their frame while they load.
- [Map placeholder](https://chatcn.dev/docs/components/map-placeholder.md): 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. Drop in a static map or a live one when you have it.
- [Weather card](https://chatcn.dev/docs/components/weather-card.md): The reference generative widget: current conditions, an hourly strip and a week of ranges on one shared scale, like a thermometer laid flat.
- [Timeline widget](https://chatcn.dev/docs/components/timeline-widget.md): Events or steps on a vertical rail. In steps, the rail is solid up to the current step and quiet after it, so progress reads without color.
- [Confirmation card](https://chatcn.dev/docs/components/confirmation-card.md): The safe pattern for actions an agent takes on the user's behalf: everything that will happen in plain rows, one explicit confirm, and a receipt afterwards. Confirm stays blocked while the summary streams or after the quote expires.
- [MCP app frame](https://chatcn.dev/docs/components/mcp-app-frame.md): Hosts an MCP App (a ui:// resource, text/html;profile=mcp-app) in a sandboxed iframe through the official app bridge: loading, errors, resize to content, chatcn tokens as host styles, full screen, picture in picture, and tool input and output passthrough.
- [Voice session](https://chatcn.dev/docs/components/voice-session.md): One surface for voice and text: the orb carries the call state, a shared transcript holds spoken and typed turns, and the user can barge in or switch to text mid-conversation.
- [Voice orb](https://chatcn.dev/docs/components/voice-orb.md): A monochrome sphere of fine contour lines that carries the whole voice state machine through form and motion: idle, connecting, listening, thinking, speaking, interrupted, muted and error.
- [Waveform](https://chatcn.dev/docs/components/waveform.md): Live input and output levels as a scrolling history, in bars or one continuous line, or a recorded waveform with its played portion.
- [Audio visualizer](https://chatcn.dev/docs/components/audio-visualizer.md): Agent audio in five monochrome forms: bars, radial, grid, line and dots, with connecting and thinking motion when there is no sound.
- [Voice controls](https://chatcn.dev/docs/components/voice-controls.md): The call bar: mute with a live input level and a microphone menu, speaker, captions, your own controls and End.
- [Transcript](https://chatcn.dev/docs/components/transcript.md): 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.
- [Audio player](https://chatcn.dev/docs/components/audio-player.md): Read-aloud and audio output player: play and pause, a seek bar you can drag or step with keys, time in tabular figures, speed, and a compact mini player for message actions.
- [Voice picker](https://chatcn.dev/docs/components/voice-picker.md): Choose a voice after hearing it. Each voice has its own preview button, which becomes stop with a progress ring while the sample plays.
- [Audio level](https://chatcn.dev/docs/components/use-chatcn-audio-level.md): A Web Audio level meter for a microphone stream or a media element: a perceptual level and log-spaced frequency bands for orbs, waveforms and visualizers.
- [Image generation](https://chatcn.dev/docs/components/image-generation.md): A generated image in a conversation: prompt and settings, one to four variations at their final shape, a blur-to-sharp scan reveal while the model works, and actions for the one you pick.
- [Image edit region](https://chatcn.dev/docs/components/image-edit-region.md): Mark part of an image with a rectangle or a brush, then describe the change. The mask shows as monochrome hatching that reads on any image.
- [Video generation](https://chatcn.dev/docs/components/video-generation.md): A video job in a conversation: queue position, progress with the time left, a poster frame revealed as it renders, then a compact player with the clip's length and resolution.
- [Media gallery](https://chatcn.dev/docs/components/media-gallery.md): A library of generated images and videos: filter by kind, a square grid grouped by day, a full-screen viewer and multi-select.
- [Image generation tool](https://chatcn.dev/docs/components/tool-image-gen.md): The renderer for image generation tool calls. The prompt sits in the header, the frames reveal while the tool runs, and refusals read calmly.
- [Chat layout](https://chatcn.dev/docs/components/chat-layout.md): The app shell: sidebar, thread and an optional side panel on the shared Resizable. Below 768 px the sidebar becomes a drawer and the panel a full-screen sheet.
- [Chat sidebar](https://chatcn.dev/docs/components/chat-sidebar.md): 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.
- [Thread list](https://chatcn.dev/docs/components/thread-list.md): The rows and groups the sidebar is built from: a roving-focus list, date grouping, inline rename, a row menu and a status mark for running, waiting, failed and unread threads.
- [Project switcher](https://chatcn.dev/docs/components/project-switcher.md): Switches the project a sidebar shows. Each project lists its knowledge files, instructions, sharing and indexing, so picking one says what context the next chat starts with.
- [App mode switcher](https://chatcn.dev/docs/components/app-mode-switcher.md): A segmented control for product modes like Chat, Work and Code. One clipped pill slides between segments, locked modes say why, and the whole control freezes during a run.
- [Chat header](https://chatcn.dev/docs/components/chat-header.md): 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.
- [Command palette](https://chatcn.dev/docs/components/command-palette.md): 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.
- [Chat search](https://chatcn.dev/docs/components/chat-search.md): Full-text search across chats with the matched words marked in titles and snippets, role filters, recent chats and full keyboard control.
- [Keyboard shortcuts](https://chatcn.dev/docs/components/keyboard-shortcuts.md): A dialog with every shortcut grouped by area, a filter and platform-aware keys, plus a ShortcutKeys renderer for tooltips and menus.
- [Composer mobile](https://chatcn.dev/docs/components/composer-mobile.md): A bottom-anchored phone composer that rides the on-screen keyboard, with attach sources and tools in a bottom sheet.
- [Onboarding](https://chatcn.dev/docs/components/onboarding.md): First-run UI that stays calm: a skippable step flow with live vignettes, a setup checklist, and a capability tour anchored to real controls.
- [Settings panel](https://chatcn.dev/docs/components/settings-panel.md): The settings layout for an AI app: a sections nav and panes, with groups, rows, switches and segmented controls. The nav moves above the pane when the panel is narrow.
- [Memory chip](https://chatcn.dev/docs/components/memory-chip.md): 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.
- [Memory manager](https://chatcn.dev/docs/components/memory-manager.md): Everything the assistant remembers, searchable and editable in place. Delete hides a memory at once and offers Undo for 5 seconds before it is really gone.
- [Temporary chat](https://chatcn.dev/docs/components/temporary-chat.md): A header toggle for chats that stay out of history and memory, and the banner that says plainly what that means.
- [Custom instructions](https://chatcn.dev/docs/components/custom-instructions.md): The personalization editor: a response style with a sample answer, what the assistant should know about you, and how it should respond, with live character counts.
- [Connectors](https://chatcn.dev/docs/components/connectors.md): A connector directory with connect and disconnect states and per-tool permissions: Allow, Ask or Deny for every tool a connector exposes.
- [Knowledge base](https://chatcn.dev/docs/components/knowledge-base.md): Project files the assistant reads in every chat, each with its indexing state: queued, indexing with progress, ready with the tokens it adds, or failed with the reason and Retry.
- [Usage meter](https://chatcn.dev/docs/components/usage-meter.md): Plan usage with tabular numbers and live reset times: one bar per limit, a warning line, a Limit reached state and an upgrade slot.
- [Rate limit banner](https://chatcn.dev/docs/components/rate-limit-banner.md): Docks above the composer when a limit is near or reached: how many are left and until when, then a live countdown and a model that still has room.
- [Cost display](https://chatcn.dev/docs/components/cost-display.md): What a message or an agent run cost, in tabular figures, with the breakdown one click away: input, cached input, output and tool calls, each with tokens and cost.
- [Model status](https://chatcn.dev/docs/components/model-status.md): 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 dialog](https://chatcn.dev/docs/components/share-dialog.md): Share a chat as a snapshot: who can open it, the link with Copy link, a note that later messages stay private, Update link, and export as Markdown or PDF.
- [Safety notice](https://chatcn.dev/docs/components/safety-notice.md): Refusal and warning messaging with a calm, non-judgmental tone and a next step every time: refusals, warnings that need one decision, covered sensitive content and the disclaimer line.
- [Tool memory](https://chatcn.dev/docs/components/tool-memory.md): 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.
- [Adapters](https://chatcn.dev/docs/components/adapters.md): chatcn components take plain props. Adapters turn AI SDK, AG-UI, LangGraph and assistant-ui runtimes into those props, so you keep your backend and swap only the UI.
- [AG-UI adapter](https://chatcn.dev/docs/components/ag-ui.md): Render any AG-UI agent with chatcn: a pure reducer from protocol events to messages, and a hook around HttpAgent with interrupts as approvals.
- [LangGraph adapter](https://chatcn.dev/docs/components/langgraph.md): Render LangGraph agents with chatcn: SDK messages and run streams mapped to parts, with human-in-the-loop interrupts as approvals.
- [assistant-ui adapter](https://chatcn.dev/docs/components/assistant-ui.md): Keep your assistant-ui runtime and render its messages with chatcn text, reasoning and tool components, approvals included.

## Optional

- [Full documentation](https://chatcn.dev/llms-full.txt)
- [Registry index](https://chatcn.dev/r/registry.json)
- [Docs MCP endpoint](https://chatcn.dev/api/mcp)