Model Selector Prompt

AI chats 154

About

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.

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

Code

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

Usage.tsx

"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>
  );
}