ModelPicker
A chip that opens a list of models, grouped by provider, with their cost and size.
SourcePackage @weft-js/warp
Preview
tsx
import { state } from '@weft-js/core'import { ModelPicker, Stack, Text } from '@weft-js/warp'import type { ModelOption } from '@weft-js/warp'export function Choose() { const model = state('swift') return ( <Stack gap="related" align="center"> <ModelPicker models={MODELS} value={model} /> <Text role="caption" subtle>Answers will use {MODELS.find(m => m.id === model.value)?.name}</Text> </Stack> )}const MODELS: ModelOption[] = [ { id: 'deep', name: 'weft Deep', short: 'Deep', provider: 'Hosted', description: 'Long investigations', capabilities: ['tools', 'logs'], context: '200k', cost: '$$$' }, { id: 'swift', name: 'weft Swift', short: 'Swift', provider: 'Hosted', description: 'Fast, good at config', capabilities: ['tools'], context: '200k', cost: '$$' }, { id: 'local', name: 'On-prem small', short: 'Small', provider: 'Your cluster', description: 'Stays on your network', context: '32k', cost: '$' },]Installation
npm install @weft-js/warpUsage
tsx
import { ModelPicker } from '@weft-js/warp'Accessibility
- UpandDown
- Move through the models
- Enter
- Picks
- Escape
- Closes and returns to the chip
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
models | ModelOption[] | — | The models on offer. |
value | string | State<string | undefined> | — | The model's id, or a state to bind. |
compact | boolean | false | Shows the short name. |
| Event | Type | Default | Description |
|---|---|---|---|
onChange | ((id: string) => void) | — | Called with the new value. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="prompt"] [data-part="model"]
modelsr-onlycontentgroup