# Resizable AI Chat block

> AI chat app shell with resizable thread sidebar, collapsible icon rail, and model picker

AI chat workspace: resizable thread sidebar collapsing to an icon rail, pinned and grouped chats, a search palette, and a header model picker with memory toggle. shadcn Resizable, Sidebar, Dialog, ReUI Badge. Chatbot UI, AI assistant, LLM chat.

- Type: Pro block
- Category: [App Shell](https://web.dev.reui.io/blocks/application/app-shell.md)
- Page: https://web.dev.reui.io/blocks/application/app-shell/app-shell-21
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/sidebar.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/sidebar.md
- MCP: `get_block("app-shell-21")`
- Built with: Avatar, Badge, Button, Collapsible, Dialog, Dropdown Menu, Empty, Input Group, Item, Kbd, Resizable, Scroll Area, Sheet, Sidebar, Skeleton, Tabs, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

An AI chat whose thread sidebar drags wider or folds to a 48px rail, with Chats and Artifacts tabs, pin to top menus and a memory toggle

## Agent notes

- Replace `THREADS`, `MODELS`, `WORKSPACES` and `ACCOUNT` in data.ts and the `ARTIFACTS` list in thread-sidebar.tsx with your own records
- The chat body is `ContentSkeleton`, and `modelId` and `memoryOn` stay in shell state; pass them to your message view and send call
- Only Pin works in `ThreadActions`; Rename, Share link, Archive, Delete and the header `THREAD_ACTIONS` have no handler

## When not to use

- A streaming transcript and a docked composer that answer, not skeleton turns: use [Copilot Shell](https://web.dev.reui.io/blocks/ai-agents/ai-chat/ai-chat-1.md) (`get_block("ai-chat-1")`)
- A start screen with a model grid and attach, web search and voice in the composer: use [Model Picker Chat](https://web.dev.reui.io/blocks/application/app-shell/app-shell-17.md) (`get_block("app-shell-17")`)

## Third-party libraries

- next-themes: [API reference](https://github.com/pacocoursey/next-themes#api), [docs](https://github.com/pacocoursey/next-themes)
- React Resizable Panels v4: [API reference](https://github.com/bvaughn/react-resizable-panels#documentation), [docs](https://react-resizable-panels.vercel.app/) (v4 names its parts Group, Panel and Separator (v3 docs say PanelGroup))

## Install

```bash
npx shadcn@latest add @reui/app-shell-21
```

## About App Shell blocks

### When to use

- The outer layout of a multi page product: the navigation around its content area
- Dashboards and admin consoles that switch between workspaces or projects

### When not to use

- One overview page of stats, charts and tables inside your own layout: use the [Dashboard blocks](https://web.dev.reui.io/blocks/application/dashboard.md)
- A top bar on its own, above a page layout you already have: use the [Navbar blocks](https://web.dev.reui.io/blocks/application/navbar.md)

### Agent notes

- Shells that switch themes call `useTheme` from next-themes, so the app must mount the next-themes ThemeProvider

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.