ThinkingModelSelect

Model picker with an embedded reasoning-effort slider.

ThinkingModelSelect composes ModelSelect and ThinkingSelect into one control: the model popup gains a pinned thinking footer, the trigger echoes the current effort, and Tab cycles effort levels while the popup is open. The footer disappears automatically for models that cannot reason. Three sizes cover dense toolbars through roomy composer bars.

"use client";

import { useState } from "react";
import type { CSSProperties, ReactNode } from "react";

import type { ThinkingEffort } from "../thinking-select/thinking-select";
import { defaultEffort, defaultModelId, gatewayModels } from "./fixtures";
import { ThinkingModelSelect } from "./thinking-model-select";

/**
 * Brand marks from theSVG, applied as alpha masks filled with
 * currentColor so they always match the surrounding text color.
 */
const logo = (slug: string) => {
  const url = `url(https://thesvg.org/icons/${slug}/default.svg)`;
  const style: CSSProperties = {
    WebkitMaskImage: url,
    WebkitMaskPosition: "center",
    WebkitMaskRepeat: "no-repeat",
    WebkitMaskSize: "contain",
    maskImage: url,
    maskPosition: "center",
    maskRepeat: "no-repeat",
    maskSize: "contain",
  };

  return <span className="block bg-current" style={style} />;
};

const providerLogos: Record<string, ReactNode> = {
  Alibaba: logo("alibaba"),
  Anthropic: logo("anthropic"),
  Google: logo("google"),
  Meta: logo("meta"),
  OpenAI: logo("openai"),
};

export const ThinkingModelSelectDemo = () => {
  const [model, setModel] = useState(defaultModelId);
  const [effort, setEffort] = useState<ThinkingEffort>(defaultEffort);

  const shared = {
    effort,
    logos: providerLogos,
    models: gatewayModels,
    onEffortChange: setEffort,
    onValueChange: setModel,
    value: model,
  };

  return (
    <div className="flex flex-col items-start gap-3">
      <ThinkingModelSelect size="lg" {...shared} />
      <ThinkingModelSelect size="md" {...shared} />
      <ThinkingModelSelect size="sm" {...shared} />
    </div>
  );
};

export default ThinkingModelSelectDemo;

Install

npx shadcn@latest add https://ui.neon.com/r/thinking-model-select.json

Usage

import { ThinkingModelSelect } from "@/components/neon-ui/thinking-model-select";

<ThinkingModelSelect
  models={models}
  value={model}
  onValueChange={setModel}
  effort={effort}
  onEffortChange={setEffort}
/>;

Wiring to Neon

Send both selections in one Neon AI Gateway chat call:

await fetch(`${gatewayUrl}/v1/chat/completions`, {
  method: "POST",
  headers: { Authorization: `Bearer ${token}` },
  body: JSON.stringify({
    model,
    messages,
    ...(effort === "off" ? {} : { reasoning_effort: effort }),
  }),
});

Props

Accepts every ModelSelect prop except the composition slots (including excludeModels), plus:

PropType

Controlled reasoning effort.

onEffortChange(effort: ThinkingEffort) => void

Called with the newly selected reasoning effort.

Type(effort: ThinkingEffort) => void

size?"sm" | "md" | "lg"

Scales the trigger and the footer slider together.

Type"sm" | "md" | "lg"

Default"md"

Keyboard

While the popup is open, Tab cycles the thinking effort (off → low → med → high → xhigh); typing filters models; arrows walk the list.

Accessibility

Inherits ModelSelect’s listbox semantics: keyboard-first navigation, type-to-search, and a labelled trigger.
The embedded effort slider is ThinkingSelect’s labelled slider (aria-label="Thinking effort"), reachable with Tab from the list and adjustable with arrow keys.
The trigger’s effort readout is decorative (aria-hidden); the slider carries the value for assistive technology.
Sparkle and glide motion are static under prefers-reduced-motion.