Model pickerNew

$pnpm dlx shadcn@latest add @nextui/model-picker

1{
2  "registries": {
3    "@nextui": {
4      "url": "https://nextui.dev/r/{name}.json",
5      "headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }
6    }
7  }
8}

1"use client";
2
3import { useState } from "react";
4import { useChat } from "@ai-sdk/react";
5import { ModelPicker, type ReasoningEffort } from "@/components/nextui/model-picker";
6
7export function Composer() {
8  const { sendMessage } = useChat();
9  const [model, setModel] = useState("anthropic/claude-sonnet-5.5");
10  const [effort, setEffort] = useState<ReasoningEffort>("medium");
11
12  return (
13    <form
14      onSubmit={(e) => {
15        e.preventDefault();
16        const text = new FormData(e.currentTarget).get("text") as string;
17        // Send the choice with each message; read it in your route handler.
18        sendMessage({ text }, { body: { model, effort } });
19      }}
20    >
21      <textarea name="text" />
22      <ModelPicker value={model} onValueChange={setModel} effort={effort} onEffortChange={setEffort} />
23    </form>
24  );
25}