Model Browser

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

OpenRouter-style split-pane model picker. Search + optional filter chips on the left, model list grouped by category, and a detail pane on the right showing description, pricing, and arbitrary metric rows. The marketplace pattern when a single dropdown isn't enough.

Examples

Full marketplace

Search, click a filter chip to narrow by group, click a model to inspect. The Use this model button at the bottom of the detail pane fires (changed).

Frontier

Open Source

Local

Claude Opus 4.7

Anthropic

Anthropic's most capable model. 1M context window in extended mode, leading reasoning benchmarks, strong coding performance.

Pricing$15.00 / $75.00 per 1M

Context1M

Weekly tokens8.7B

<pk-model-browser
  [models]="models"
  [(selectedId)]="selectedId"
  [(filters)]="filters"
  (changed)="onConfirm($event)"
/>

Installation

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

ng generate ngx-prompt-kit:model-browser

Component API

PkModelBrowser

Prop	Type	Default	Description
models	`readonly BrowserModel[]`	—	The browseable models (required).
selectedId	`string \| null`	null	Two-way bindable via [(selectedId)]. Selecting a row updates this; (changed) only fires on confirm.
filters	`readonly BrowserFilter[]`	[]	Two-way bindable via [(filters)]. Active filter ids are matched against each model's group.
searchPlaceholder	`string`	"Search models"	Placeholder text for the search input.
selectable	`boolean`	true	Whether to render the confirmation button in the detail pane.
selectLabel	`string`	"Use this model"	Label for the confirmation button.
locale	`string?`	—	Locale for the price formatter.
class	`string`	—	Extra classes for the host.

BrowserModel interface

Prop	Type	Default	Description
id	`string`	—	Stable identifier (required).
name	`string`	—	Display name (required).
iconUrl	`string?`	—	Logo source; falls back to initials.
provider	`string?`	—	Small muted line beneath the name.
description	`string?`	—	Long-form text in the detail pane.
group	`string?`	—	Category label — list groups by this and filter ids match against it.
inputPricePer1M / outputPricePer1M	`number?`	—	Both required for the price metric to render.
currency	`string?`	"USD"	ISO 4217 code; passed to Intl.NumberFormat.
metrics	`ReadonlyArray<{ label, value }>?`	—	Free-form key/value rows in the detail pane.
disabled	`boolean?`	—	Greys the row and suppresses (changed).

Outputs

Prop	Type	Default	Description
changed	`(model: BrowserModel) => void`	—	Fires when the consumer confirms via the action button (selectable=true) — not on row click.