Model Select

Picks which model answers. A Select with the naming convention folded in, so "Opus · most capable" is scannable where a bare model id is not.

src/components/ui/model-select.tsx

About

From the component's own source, where it was written.

Picks which model answers.

A Select with the naming convention folded in: the family and the tier read as one line, so "Opus · most capable" is scannable where a bare model id is not.

Install

npx astralyx-ui add model-select

Usage

import { ModelSelect } from '@/components/ui/model-select'

<ModelSelect models={models} value={model} onValueChange={setModel} />

Composer

Change the props and the source below follows.

Props

size

tsx

<ModelSelect
  models={models}
  size="sm"
  onValueChange={setModel}
/>

Examples

Model picker

tsx

<ModelSelect models={models} defaultValue="opus" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`ModelSelect`

Picks which model answers.

Extends Omit<ComponentProps<typeof Select>, 'options'>.

Prop	Type	Default	Description
defaultValue	string	—	—
value	string	—	—
error	boolean	—	—
disabled	boolean	—	—
variant	'default' \| 'secondary' \| 'ghost'	—	—
size	'sm' \| 'default' \| 'xs' \| 'lg' \| 'xl'	'sm'	—
icon	ReactNode	—	—
onValueChange	(value: string) => void	—	—
placeholder	string	'Model'	—
emptyMessage	ReactNode	—	Shown when `options` is empty.
triggerClassName	string	—	—
triggerLabel	string	—	Accessible name for the trigger.
models	Model[]	required	{ id, name, note?, disabled? }

Types

`Model`

Field	Type	Description
id	string	—
name	string	—
note?	string	Capability or cost hint, joined to the name with a middot.
disabled?	boolean	—

Behaviour

Topic	Detail	Description
rest	Select props	Everything else forwards to Select — value, onValueChange, size, variant, error.