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

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
models	ModelOption[]	[]	The selectable models. Set as a JS property (array).
currentModel	string	—	The currently-selected model id. Defaults to the first model.

Events

Event	Detail	Notes
kai-model-change	{ … }	A model was selected.

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