Model Picker

Installation

pnpm dlx shadcn@latest add @clover-ui/model-picker

This also installs Effort Slider, which the Effort menu uses.

Usage

import { ModelPicker } from "@/components/model-picker";

<ModelPicker />

A small dropdown for choosing which AI model to use and how hard it thinks. Closed, it's a pill with the model name, the Effort Slider's brain colored for the current level, and the level, like "GPT-5.5 Medium".

Click it and a menu opens below, no wider than the pill, with two rows: Model and Effort. Hover or click a row and its own menu opens to the right. Model shows a short list with each model's name and company, and the picked model shows its logo. Effort shows the Effort Slider, so you can click or drag the brain. When there isn't room on the right, it opens on the left.

Syncing with Effort Slider

Give the picker and an Effort Slider the same state and they move together. Changing either one updates the other:

import { EffortSlider } from "@/components/effort-slider";

const [effort, setEffort] = React.useState(1);

<ModelPicker effort={effort} onEffortChange={setEffort} />
<EffortSlider value={effort} onValueChange={setEffort} />

Use the same effortLevels and effortTheme on both so they match.

Models and logos

It comes with GPT-5.5, Grok 4 and Kimi K2. The logos are one color and follow your text color in light and dark mode. Only the brain has color.

Pass your own list to change them. ModelLogo draws the built-in logos (openai, claude, gemini, grok, kimi and deepseek), or pass any icon:

import { ModelLogo, ModelPicker } from "@/components/model-picker";

<ModelPicker
  models={[
    { value: "gpt-5.5", label: "GPT-5.5", description: "OpenAI", icon: <ModelLogo name="openai" /> },
    { value: "opus-5.5", label: "Opus 5.5", description: "Anthropic", icon: <ModelLogo name="claude" /> },
    { value: "my-model", label: "My Model", description: "My company", icon: <MyIcon /> },
  ]}
  effortLevels={["Quick", "Balanced", "Deep"]}
  onModelChange={(model) => console.log(model)}
/>

The menu opens below the pill. Pass side="top" to open it above, for a box at the bottom of the screen.

It works with the keyboard: arrow up or down on the pill opens it, the arrow keys move between rows, Right or Enter opens a row's menu, and Left or Escape goes back. In the Effort menu the arrow keys move the slider. Escape on the main menu closes it and returns focus to the pill, and clicking outside closes it. It uses your theme's card, popover, muted and border colors.

Props