Model Selector

Copyimport { ArrowUpIcon, ChevronDownIcon } from "lucide-react"
 
import {
  DropdownMenu,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupTextarea,
} from "@/components/ui/input-group"

Copy<InputGroup>
  <InputGroupTextarea placeholder="Ask the agent to change your code..." />
  <InputGroupAddon align="block-end">
    <DropdownMenuTrigger>
      <InputGroupButton size="sm">
        GPT-5
        <ChevronDownIcon />
      </InputGroupButton>
      <DropdownMenu
        selectionMode="single"
        disallowEmptySelection
        selectedKeys={[model]}
        onSelectionChange={(keys) => setModel([...keys][0] as string)}
      >
        <DropdownMenuGroup>
          <DropdownMenuLabel>OpenAI</DropdownMenuLabel>
          <DropdownMenuItem id="gpt-5">GPT-5</DropdownMenuItem>
          <DropdownMenuItem id="gpt-5-mini">GPT-5 mini</DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenu>
    </DropdownMenuTrigger>
    <DropdownMenuTrigger>
      <InputGroupButton size="sm">
        Medium
        <ChevronDownIcon />
      </InputGroupButton>
      <DropdownMenu
        selectionMode="single"
        disallowEmptySelection
        selectedKeys={[effort]}
        onSelectionChange={(keys) => setEffort([...keys][0] as string)}
      >
        <DropdownMenuItem id="low">Low</DropdownMenuItem>
        <DropdownMenuItem id="medium">Medium</DropdownMenuItem>
        <DropdownMenuItem id="high">High</DropdownMenuItem>
      </DropdownMenu>
    </DropdownMenuTrigger>
    <InputGroupButton type="submit" variant="default" className="ml-auto">
      <ArrowUpIcon />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

CopysendMessage({ text }, { body: { model, effort } })

Copyimport { anthropic } from "@ai-sdk/anthropic"
import { openai } from "@ai-sdk/openai"
import { convertToModelMessages, streamText, type UIMessage } from "ai"
 
const models = {
  "gpt-5": openai("gpt-5"),
  "gpt-5-mini": openai("gpt-5-mini"),
  "claude-sonnet-4-5": anthropic("claude-sonnet-4-5"),
  "claude-haiku-4-5": anthropic("claude-haiku-4-5"),
}
 
export async function POST(req: Request) {
  const { messages, model, effort } = (await req.json()) as {
    messages: UIMessage[]
    model: keyof typeof models
    effort: "low" | "medium" | "high"
  }
 
  const result = streamText({
    model: models[model] ?? models["gpt-5"],
    messages: await convertToModelMessages(messages),
    providerOptions: {
      openai: { reasoningEffort: effort },
      anthropic: { effort },
    },
  })
 
  return result.toUIMessageStreamResponse()
}

CopyMigrate components/ai-elements/model-selector.tsx from AI SDK Elements to the shadcn/ui Dropdown Menu component.
 
Keep every export, with the same name and props, so the code that imports it keeps working. Only change how each part renders.
 
1. Install Dropdown Menu: npx shadcn@latest add dropdown-menu
2. Read https://ui.shadcn.com/docs/ai-elements/aria/model-selector.md and build Model Selector the same way.
3. Rebuild each part:
   - ModelSelector renders a DropdownMenuTrigger, instead of a Dialog. ModelSelectorTrigger renders the Button inside it.
   - ModelSelectorContent and ModelSelectorList render a DropdownMenu with selectionMode="single", disallowEmptySelection and the selected model in selectedKeys.
   - ModelSelectorGroup renders a DropdownMenuGroup with a DropdownMenuLabel for its heading.
   - ModelSelectorItem renders a DropdownMenuItem with the model as its id. Picking a model closes the menu.
   - ModelSelectorSeparator renders a DropdownMenuSeparator, and ModelSelectorShortcut a DropdownMenuShortcut.
   - A menu has no search field. Keep ModelSelectorInput, ModelSelectorEmpty and ModelSelectorDialog on Command if you use search, or remove them if nothing imports them.
   - Keep ModelSelectorLogo, ModelSelectorLogoGroup and ModelSelectorName as they are.
4. Remove the imports the file no longer uses.
5. Run the type checker and fix any errors.