# Model Switcher

A compact dropdown for picking the active AI model — drop it in any chat header and listen for one event.

<p class="kai-tag-sub">kai-model-switcher</p>

A compact dropdown trigger that lets users swap the active AI model mid-conversation — set a list of models, handle one event, done.

## Preview

> **tip:** 
Reach for `<kai-model-switcher>` when building your own chat header and you want the model picker as a standalone piece. It sits naturally beside a context meter or title. The element stays invisible until at least two models are provided, so you can always pass the full list and let the component decide whether to show.

## Usage

Set `models` in JavaScript (arrays can't be HTML attributes) and reflect the selection back on `kai-model-change`:

```html
<kai-model-switcher id="ms"></kai-model-switcher>

<script type="module">

  await customElements.whenDefined('kai-model-switcher');

  const ms = document.getElementById('ms');

  ms.models = [
    { id: 'claude-opus', name: 'Claude Opus', provider: 'Anthropic' },
    { id: 'claude-sonnet', name: 'Claude Sonnet', provider: 'Anthropic' },
  ];
  ms.currentModel = 'claude-opus';

  ms.addEventListener('kai-model-change', (e) => {
    ms.currentModel = e.detail.modelId;
  });
</script>
```

- **`models`** — an array, so assign it as a property. Each item: `{ id: string; name: string; provider?: string }`.
- **`currentModel`** — the selected model's `id`. Omit it to default to the first item in the list.
- **Reflect the selection** — set `el.currentModel = e.detail.modelId` after each `kai-model-change` so the trigger label updates.

**Declarative child API** — compose `<kai-model>` children instead of setting the `models` property:

```html
<kai-model-switcher>
  <kai-model id="gpt-4o" provider="OpenAI">GPT-4o</kai-model>
  <kai-model id="claude-sonnet" provider="Anthropic">Claude Sonnet</kai-model>
</kai-model-switcher>
```

Each `<kai-model>` carries `id` (required), `provider` (optional), and a text label. When you mix both approaches, property items render first.

## Examples

### Default

Three Claude models loaded via the `models` property.

### Preselected Model

`current-model="claude-sonnet"` starts with a specific model active rather than the first item.

### Multiple Providers

Models from different providers — the dropdown groups them by the `provider` field.

## Props

## Events

## Methods

## Composed from