# Message Toast

> A chat notification you can answer in place: avatar with an app badge, sender, channel, time and a two-line preview, one-tap emoji reactions, and a Reply button that opens an inline composer. Enter sends, Escape backs out, and the toast confirms before it leaves.

- Slug: `message-toast`
- Category: [Toasts](https://www.assembli.design/category/toasts.md)
- Type: component
- Tags: toast, message, chat, reply, reaction, notification
- npm dependencies: motion, lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/message-toast
- Page: https://www.assembli.design/components/message-toast

![Message Toast preview](https://www.assembli.design/thumbnails/message-toast-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` (required) | `string` |  |  |
| `message` (required) | `React.ReactNode` |  |  |
| `avatar` | `string` |  | Image URL. Without one, the initials sit on a disc tinted by `hue`. |
| `initials` | `string` |  |  |
| `hue` | `number` | `250` | 0–360, the tint behind the initials. |
| `context` | `string` |  | Where it came from, e.g. "#design-crit" or "Direct message". |
| `time` | `string` | `"now"` |  |
| `reactions` | `string[]` | `["👍", "🎉", "👀"]` | Quick reactions shown under the message. |
| `onReply` | `(text: string) => void` |  | Shows a Reply button that opens an inline composer. |
| `onReact` | `(emoji: string) => void` |  |  |
| `onDismiss` | `() => void` |  | Called after a reply or reaction lands, or when the toast is closed. |

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

```bash
npx shadcn@latest add @assembli/message-toast
```

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