Components
A benchmark-informed prompt composer with an advanced LLM model selector for comparing frontier models across capability, speed, context, and cost. The model dropdown is searchable; hovering a model opens a preview card with animated metric bars (intelligence, speed, context, cost) and inline reasoning/speed configuration that adjusts the metrics live. Includes provider marks, per-model configuration badges, a scroll-faded list, and a Send action. Built on Base UI Combobox + Preview Card.
npx shadcn@latest add https://21st.dev/r/dqnamo/model-selectorLoading preview...
"use client";
import { useState } from "react";
import {
DEFAULT_LLM_MODELS,
ModelSelectorPrompt,
type ModelConfiguration,
} from "@/components/ui/model-selector";
export default function Default() {
const [modelValue, setModelValue] = useState("claude-fable-5");
const [configurations, setConfigurations] = useState<
Record<string, ModelConfiguration>
>({});
const [prompt, setPrompt] = useState("");
return (
<div className="flex min-h-screen w-full items-center justify-center bg-neutral-100 p-8">
<ModelSelectorPrompt
configurations={configurations}
models={DEFAULT_LLM_MODELS}
onConfigurationChange={(_, __, nextConfigurations) => {
setConfigurations(nextConfigurations);
}}
onModelChange={(model) => {
setModelValue(model.value);
}}
onPromptChange={setPrompt}
onSubmit={({ model, configuration, prompt: submittedPrompt }) => {
// eslint-disable-next-line no-console
console.log({ model: model.value, configuration, prompt: submittedPrompt });
}}
prompt={prompt}
value={modelValue}
/>
</div>
);
}