# Chat Navigator

> Turn navigator for long conversations: a column of ticks on the transcript's edge, one per prompt and as wide as its reply is long, with the turn in view lit as you scroll. Hover or focus opens the list of prompts; pick one to scroll there. Arrow buttons and Alt+↑/↓ step between turns.

- Slug: `chat-navigator`
- Category: [AI chat](https://www.assembli.design/category/ai-chat.md)
- Type: component
- Tags: chat, navigation, minimap, scroll, transcript
- npm dependencies: motion, lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/chat-navigator
- Page: https://www.assembli.design/components/chat-navigator

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

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `turns` (required) | `ChatTurn[]` |  |  |
| `containerRef` (required) | `React.RefObject<HTMLElement \| null>` |  | The scrolling transcript. Each turn inside it carries `data-chat-turn={id}` (see `chatTurn`). |
| `offset` | `number` | `16` | Space left above a turn when jumping to it, in px. |
| `onChange` | `(id: string) => void` |  |  |

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

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

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