# To-Do AI Assistant block

> Task workspace app shell with collapsible floating sidebar and a toggleable AI chat assistant panel

Three-panel to-do shell: floating Sidebar with task lists, count Badges, color tags and a Progress focus card, plus a toggleable AI chat panel (in-flow at desktop, Sheet on mobile). Built on ReUI Badge, shadcn Sidebar, Dialog, DropdownMenu.

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

## Best for

A to-do app with task lists, color tags and a focus progress card in a floating sidebar, beside a toggleable AI assistant chat panel

## Agent notes

- Replace `TASK_LISTS`, `TAGS`, `FOCUS` and `USER` in data.tsx with your own lists, tags, milestone and account
- `submit` in `NewTask` only closes the dialog and clears `title`, so Create Task adds no task anywhere
- The assistant `send` answers from canned `AI_REPLIES` after a 900ms `setTimeout`, over a thread seeded by `AI_THREAD`; call your model there

## When not to use

- An assistant column alone beside a page, with streamed replies and an Insert action: use [Docked Assistant](https://web.dev.reui.io/blocks/ai-agents/ai-chat/ai-chat-2.md) (`get_block("ai-chat-2")`)
- An assistant drawer that slides over any page, with attach and voice in its composer: use [Copilot Chat](https://web.dev.reui.io/blocks/application/sheet/sheet-10.md) (`get_block("sheet-10")`)

## 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-18
```

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