# Mail Chat

> A chat with your mailbox, built from Assembli's chat parts. Replies carry more than prose: answers cited to the emails they came from, plans to approve, tool-call logs and decision cards with drafts ready to send. Agents can speak in the thread too. a tray composer that picks who a message is for, suggestion chips, scroll pinning, and chatToMarkdown for agents.

- Slug: `mail-chat`
- Category: [Email](https://www.assembli.design/category/email.md)
- Type: block
- Tags: email, chat, assistant, agents, ai, citations, decisions, composer
- npm dependencies: lucide-react, motion
- shadcn/ui dependencies: button, @assembli/agent-glyphs, @assembli/avatar, @assembli/cited-answer, @assembli/decision-queue, @assembli/plan-review, @assembli/prompt-suggestions, @assembli/reasoning-steps, @assembli/streaming-reply, @assembli/suggestion-chips, @assembli/tool-call-log, @assembli/tray-composer
- Live preview: https://www.assembli.design/preview/mail-chat
- Page: https://www.assembli.design/components/mail-chat

![Mail Chat preview](https://www.assembli.design/thumbnails/mail-chat-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `turns` (required) | `ChatTurn[]` |  |  |
| `agents` | `MailAgent[]` | `DEFAULT_AGENTS` |  |
| `assistantName` | `string` | `"Tidings"` |  |
| `assistantAvatar` | `string` | `ASSISTANT_MARK` | Image for the assistant's avatar. Defaults to the Tidings mark. |
| `actorName` | `string` | `"Ines Moreau"` | The person chatting, for `actor` on emitted actions. |
| `onSend` | `(message: ChatMessage) => void` |  | A message from the composer or a suggestion. |
| `onAction` | `(action: MailAction) => void` |  | Everything else: decision actions (`decide`, `later`, `hand_off`, `steer`, `open`, `undo`), `approve_plan` ({ steps }), `revise_plan` ({ note }) and your own `actions` part ids, each with `ids: [part… |
| `onSteer` | `(decision: Decision, optionId: string, instruction: string, draft: string) => s…` |  | Rewrites a decision's draft from a one-line instruction. |
| `onShowContext` | `(decisionId: string) => void` |  | Adds a Context button to decision cards. |
| `recipients` | `TrayModel[]` |  | Who a message can go to, in the composer's picker. Defaults to the assistant, then each agent. |
| `shortcuts` | `TrayShortcut[]` |  | Toggles in the composer's tray, e.g. "Plan first". Active ones come back on the message. |
| `trailing` | `TrayComposerProps["trailing"]` |  | An action pinned to the right of the tray. |
| `placeholder` | `string` | `"Ask about your mail, or hand Tidings a job"` |  |
| `onVoice` | `() => void` |  |  |
| `suggestions` | `Suggestion[]` |  | Chips above the composer. |
| `empty` | `{ greeting: React.ReactNode; suggestions: PromptSuggestion[] }` |  | Shown before the first turn. |
| `disclaimer` | `React.ReactNode` |  | A quiet line under the composer. |
| `header` | `React.ReactNode` |  | Above the transcript, e.g. a title bar. |

## 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-chat/mail-chat.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/mail-chat
```

Registry item JSON: https://www.assembli.design/r/mail-chat.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.