Shadcn AI Chat Blocks for Copilots and Assistant Panels

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

When to use

A full page assistant chat, new chat welcome screen or 2 model comparison inside an AI product
A copilot docked beside the page it works on, or opened from a launcher in the page corner
Answers that show the work behind them: sources read, tool steps, plans to approve and run cost

When not to use

The product layout around the chat: a sidebar of threads, workspaces and account menus: use the App Shell blocks
A plain overlay chat panel opened from a button, with suggestion chips and a composer: use the Sheet blocks
A highlighted snippet with a filename header and copy button, outside any conversation: use the Code Block component

Agent notes

Each AiChat root sizes itself to the viewport with h-svh, or min-h-svh in ai-chat-5; give it your layout's height inside an app shell
Every reply is canned content from the block's data file, played back on setTimeout and setInterval timers; stream your model's output there instead

Third-party API docs

Shiki v4: API reference, docs, used by 8 of 13 blocks
Sonner v2: API reference, docs, used by 7 of 13 blocks
Motion v12: API reference, docs, used by 1 of 13 blocks (the docs follow the latest Motion, with no React API break since v12)
next-themes: API reference, docs, used by 1 of 13 blocks
React Resizable Panels v4: API reference, docs, used by 1 of 13 blocks (v4 names its parts Group, Panel and Separator (v3 docs say PanelGroup))

Markdownhttps://reui.io/blocks/ai-agents/ai-chat.md

MCPsearch({ query: "ai chat", type: "block", category: "ai-chat" })

Full index for agents:llms.txtReUI MCP setup

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 13 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.

Copilot Shell AI copilot chat surface with streaming transcript and recent chats
Docked Assistant Docked AI assistant chat panel beside a page with insert into draft
Prompt Starter Welcome AI chat welcome screen with prompt starters and a docked composer
Quote Reply Sidebar Floating right chat sidebar that pushes the page and replies to a quoted sentence
Connected Apps Chat AI chat welcome screen where connected work apps set the answer scope
Agentic Task Panel Agentic side panel where the answers carry the controls
Model Comparison Split pane model comparison running one prompt against two AI models
Voice Assistant Panel Docked voice first assistant panel that answers in a different shape each time
Branching Thread Branching AI chat thread with reply versions, cited sources and code artifacts
Structured Answers AI chat welcome screen with scoped sources and structured answers
Answer Receipts AI chat stage with framed answer receipts on a live dot field
Docs Support Assistant Ask AI docs support panel that shows the knowledge base being read
Corner Chat Popup Corner AI chat popup with history, expand and page context

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, a pushing sidebar, or a popup opened from a corner launcher. The side panels fall back to a Sheet on mobile rather than being hidden there, and on a phone the popup takes almost the whole screen.
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 (35 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 (303) Browse 303 Shadcn Application blocks across 23 categories.
Shadcn Data Grid Blocks (44) Browse 44 Shadcn Data Grid blocks across 9 categories.
Shadcn Charts Blocks (51) Browse 51 Shadcn Charts blocks across 10 categories.
Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
Shadcn AI & Agents Blocks (20) Browse 20 Shadcn AI & Agents blocks across 3 categories.
Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.

Frequently Asked Questions

Do these work with the Vercel AI SDK, LangChain, or my own endpoint?

All of them, because the blocks are UI only. Messages, streaming state, tool traces, citations, sources and run status are typed local arrays you replace with your own data. Nothing imports an AI framework, so one copilot shell can front useChat in one app and a plain server-sent event loop in another.

Is the streaming real, or is it a static mock?

It streams. Tokens arrive over time, stop interrupts a reply in flight, retry re-runs a failed step, and the scroller stays pinned to the bottom until the reader scrolls up. The token source is local so the preview runs without an API key, and that source is the one piece you swap.

Which block should I start from?

For a product whose main screen is the chat, start with the full page copilot. For an assistant beside something else, start with the sticky panel that inserts into the draft or the sidebar that pushes the page. For an in app chat that waits in a corner launcher until someone opens it, start with the corner popup. For a knowledge base or docs site, start with the support assistant that answers only from indexed articles and opens a ticket when it cannot.

How do I install an AI chat block?

Through the shadcn CLI on a project that already has shadcn/ui, for example npx shadcn@latest add @reui/ai-chat-1. The block source and the primitives it needs land in your components directory. Next.js, Vite, Remix, Astro and TanStack Start all work.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.