# Custom chat header

Inject a sidebar toggle, a grouped model menu, and a settings popover into the kai-chat header with header-start / header-end slots.

The `<kai-chat>` header has two slots — `header-start` (left of the title) and `header-end` (right of the controls) — so you can build a full ChatGPT-style header from kit pieces: a sidebar toggle and a grouped model menu on the left, a settings popover with toggles on the right. Toggle the sidebar, switch models, open settings.

> **note:** 
`<kai-chat>` is the **conversation** — thread, composer, header. It has no sidebar of its own, so here the rail and its toggle are wired by the demo (full control over the layout). If you want a **managed, collapsible conversation sidebar** without wiring it yourself, reach for [`<kai-workspace>`](/components/workspace/) instead — it owns the sidebar (and its collapse is controllable). Use `kai-chat` + header slots when you want to build the shell yourself; use `kai-workspace` when you don't.

## How it works

Project your own controls into the header by giving light-DOM children a `header-start` or `header-end` slot. The header opens for them even without a title:

```html
<kai-chat id="chat">
  <!-- left of the title -->
  <div slot="header-start">
    <button id="toggle" aria-label="Toggle sidebar">Menu</button>
    <kai-model-switcher id="models"></kai-model-switcher>
  </div>

  <!-- right of the built-in controls -->
  <div slot="header-end">
    <kai-popover placement="bottom-end">
      <button slot="trigger" aria-label="Settings">Settings</button>
      <div>
        <label>Temporary chat <kai-switch label="Temporary chat"></kai-switch></label>
      </div>
    </kai-popover>
  </div>
</kai-chat>
```

The slotted controls are ordinary elements — wire them however you like. Here the toggle shows/hides a conversations rail, and the model menu is a `<kai-model-switcher>`.

### Grouped, described models

`<kai-model-switcher>` takes a `description` per model (shown as the row subtitle) and a `group` that collects models under a collapsible section — the "Legacy models" pattern:

```js
document.getElementById('models').models = [
  { id: 'gpt-5.5',  name: 'GPT-5.5', description: 'Flagship model' },
  { id: 'gpt-4o',   name: 'GPT-4o',  group: 'Legacy models' },
  { id: 'gpt-4.1',  name: 'GPT-4.1', group: 'Legacy models' },
];
```

Or declare them as `<kai-model>` children: `<kai-model id="gpt-4o" group="Legacy models">GPT-4o</kai-model>`.

## Next steps

- **[Button and popover menu](/patterns/popover-menu/)** — the `kai-popover` primitive on its own.
- **[`kai-model-switcher` reference](/components/model-switcher/)** — models, groups, and the `kai-model-change` event.
- **[Compose your own shell](/patterns/compose-your-own/)** — when you need more than the header customised.