Chat Components

Built for agent turns

A chatbot renders one text stream. An agent turn is a transcript: it thinks, calls tools, fails and retries, produces files, and runs long enough that the session itself becomes something you manage. Each of those has a real surface here.

• Reasoning. Collapsed “Thought for N seconds” above the answer, from an explicit reasoning prop or parsed out of <think> tags.
• Tool calls. Rows with a pending / running / done / error lifecycle, collapsible input and output, and readable headlines. Many calls fold behind “Used N tools”.
• Ask the user. AskQuestion is the Cursor questionnaire — radios, checkboxes, Other…, Skip and Continue. A pending Ask Question tool call renders it in the transcript.
• Real ordering. parts interleaves text and tool segments, so the turn reads in the order the agent produced it.
• Artifacts and code. Titled artifact cards with an optional preview and onOpen handoff, plus Streamdown markdown — GFM, Shiki, Mermaid, KaTeX.
• Long streams. The message list sticks to the bottom while tokens arrive and lets go the moment the reader scrolls up; the composer swaps send for stop.
• Sessions. A sidebar with rename, pin, delete, status dots, multi-line rows, drag-to-reorder, declarative drop zones, and keyboard dragging.

Quick start

In a project that already ran shadcn init, one command installs the starter block and every atom it composes.

Prefer to pick and choose? Every item on the left installs on its own. See Installation for the full list and the two build settings the markdown renderer needs.

What this is

This is a custom registry, not an npm package. Running shadcn add copies real TypeScript files into components/ui — you own them, you can edit them, and nothing upgrades behind your back.

• Standard tokens. Only the shadcn CSS variables — --background, --muted, --primary, --sidebar, --radius. Drop them into any shadcn theme and they take its colors.
• className merges last. Every component runs its classes through cn(), so your overrides win.
• Internals are addressable. Elements carry data-slot and state attributes, so a parent can restyle a composer surface or a tool row without a fork.
• Slots, not config. The sidebar and navbar take nodes — no hard-wired product navigation.

Why not the AI SDK?

Vercel’s AI SDK is a good stack, and this is not a replacement for it — it is a different bet about where the seam belongs.

• Protocol-agnostic. These components take plain props and callbacks. No useChat, no UIMessage, no required stream format — the ai package isn’t even a dependency. AI Elements is designed around the AI SDK’s message parts and hooks, which is zero glue if your backend speaks that protocol. If it doesn’t — a CLI agent, a LangChain service, a raw SSE endpoint, your own event union — you write one small adapter and the rest is normal React.
• Agent-first depth. The tool-call lifecycle, reasoning disclosure, artifacts, and the session sidebar are the core of this registry, not extras around a message bubble.
• UI only. The flip side: the AI SDK also gives you providers, tool calling, structured output, and a server runtime. This gives you none of that. Bring your own backend.
• Not exclusive. Keep useChat and map its parts onto ChatMessageData — the README has the adapter.

Components

Try it first