AI Model Picker

A model-switching dropdown for AI applications: every option lists a provider color swatch, an intelligence star rating, a speed lightning bolt, and a cost $ badge, and can be tagged "Recommended". The selected item gets a check mark, the panel opens and closes on a spring, and full keyboard operation is supported.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<AiModelPicker/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/ai-model-picker.en.json

Usage

import { AiModelPicker, type AiModel } from "@/components/ui/ai-model-picker";

const models: AiModel[] = [
  {
    id: "aurora-pro",
    name: "Aurora Pro",
    provider: "Auralab",
    intelligence: 4,
    speed: 2,
    cost: 2,
    recommended: true,
    description: "The best balance of intelligence and speed",
  },
  {
    id: "swift-mini",
    name: "Swift Mini",
    provider: "Swiftware",
    intelligence: 3,
    speed: 3,
    cost: 1,
  },
];

<AiModelPicker
  models={models}
  defaultValue="aurora-pro"
  onChange={(model) => console.log(model.id)}
/>

Preview card and reasoning settings

With preview on, hovering or arrow-key highlighting an option shows a preview card on the right of the panel: four metrics (intelligence, speed, context, cost) plus two radio groups, reasoning effort (low / medium / high) and speed mode (standard / fast). Changing a setting shifts the metrics live, with a faint track marking the raw value so the direction of the shift is easy to read; settings that differ from the defaults (medium, standard) show up as badges on the trigger. scrollFade adds a fade mask at the bottom while the list can still scroll.

const [options, setOptions] = React.useState<AiModelOptions>({
  effort: "medium",
  speed: "standard",
});

<AiModelPicker
  models={models}
  defaultValue="aurora-pro"
  preview
  scrollFade
  options={options}
  onOptionsChange={setOptions}
/>

context (1–5) and contextLabel are optional AiModel fields used only by the preview card's "Context" metric; context counts as 3 when omitted. Both new features are off by default, so without them the panel looks and behaves exactly as before.

Props

AiModel

AiModelOptions

Accessibility

• The trigger is marked aria-haspopup="listbox" with aria-expanded, and the panel is role="listbox"; focus moves into the panel on open, and focus returns to the trigger on close
• Full keyboard support: ↑/↓ opens and moves the highlight, Home/End jumps to the first and last, Enter/Space selects, Esc closes, and Tab collapses and leaves
• aria-activedescendant points at the currently highlighted option and the selected item is marked aria-selected, so assistive technology announces it correctly
• The star ratings and badges are announced through role="img" with text labels such as "Intelligence 4/5", while the individual icons are hidden from assistive technology (aria-hidden)
• The preview card is a labelled aside; the four metrics are announced via role="meter" with aria-valuenow, and reasoning effort and speed mode are role="radiogroup" controls where arrow keys switch and apply immediately
• With preview on, Tab moves from the list into the preview card settings, and the panel collapses only once focus leaves the whole component; Esc inside the preview card also closes it and returns focus to the trigger
• When the user has "reduce motion" enabled at the system level, the panel degrades to a plain fade in / fade out, the arrow and check mark drop their pop animations, and the metric bars jump straight to their new values