Model Switcher

Installation

Installs are paused for now. You can still preview and customize every component on its page.

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

Usage

import { ModelSwitcher } from "@/components/model-switcher";

<ModelSwitcher />

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-6 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 logo, name and company. The picked model's logo is bright and gets a check, and the rest are dimmed. Effort shows the Effort Slider, so you can click or drag the brain. The pill only changes to the new level when you leave the Effort menu, so dragging doesn't flicker the rest of the switcher. 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);

<ModelSwitcher 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-6, Claude Opus 5.5, Grok 4.7, DeepSeek V4.1 and Kimi K3. 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, grok, deepseek and kimi), or pass any icon:

import { ModelLogo, ModelSwitcher } from "@/components/model-switcher";

<ModelSwitcher
  models={[
    { value: "gpt-6", label: "GPT-6", 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 foreground colors, with a soft gradient edge mixed from the foreground.

Props