ModelPicker

A chip that opens a list of models, grouped by provider, with their cost and size.

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import { ModelPicker, Stack, Text } from '@kerf-js/veneer'import type { ModelOption } from '@kerf-js/veneer'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: 'Kerf Deep',    short: 'Deep',    provider: 'Hosted',    description: 'Long investigations',    capabilities: ['tools', 'logs'],    context: '200k',    cost: '$$$',  },  {    id: 'swift',    name: 'Kerf 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 @kerf-js/veneer

Usage

tsx

import { ModelPicker } from '@kerf-js/veneer'

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

RelatedPrompt Popover