Model Picker Speed Cost

ProNew

An AI model picker whose rows show speed, cost and context size in words, a Recommended mark and capability chips that filter the list, with models outside the plan listed as unavailable. Use this when people choose which model answers.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

defaultValue

Guide and examples

When to use it

Use it in chat and agent tools, where people trade quality against speed and cost and need those traits visible before choosing.

Do not use it when there is one model. Show its name as text.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`models`	`{ id, name, speed, cost, context, capabilities?, recommended?, disabledReason? }[]`	-	`speed` is `fast`, `balanced` or `slow`; `cost` is `$`, `$$` or `$$$`; `context` is a number of tokens.
`value`	`string`	-	The model id (controlled).
`defaultValue`	`string`	-	Initial model.
`onValueChange`	`(id: string) => void`	-	Runs when a model is chosen.
`capabilities`	`string[]`	from models	Filter chips to offer, e.g. `vision`.

Accessibility

Each option reads Atlas Fast, recommended, fast, low cost, 200 thousand tokens of context.
The capability filter is a ToggleGroup of multiple toggles; the list updates and a polite status says 3 models.
Unavailable models are aria-disabled and show the reason (Requires the Team plan).
The recommended model is marked in text and sorted first.

Testing

The pattern ships with a Testing Library test (model-picker-speed-cost.test.tsx) that covers traits in words, filtering by capability, recommended first and unavailable models.

Guide and examples

When to use it

Use it in chat and agent tools, where people trade quality against speed and cost and need those traits visible before choosing.

Do not use it when there is one model. Show its name as text.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`models`	`{ id, name, speed, cost, context, capabilities?, recommended?, disabledReason? }[]`	-	`speed` is `fast`, `balanced` or `slow`; `cost` is `$`, `$$` or `$$$`; `context` is a number of tokens.
`value`	`string`	-	The model id (controlled).
`defaultValue`	`string`	-	Initial model.
`onValueChange`	`(id: string) => void`	-	Runs when a model is chosen.
`capabilities`	`string[]`	from models	Filter chips to offer, e.g. `vision`.

Accessibility

Each option reads Atlas Fast, recommended, fast, low cost, 200 thousand tokens of context.
The capability filter is a ToggleGroup of multiple toggles; the list updates and a polite status says 3 models.
Unavailable models are aria-disabled and show the reason (Requires the Team plan).
The recommended model is marked in text and sorted first.

Testing

The pattern ships with a Testing Library test (model-picker-speed-cost.test.tsx) that covers traits in words, filtering by capability, recommended first and unavailable models.