All components (204)
Engine selector
AI · ModelSelector · .amset-modelpicker
What it is and when to use it
What serves what comes next: the engine and, inside it, the model. A button with the current choice ("Auto", "Claude", "Claude · Opus 5") that opens a panel with two rows of options.
When to use it
- Next to the box of a chat with an assistant that can answer with several engines or models.
- When which engines are switched on changes all the time (a machine goes off, a key is missing) and it has to be shown.
When not to
- To pick any value from a list: that is a
Select. - For a setting fixed once in preferences and never touched again.
Keyboard: the button opens the panel with Enter or Space and Escape closes it, returning focus. Each row is a real radio group: the arrows change the option and Tab moves from the engine to the model. Choosing does not close the panel, because both are usually touched.
Accessibility: a switched-off engine looks switched off and gives its reason in text ("Unavailable: Your key is missing"), not just in colour. If what is chosen is an engine that has been switched off, the button is marked and the panel warns of it as an alert. While the catalogue is requested (loading) the panel is busy and says so. An engine or model that is no longer in the catalogue still shows with its key in the button, it does not vanish silently.
Fine-tuning: CSS variable --amset-modelpicker-max-models (maximum height of the model row before scrolling). It is pure presentation: the catalogue and the choice are supplied by whoever uses it.
What it looks like
Will answer: Claude · Opus 5
<ModelSelector
providers={[
{ key: "claude", label: "Claude", models: [{ key: "opus", label: "Opus 5" }, { key: "sonnet", label: "Sonnet 5" }] },
{ key: "chatgpt", label: "ChatGPT", available: false, unavailableReason: "You need to sign in to your account", models: [] },
]}
value={eleccion}
onChange={setEleccion}
placement="bottom-start"
/>Props
Import it with import { ModelSelector } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
onChangerequired | (value: ModelSelection) => void | — |
providersrequired | readonly ModelProvider[] | — |
valuerequired | ModelSelection | — |
className | string | Merged with the library classes; it does not replace them. |
disabled | boolean | — |
icon | ReactNode | What goes on the left of the button text. By default, the brain icon. |
loading | boolean | The catalogue is being requested: a ring next to the title and the panel busy. |
maxFixes | number | How many fix links are shown at most ("Set the key for..."). By default, all there are. |
onFix | (provider: string) => void | Called when the fix link of a switched-off engine is pressed, and the panel closes. |
onOpenChange | (open: boolean) => void | — |
open | boolean | — |
placement | Placement | — |
width | string | Width of the panel. Defaults to 21 rem, and never wider than the screen. |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
CSS variables
These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.
| Variable | Default |
|---|---|
--amset-modelpicker-max-models | 11rem |
How to change it
.amset-modelpicker {
--amset-modelpicker-max-models: ...;
}In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: