Halloween only 🎃 Get Wensity Pro for 31% less with
Wensity

AI Model Selector

An AI model selector dropdown that scales out from its trigger and glides the selection pill to whichever model you pick.

agentic ai interfacesmodelcontextswitcherframer motiontabler icons react
AI Model Selector component preview

Overview

AI Model Selector is a React and Tailwind CSS model picker dropdown for chat apps, in Next.js or any React app, built on the Base UI Menu and Framer Motion. The menu scales and unblurs out of its trigger, and a selection pill glides to whichever row you hover or reach with the arrow keys. Each option takes a label, description, icon, and badge. Base UI handles focus, typeahead, Escape, and screen edge collisions, and the value can be controlled or uncontrolled. Two sizes and an optional trigger label fit it into toolbars and composer bars.

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.

Related components

  • AI Prompt Input component preview

    AI Prompt Input

    An expanding prompt area with a glowing drop zone that breathes open to meet you as you type a thought or drag a file.

  • Animated Loading Skeleton component preview

    Animated Loading Skeleton

    An organic loading state instead of a spinner, with a slow aurora that breathes in the space where your content will land.

  • Voice Reactive Orb component preview

    Voice Reactive Orb

    A breathing voice orb that swells with speech and settles between turns, never jittery and always organic to look at.

  • ChatGPT Orb component preview

    ChatGPT Orb

    Low-power WebGL fractal noise that blooms white ink inside a soft circular mask.

Featured in React AI chat UI components.