Wensity

Model Context Switcher

A Radix dropdown that scales out from its trigger and glides the selection pill across to meet whichever model you pick.

agentic ai interfacesmodelcontextswitcherframer motiontabler icons react
Model Context Switcher component preview

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add model-context-switcher

Usage

Import ModelContextSwitcher from @/components/wensity/model-context-switcher and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { ModelContextSwitcher } from "@/components/wensity/model-context-switcher";


export function ModelContextSwitcherDemo() {
  return (
    <ModelContextSwitcher
      triggerLabel="Model"
      defaultValue="thinking"
      onChange={(id) => console.log("Selected model:", id)}
    />
  );
}

Props

PropTypeDefaultDescription
optionsModelOption[]-Model options to list. Falls back to built-in Wensity Fast / Thinking / Creative / Research.
valuestring-Controlled selected option id.
defaultValuestring-Default selected id when uncontrolled (falls back to the first option).
onChange(id: string) => void-Fired when the selected model id changes.
size"sm" | "md""md"Visual size of the trigger button.
triggerLabelstring-Optional label rendered before the model name in the trigger.