# Command Palette
Source: https://ui.spencerwueste.com/docs/blocks/command-palette/
Markdown: https://ui.spencerwueste.com/llm/blocks/command-palette.md

> Cmd-K over app data that turns into a streamed AI answer with actionable results.

> Live preview: https://ui.spencerwueste.com/preview/command-palette

## What's inside

- **Command Menu** with pages, actions, and people groups plus an always-visible Ask AI item.
- **Answer mode** streams a markdown reply and offers follow-up actions.
- **Host chrome** mocks a docs page so the palette has context.

## Installation

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

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

Registry JSON: https://ui.spencerwueste.com/r/command-palette.json

The registry item pulls in every component it depends on.

## Usage

```tsx
import CommandPalette from "@/components/blocks/command-palette/command-palette";

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

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

## Going live

Populate the groups from your router and data, and swap `answers` for a call to your model with the current page as context. Questions ending in a question mark route straight to answer mode on Enter.