Model Picker

ngx-prompt-kit original — not part of ibelick/prompt-kit

Dropdown for selecting an LLM. Items show name, provider, optional tagline, optional tier badge, and optional pricing line. Pricing is consumer-supplied — no model rates are bundled.

Examples

Full detail

Three models with tiers + pricing. Selected model's name and tier badge appear in the trigger; the dropdown shows all metadata. Click a model to switch.

<pk-model-picker
  [models]="models"
  [(selectedId)]="selectedId"
  (changed)="onChange($event)"
/>

Compact, in a toolbar

Set [compact]='true' to drop the tier badge from the trigger and shrink the button. Useful in horizontal toolbars where vertical space matters.

Active model:

<pk-model-picker
  [compact]="true"
  [models]="models"
  [(selectedId)]="selectedId"
/>

With a disabled (coming soon) model

Set disabled: true on a Model entry to grey it out. (changed) does not fire and selectedId does not update if the user clicks it.

const models: Model[] = [
  { id: 'available', name: 'Quill Balanced', provider: 'Acme', tier: 'balanced' },
  {
    id: 'preview',
    name: 'Quill Vision',
    provider: 'Acme',
    tagline: 'Coming soon — image + text inputs',
    tier: 'smart',
    disabled: true,
  },
];

<pk-model-picker [models]="models" [(selectedId)]="selectedId" />

Searchable (long lists)

Set [searchable]='true' to add a filter box at the top of the menu — filters by name, provider, and tagline. Ideal for long catalogs like OpenRouter where a flat dropdown is unwieldy.

<pk-model-picker
  [searchable]="true"
  [models]="models"
  [(selectedId)]="selectedId"
  searchPlaceholder="Search models..."
/>

Installation

Add the model-picker component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:model-picker

Component API

PkModelPicker

Prop	Type	Default	Description
models	`readonly Model[]`	—	The selectable models (required). See Model interface below.
selectedId	`string \| null`	null	Two-way bindable via [(selectedId)]. Component reflects the selection in the trigger; consumer drives any side effects.
placeholder	`string`	"Select model"	Trigger label when nothing is selected.
compact	`boolean`	false	Smaller trigger; drops the tier badge from the trigger button. The dropdown is unaffected.
locale	`string \| undefined`	—	BCP-47 locale for the price formatter. Defaults to runtime locale.
searchable	`boolean`	false	Adds a filter box at the top of the menu (filters by name/provider/tagline).
searchPlaceholder	`string`	"Search models"	Placeholder for the search box when searchable is on.
class	`string`	—	Extra classes for the host.

Model interface

Prop	Type	Default	Description
id	`string`	—	Stable identifier (required).
name	`string`	—	Display name (required).
provider	`string?`	—	Small muted suffix in the dropdown.
tagline	`string?`	—	One-line description below the name in the dropdown.
tier	`"fast" \| "balanced" \| "smart" \| undefined`	—	Optional badge — fast (primary), balanced (secondary), smart (amber).
inputPricePer1M / outputPricePer1M	`number?`	—	Per-million-token pricing in `currency`. Both must be set for the price line to render.
currency	`string?`	"USD"	ISO 4217 code; passed to Intl.NumberFormat with the resolved locale.
disabled	`boolean?`	—	Greys the item out and suppresses (changed).

Outputs

Prop	Type	Default	Description
changed	`(model: Model) => void`	—	Fires when a non-disabled model is picked. Full Model object emitted.