Skip to content
kitn AI/UI

Custom chat header

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.

How it works

Section titled “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:

<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

Section titled “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:

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

Section titled “Next steps”