Model Picker

AI chats 124

About

Chat-style AI model switcher with provider sidebar and thinking effort control

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

Code

How Model Picker 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 {
  defaultModelProviders,
  ModelPicker,
} from "@/components/ui/model-picker";

export function ModelPickerDemo() {
  const [modelId, setModelId] = useState("grok-4.6");

  return (
    <div className="flex min-h-[460px] w-full items-start justify-center pb-12 pt-8">
      <ModelPicker
        providers={defaultModelProviders}
        value={modelId}
        onValueChange={(id) => setModelId(id)}
        side="bottom"
        align="center"
        defaultOpen={true}
      />
    </div>
  );
}

export default ModelPickerDemo;