# Mail Command Bar

> A ⌘K bar for mail that takes commands and plain sentences. "Archive newsletters older than a week" becomes a plan you see before it runs: the filters it understood, which threads match, whether it can be undone, and the exact tool call an agent would make. Enter runs it with Undo; sends ask twice. Pass a model through parse; a built-in parser covers common phrasings.

- Slug: `mail-command-bar`
- Category: [Email](https://www.assembli.design/category/email.md)
- Type: component
- Tags: command-k, palette, natural-language, agents, tool-calls, mail, keyboard
- npm dependencies: lucide-react, motion
- shadcn/ui dependencies: button, dialog, input, kbd, @assembli/avatar
- Live preview: https://www.assembli.design/preview/mail-command-bar
- Page: https://www.assembli.design/components/mail-command-bar

![Mail Command Bar preview](https://www.assembli.design/thumbnails/mail-command-bar-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` |  |  |
| `defaultOpen` | `boolean` | `false` |  |
| `onOpenChange` | `(open: boolean) => void` |  |  |
| `trigger` | `React.ReactElement` |  | Rendered as the dialog trigger. |
| `threads` | `CommandThread[]` | `[]` | Threads to search and to plan against. |
| `commands` | `CommandItem[]` | `DEFAULT_COMMANDS` |  |
| `parse` | `(text: string, threads: CommandThread[]) => Plan \| null \| Promise<Plan \| null>` | `parseCommand` | Turns a sentence into a plan. Return null when it isn't a command. Defaults to `parseCommand`; pass a model call here. |
| `onAction` | `(action: MailAction) => void` |  | `run_command` (with `plan` and `call`), `undo`, `open`, and each command's own action. |
| `defaultValue` | `string` | `""` | Text already in the field when it opens. |
| `examples` | `string[]` | `DEFAULT_EXAMPLES` | Example sentences shown before you type. |
| `hotkey` | `boolean` | `true` | Toggle with ⌘K / Ctrl+K. |
| `actorName` | `string` | `"Ines Moreau"` | The person acting, for `actor` on emitted actions. |
| `className` | `string` |  |  |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/mail-command-bar/mail-command-bar.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/mail-command-bar
```

Registry item JSON: https://www.assembli.design/r/mail-command-bar.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.