Model Switcher

kai-model-switcher

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

• Shadow DOM
• 1 event
• 2 props
• Property API or declarative children
• Only renders with 2+ models

Preview

When to use

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:

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

<script type="module">
  import '@kitn.ai/ui/elements';

  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:

<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.

Child element	Attributes	Text content	Notes
<kai-model>	descriptiongroupidprovider	Yes	Parse a single light-DOM `<kai-model>` element into a `ModelOption` descriptor. Attribute mapping: - `id` → ModelOption.id - textContent → ModelOption.name - `provider` → ModelOption.provider (optional) - `description` → ModelOption.description (optional subtitle) - `group` → ModelOption.group (optional collapsible section)

Examples

Default

Three Claude models loaded via the models property.

Code

Preselected Model

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

Code

Multiple Providers

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

Code

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
models	ModelOption[]	[]	The selectable models. Set as a JS property (array). Omit to supply them as `<kai-model>` light-DOM children instead; when both are present the property's models come first.
currentModel	string	—	The currently-selected model id. Defaults to the first model.
open	boolean	—	Drive/observe the dropdown's open state (Shoelace-style: settable + reflected to the `open` attribute, the dropdown still self-manages on click/keyboard). Set `el.open = true`, or `<kai-model-switcher open>`; listen for `kai-open-change`.
defaultOpen	boolean	—	Initial open state on mount (uncontrolled seed).
disabled	boolean	—	Disable the trigger: click/keyboard and `show()` no longer open the dropdown.

Events

Event	Detail	Notes
kai-model-change	{ … }	A model was selected.
kai-open-change	{ … }	The model dropdown opened or closed (by click, keyboard, Escape, outside-click, or a method).

Methods

Method	Signature	Notes
show	(): void	Open it programmatically (no-op while disabled).
hide	(): void	Close it programmatically.
toggle	(): void	Flip the open state (closes while disabled).

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

ModelSwitcher

---

Need a hand? Report a bug Ask for help