AI Model Selector

Demo & usage

More examples

When to use

• Letting users choose an LLM with provider, capability, latency, cost and context info.
• AI products that expose multiple models or providers.
• For a generic single-choice list, a Select Dropdown is simpler.

Async states

• loading
• empty
• error
• retry

Item identity & owned state

Restorable state

• compareIds

Bind these to put a saved view back — the open sections, the hidden columns, the selected rows — and read their Change events to store what the user does.

Outputs

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

• This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `models`, `loading` and `error`.
• Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

• A retired model cannot be selected by any path. Clicks and keys are refused; a `[selectedId]` or `[config].modelId` bound to a retired id is replaced with the first selectable model, written back through the two-way binding, and named on screen ("X is retired and cannot be selected, so Y is selected instead") — `modelChange` does not fire, because the reader chose nothing. The `routing` variant shows the same lifecycle and region marks, faults a retired or out-of-region step (so a chain containing one no longer reads as sound) and warns on a deprecated one.
• `models` is an input defaulting to the bundled catalogue, so the component demonstrates itself out of the box and offers your own models when you have them. The selection is moved onto the offered list if it is not already on it.
• `selectedId`, `config` and `compareIds` are two-way, so the chosen model, the tuned generation settings and the comparison set can each be driven from — and restored into — your own state.
• Dropdown, grid, comparison and settings layouts.
• Provider badges and capability tags.
• Latency, cost and context indicators.
• Emits `modelChange` with the selected model id.
• `[budgetWarningPct]` (80, from the still-exported `SV_BUDGET_WARNING_PCT`) is the share of a routing cap at which the budget reads `warning`. Eighty per cent is early enough to act on for a steady burn; a fleet whose traffic triples at month end wants it earlier and a prepaid credit later. It must stay below 100 — at 100 the warning band vanishes and every state is either ok or exceeded — so a figure at or above the cap is refused with a dev warning.
• `[catalogueAsOf]` is when the figures were true, rendered as an 'as of' line under every variant and marked stale past `[staleAfterDays]` (30 — prices and context windows change monthly). Supply nothing and nothing is rendered, plus a dev warning: a banner on an unmigrated host is noise the reader cannot act on, and the person who can act on it is reading the console.
• `isFeatured` now has to answer for itself. `featuredReason` on the model, or `[recommendationPolicy]` for the catalogue, is rendered beside the star; with neither, the card says plainly that no reason was recorded and the console says so too. 'Recommended' with no visible policy reads as authority and cannot be told apart from a vendor placement.
• `lifecycle: 'preview' | 'ga' | 'deprecated' | 'retired'` plus `retiresAt` and `regions`, with `[region]` for the deployment. A deprecated or out-of-region model stays **visible and marked** rather than silently absent — dropping it is how a team finds out about a retirement from a 404 in production. Only `retired` is refused, because calling it cannot succeed. The lifecycle badge, the retirement date and a 'Not in <region>' mark render in **every** variant — dropdown options and trigger, cards, the comparison header and the settings list — and `retiresAt` shows on a deprecated model that is still available, because the date is the planning fact. A retired model is refused on every path — pointer, Enter and Space, and a programmatic `selectModel()` / `selectConfigModel()` — is marked `aria-disabled` (not `disabled`, so it stays focusable and its reason readable), and is skipped when the component picks a default.
• `[overlayContainer]` and `[overlayZIndex]` (9999, from the exported `SV_MODEL_OVERLAY_Z_INDEX`) hand the dropdown panel to an app that owns the top of its own page. The default appends to `<body>`, which is outside a host overlay stack's ordering rules and lands under or over the wrong layer depending on document order — something no z-index on this side can fix, because stacking contexts do not compare across them. Give it your overlay root instead, and raise the index above your modal layer if the panel has to open from inside a dialog.
• A container brings a browser subtlety with it and the component handles it: a `transform`, `filter`, `perspective`, `will-change` or `contain: paint` on **any ancestor** of that container makes the ancestor the containing block for `position: fixed`, so viewport coordinates are silently re-based on its box and the panel appears offset by wherever the overlay root sits — the properties an app puts on an overlay root for compositing and modal animations are exactly these. The panel finds that ancestor and converts into its space, and a container that is not yet in the document falls back to `<body>` with a dev warning rather than rendering nowhere at all.

Best practices

• Do: Surface cost, context window and latency so users make informed choices.
• Do: Use the comparison variant when the trade-offs between models matter.
• Tip: Badge providers and capabilities consistently across the app.

Accessibility

• The scrolling list of models is the `listbox`, named, with the options as its own children — the search box and the footer sit outside it, because a listbox may own only options. Getting this wrong (the role was on the whole panel) left a screen reader with an empty listbox and options belonging to nobody; it was found by the browser accessibility gate, not by a unit test.
• The trigger is `aria-haspopup="listbox"` with `aria-expanded`, and `aria-controls` the list while it is open.
• Options expose full model metadata as text.
• Search inputs are labelled; parameter sliders carry aria-label (and aria-valuetext for temperature).
• Keyboard selection with clear focus.