# Model Picker Chat block

> AI chat assistant app shell with floating sidebar, model picker grid, and prompt composer

AI chat workspace: floating collapsible sidebar with a GPT-4/Claude/Gemini model picker, pinned and recent threads, a welcome canvas, and an InputGroup composer. shadcn Sidebar, DropdownMenu, Avatar, ReUI Badge. LLM assistant, chatbot, copilot UI.

- 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-17
- 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-17")`
- Built with: Avatar, Badge, Button, Card, Dropdown Menu, Field, Input Group, Item, Separator, Sidebar
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

An AI chat start screen whose 3 up sidebar model grid syncs with the header model menu, with attach, web search and voice in the composer

## Agent notes

- `handleSubmit` in the composer only clears the draft; wire it to your model API and render the reply thread in `ChatCanvas`
- Replace `MODELS`, whose marks are `Openai`, `ClaudeAiIcon` and `Gemini` brand logos, plus `PINNED_CHATS`, `RECENT_CHATS` and `SUGGESTIONS`
- New Chat, Share Chat, the attach, Search and voice buttons, `QUICK_ACTIONS` rows and `CHAT_ACTIONS` items have no click handler

## When not to use

- A conversation page that streams replies into a transcript with a thread switcher: use [Copilot Shell](https://web.dev.reui.io/blocks/ai-agents/ai-chat/ai-chat-1.md) (`get_block("ai-chat-1")`)
- A welcome screen whose composer attaches context chips and streams a reply with Stop: use [Prompt Starter Welcome](https://web.dev.reui.io/blocks/ai-agents/ai-chat/ai-chat-3.md) (`get_block("ai-chat-3")`)

## Third-party libraries

- next-themes: [API reference](https://github.com/pacocoursey/next-themes#api), [docs](https://github.com/pacocoursey/next-themes)

## Install

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

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