# Chat Shell
Source: https://ui.spencerwueste.com/docs/blocks/chat-shell/
Markdown: https://ui.spencerwueste.com/llm/blocks/chat-shell.md

> Conversation sidebar with search, pin, rename, and delete wrapped around the AI Chat block.

> Live preview: https://ui.spencerwueste.com/preview/chat-shell

## What's inside

- **Sidebar** lists conversations in pinned and recent groups with search, hover actions, and inline rename.
- **AI Chat** renders the selected conversation. Each conversation gets its own instance via a React key.
- **Mobile** collapses the sidebar behind a toggle with a backdrop.

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/chat-shell.json
```

Manual install dependencies: `@heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/chat-shell.json

The registry item pulls in every component it depends on.

## Usage

```tsx
import ChatShell from "@/components/blocks/chat-shell/chat-shell";

export default function Page() {
  return (
    <div className="h-dvh p-4">
      <ChatShell />
    </div>
  );
}
```

Give the parent a bounded height. The block fills it and scrolls internally.

## Going live

Replace the seeded `conversations` array with your own list and persist pin, rename, and delete to your API. To restore history per conversation, extend `AIChat` to accept `initialMessages` and pass them from the shell when a conversation is selected.