AI Model Select

AI chats 88

About

Cursor-style AI model picker with Effort, Context, Fast and Thinking controls plus a hover Edit flyout.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Model Select to your project and fits it to your theme.

Code

How AI Model Select is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"

import {
  ModelSelector,
  ModelSelectorContent,
  ModelSelectorTrigger,
  ModelSelectorValue,
  type AiModelSelection,
} from "@/components/ui/ai-model-select"

// ONLY DEFAULT EXPORT WILL BE TREATED AS A DEMO
export default function DemoOne() {
  const [selection, setSelection] = React.useState<AiModelSelection>({
    id: "opus-4.5",
    effort: "high",
    context: "200K",
    fast: true,
    thinking: false,
  })

  const summary = [
    selection.id,
    selection.effort,
    selection.fast ? "fast" : null,
    selection.thinking ? "thinking" : null,
    selection.context,
  ]
    .filter(Boolean)
    .join(" · ")

  return (
    <div className="flex w-full max-w-lg flex-col items-center justify-center gap-6 px-2 py-10">
      <ModelSelector value={selection} onValueChange={setSelection}>
        <ModelSelectorTrigger className="bg-muted min-h-10 rounded-2xl border-2 border-border px-3 py-2">
          <ModelSelectorValue className="text-sm" />
        </ModelSelectorTrigger>
        <ModelSelectorContent side="bottom" />
      </ModelSelector>
      <p className="text-muted-foreground text-center text-xs tabular-nums">
        {summary}
      </p>
    </div>
  )
}