Model List

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

Inline searchable list of models. Open WebUI / Ollama style — circular icon, name, optional inline metadata. Renders as a list, not a dropdown — wrap in your own popover/dialog if you need that surface.

Examples

Searchable list

Type to filter by name, provider, or tagline. Selected row gets a soft accent background and a check icon. Models without iconUrl fall back to two-letter initials.

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

Without search

Set [showSearch]='false' for short, fixed lists where filtering would be noise.

<pk-model-list
  [models]="models"
  [(selectedId)]="selectedId"
  [showSearch]="false"
/>

Installation

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

ng generate ngx-prompt-kit:model-list

Component API

PkModelList

Prop	Type	Default	Description
models	`readonly Model[]`	—	Selectable models (required).
selectedId	`string \| null`	null	Two-way bindable via [(selectedId)].
showSearch	`boolean`	true	Renders the search input at the top of the list.
searchPlaceholder	`string`	"Search models"	Placeholder text for the search input.
class	`string`	—	Extra classes for the host.

Model interface

Prop	Type	Default	Description
id	`string`	—	Stable identifier (required).
name	`string`	—	Display name (required).
iconUrl	`string?`	—	Logo image source. Falls back to initials when absent.
provider	`string?`	—	Searchable but not displayed in this layout.
tagline	`string?`	—	Inline metadata — parameter size, context length, etc.
disabled	`boolean?`	—	Greys the row out and suppresses (changed).

Outputs

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