Shadcn AI Chat Blocks: Copilots, Panels and Grounded Answers
Chat UI looks solved until you build one. The bubbles take an afternoon. Then come the parts nobody demos: what fills the screen before the first message, how a reader removes a file they attached by mistake, what happens when the model is still typing and they want it to stop, how a citation gets back to its source, and where the panel goes on a phone.
These 12 blocks cover that ground. It starts with a full page copilot: a streaming transcript, a tabbed switcher over pinned and recent chats, model switching, and a docked composer with removable context chips. From there the surface moves, into a sticky panel beside a document that inserts its reply into the draft, a floating panel that answers a sentence you selected, and a sidebar that pushes the page instead of covering it.
The rest are the harder shapes. A split pane running one prompt against 2 models with a latency, output rate and cost scoreboard. A voice first panel where a held mic becomes a scrubbable turn. A thread held as a tree, so a regenerate adds a version on a fork rail rather than destroying the old answer. And a docs assistant that shows each article ticking from queued to read, then admits when the documentation does not cover the question and opens a ticket instead of guessing.
All AI Chat Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- AI Chat 1 AI copilot chat surface with streaming transcript and recent chats
- AI Chat 2 Docked AI assistant chat panel beside a page with insert into draft
- AI Chat 3 AI chat welcome screen with prompt starters and a docked composer
- AI Chat 4 Floating right chat sidebar that pushes the page and replies to a quoted sentence
- AI Chat 5 AI chat welcome screen where connected work apps set the answer scope
- AI Chat 6 Agentic side panel where the answers carry the controls
- AI Chat 7 Split pane model comparison running one prompt against two AI models
- AI Chat 8 Docked voice first assistant panel that answers in a different shape each time
- AI Chat 9 Branching AI chat thread with reply versions, cited sources and code artifacts
- AI Chat 10 AI chat welcome screen with scoped sources and structured answers
- AI Chat 11 AI chat stage with framed answer receipts on a live dot field
- AI Chat 12 Ask AI docs support panel that shows the knowledge base being read
The Composer Is the Hard Part
Every chat gets designed around the transcript, then ships with an input that cannot do the 4 things people actually need from it.
The composers here are built on InputGroup rather than a bare textarea: attachment chips that can be removed before sending, a model picker in the chrome, quick replies, a keyboard suggestion palette on a trigger character, and a stop control that is present while a reply streams instead of appearing after it finishes.
Scope lives there too. One block puts the composer inside a ReUI Frame whose footer is a live integrations strip, so switching Slack or Drive off changes what the assistant may read, and the reply comes back with a receipt per source and a Connect action on anything skipped. That is the difference between a grounded assistant and one that improvises.
Answers That Are Not Just Prose
A reply is rarely a paragraph. It is a plan waiting on approval, a set of times to choose between, a sortable Table of figures, a code artifact in typescript or sql, a comparison bar chart, or a callout carrying its own next action. The blocks render each of those as its own shape, with the model's working folded away behind a thought row and the sources its inline citations point back to listed underneath.
Trust comes from showing the work. Retrieval is visible rather than implied: the search runs, matched articles tick from queued to read, and the finished answer folds that into a receipt naming how many were read and how many survived into the answer. Helpful and not helpful voting sits on the turn, and a citation chip can be switched off.
Under all of it the transcript is a tree, not a list. An edit or a regenerate adds a version on a fork rail, so the answer somebody liked 3 turns ago is still reachable after they asked for a different one.
Built for Products That Ship an Assistant
- Streaming with a stop and a retry Tokens arrive over time, the scroller stays pinned until the reader scrolls up, stop interrupts a reply in flight, and a step that failed can be re-run without restarting the run.
- Zero states that do work Built on Empty and Item: live workspace stats, starters that fill the composer and attach their context, and resume rows for threads already open.
- Every placement, one system Full page, sticky beside a document, floating over the page, or a pushing sidebar, each falling back to a Sheet on mobile rather than being hidden there.
- Grounding you can see Source pickers, per-source receipts, retrieval that renders while it runs, and an assistant that says the knowledge base does not cover a question instead of inventing an answer.
Related Shadcn Block Categories
- Agents Blocks (10 blocks) The console behind the chat: run queues, approval inboxes, step traces, tool access matrices and eval reports.
- AI Ops Blocks (9 blocks) Provider routing, prompt registries, safety policy and the token spend ledger under every chat you ship.
- App Shell Blocks (21 blocks) The frames these panels dock into: sidebars, split layouts and headers that survive a second pane.
- Dashboard Blocks (8 blocks) Where an assistant usually lands, next to the metrics it is being asked about.
- Settings Blocks (16 blocks) Connected accounts, API keys and workspace preferences, the screens that decide what a chat is allowed to read.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (292) Browse 292 Shadcn Application blocks across 21 categories.
- Shadcn Data Grid Blocks (37) Browse 37 Shadcn Data Grid blocks across 8 categories.
- Shadcn Solutions Blocks (65) Browse 65 Shadcn Solutions blocks across 9 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 12 categories.
- Shadcn Marketing Blocks (40) Browse 40 Shadcn Marketing blocks across 5 categories.
- Shadcn AI & Agents Blocks (12) Browse 12 Shadcn AI & Agents blocks across 1 categories.