Pickers & navigationModelPicker

Model Picker

Searchable model dropdown with keyboard navigation and provider hints.

ModelPicker ships with a full API table, a copyable example, and accessibility notes.

tsx

Installation

Install the package once, then import ModelPicker from its direct entry point or from the root.

bash

pnpm add @agent-ui/react

tsx

import { ModelPicker } from "@agent-ui/react/model-picker";

Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.

Usage

The example below is the same code that renders the preview. Copy it, swap in your own handlers, and ship.

tsx

1import { ModelPicker } from "@agent-ui/react";
2 
3<ModelPicker
4  models={models}
5  selectedId={model}
6  onChange={(m) => setModel(m.id)}
7/>

API reference

Every prop ModelPicker accepts, its type, default, and behaviour.

API reference for this component
Name	Type	Default	Description
models	ModelOption[]	—	Options with id, name, and provider.
selectedId	string	—	Controlled selection.
onChange	(model: ModelOption) => void	—	Selection callback.
placeholder	string	"Select model"	Trigger copy.
disabled	boolean	false	Disables the trigger.
className	string	—	Inherits every native div attribute, including id, aria-, data-, onClick, and style.

Accessibility

Combobox semantics, arrow-key navigation, Escape to close, and type-ahead filtering.

Use it with the rest of the library

ModelPicker composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.

7 lines · copy-ready