4a:I[593213,["/_next/static/chunks/3zk55npp9bf01.js","/_next/static/chunks/2m96g8z-gzh5d.js","/_next/static/chunks/2tex7xqe6exb2.js","/_next/static/chunks/1jm_pez57pooq.js","/_next/static/chunks/0y1un64j9cb_a.js","/_next/static/chunks/2t6aypjr7f6ts.js","/_next/static/chunks/192xv5ywvi9q4.js","/_next/static/chunks/3no31har91fnf.js","/_next/static/chunks/0_hsj6z42s46y.js","/_next/static/chunks/12i-to1x7rnyj.js","/_next/static/chunks/2wn6uqhj_7ar8.js","/_next/static/chunks/3wqx9rnz4o85e.js","/_next/static/chunks/3rvimhctlr4-r.js","/_next/static/chunks/35-b1h7oww7qw.js","/_next/static/chunks/2bwoeqry9sic1.js","/_next/static/chunks/22u5elh2-mv5w.js","/_next/static/chunks/2vzpfrswgjwkl.js","/_next/static/chunks/2qrdos7bay7xd.js","/_next/static/chunks/0dt0oxoji-6hg.js","/_next/static/chunks/0d26i-0pkwn3k.js","/_next/static/chunks/2myjm193pixht.js","/_next/static/chunks/3q0zcxtc9uq80.js","/_next/static/chunks/09pml84d4uoeh.js","/_next/static/chunks/2vrutmv-0m63u.js","/_next/static/chunks/3cdlx-tm7hyuq.js","/_next/static/chunks/2o-etke09ul30.js","/_next/static/chunks/183sa5pnnpvuj.js","/_next/static/chunks/3glue-gkerdj1.js","/_next/static/chunks/1lbxnxsq8ee8s.js","/_next/static/chunks/3dd99gw9mu-sf.js","/_next/static/chunks/1444rm47mh_mb.js","/_next/static/chunks/33_57fwl6a7_5.js","/_next/static/chunks/093uq_2nhv539.js","/_next/static/chunks/15riy05640d19.js","/_next/static/chunks/41-6ljd4yej5g.js","/_next/static/chunks/37fo5w4-gmeoz.js","/_next/static/chunks/0zf4ggrq52j6j.js","/_next/static/chunks/2d368ijh14dyh.js","/_next/static/chunks/24kcfhkyal62-.js","/_next/static/chunks/3nfyvi11gk9tz.js"],"ModelPickerPreview"] 4b:I[593213,["/_next/static/chunks/3zk55npp9bf01.js","/_next/static/chunks/2m96g8z-gzh5d.js","/_next/static/chunks/2tex7xqe6exb2.js","/_next/static/chunks/1jm_pez57pooq.js","/_next/static/chunks/0y1un64j9cb_a.js","/_next/static/chunks/2t6aypjr7f6ts.js","/_next/static/chunks/192xv5ywvi9q4.js","/_next/static/chunks/3no31har91fnf.js","/_next/static/chunks/0_hsj6z42s46y.js","/_next/static/chunks/12i-to1x7rnyj.js","/_next/static/chunks/2wn6uqhj_7ar8.js","/_next/static/chunks/3wqx9rnz4o85e.js","/_next/static/chunks/3rvimhctlr4-r.js","/_next/static/chunks/35-b1h7oww7qw.js","/_next/static/chunks/2bwoeqry9sic1.js","/_next/static/chunks/22u5elh2-mv5w.js","/_next/static/chunks/2vzpfrswgjwkl.js","/_next/static/chunks/2qrdos7bay7xd.js","/_next/static/chunks/0dt0oxoji-6hg.js","/_next/static/chunks/0d26i-0pkwn3k.js","/_next/static/chunks/2myjm193pixht.js","/_next/static/chunks/3q0zcxtc9uq80.js","/_next/static/chunks/09pml84d4uoeh.js","/_next/static/chunks/2vrutmv-0m63u.js","/_next/static/chunks/3cdlx-tm7hyuq.js","/_next/static/chunks/2o-etke09ul30.js","/_next/static/chunks/183sa5pnnpvuj.js","/_next/static/chunks/3glue-gkerdj1.js","/_next/static/chunks/1lbxnxsq8ee8s.js","/_next/static/chunks/3dd99gw9mu-sf.js","/_next/static/chunks/1444rm47mh_mb.js","/_next/static/chunks/33_57fwl6a7_5.js","/_next/static/chunks/093uq_2nhv539.js","/_next/static/chunks/15riy05640d19.js","/_next/static/chunks/41-6ljd4yej5g.js","/_next/static/chunks/37fo5w4-gmeoz.js","/_next/static/chunks/0zf4ggrq52j6j.js","/_next/static/chunks/2d368ijh14dyh.js","/_next/static/chunks/24kcfhkyal62-.js","/_next/static/chunks/3nfyvi11gk9tz.js"],"ModelPickerRailPreview"] 4c:I[675842,["/_next/static/chunks/3zk55npp9bf01.js","/_next/static/chunks/2m96g8z-gzh5d.js","/_next/static/chunks/2tex7xqe6exb2.js","/_next/static/chunks/1jm_pez57pooq.js","/_next/static/chunks/0y1un64j9cb_a.js","/_next/static/chunks/2t6aypjr7f6ts.js","/_next/static/chunks/192xv5ywvi9q4.js","/_next/static/chunks/3no31har91fnf.js","/_next/static/chunks/0_hsj6z42s46y.js","/_next/static/chunks/12i-to1x7rnyj.js","/_next/static/chunks/2wn6uqhj_7ar8.js","/_next/static/chunks/3wqx9rnz4o85e.js","/_next/static/chunks/3rvimhctlr4-r.js","/_next/static/chunks/35-b1h7oww7qw.js","/_next/static/chunks/2bwoeqry9sic1.js","/_next/static/chunks/22u5elh2-mv5w.js","/_next/static/chunks/2vzpfrswgjwkl.js","/_next/static/chunks/2qrdos7bay7xd.js","/_next/static/chunks/0dt0oxoji-6hg.js","/_next/static/chunks/0d26i-0pkwn3k.js","/_next/static/chunks/2myjm193pixht.js","/_next/static/chunks/3q0zcxtc9uq80.js","/_next/static/chunks/09pml84d4uoeh.js","/_next/static/chunks/2vrutmv-0m63u.js","/_next/static/chunks/3cdlx-tm7hyuq.js","/_next/static/chunks/2o-etke09ul30.js","/_next/static/chunks/183sa5pnnpvuj.js","/_next/static/chunks/3glue-gkerdj1.js","/_next/static/chunks/1lbxnxsq8ee8s.js","/_next/static/chunks/3dd99gw9mu-sf.js","/_next/static/chunks/1444rm47mh_mb.js","/_next/static/chunks/33_57fwl6a7_5.js","/_next/static/chunks/093uq_2nhv539.js","/_next/static/chunks/15riy05640d19.js","/_next/static/chunks/41-6ljd4yej5g.js","/_next/static/chunks/37fo5w4-gmeoz.js","/_next/static/chunks/0zf4ggrq52j6j.js","/_next/static/chunks/2d368ijh14dyh.js","/_next/static/chunks/24kcfhkyal62-.js","/_next/static/chunks/3nfyvi11gk9tz.js"],"CopyButton"] 4e:I[18486,["/_next/static/chunks/3zk55npp9bf01.js","/_next/static/chunks/2m96g8z-gzh5d.js","/_next/static/chunks/2tex7xqe6exb2.js","/_next/static/chunks/1jm_pez57pooq.js","/_next/static/chunks/0y1un64j9cb_a.js","/_next/static/chunks/2t6aypjr7f6ts.js","/_next/static/chunks/192xv5ywvi9q4.js","/_next/static/chunks/3no31har91fnf.js","/_next/static/chunks/0_hsj6z42s46y.js","/_next/static/chunks/12i-to1x7rnyj.js","/_next/static/chunks/2wn6uqhj_7ar8.js","/_next/static/chunks/3wqx9rnz4o85e.js","/_next/static/chunks/3rvimhctlr4-r.js","/_next/static/chunks/35-b1h7oww7qw.js","/_next/static/chunks/2bwoeqry9sic1.js","/_next/static/chunks/22u5elh2-mv5w.js","/_next/static/chunks/2vzpfrswgjwkl.js","/_next/static/chunks/2qrdos7bay7xd.js","/_next/static/chunks/0dt0oxoji-6hg.js","/_next/static/chunks/0d26i-0pkwn3k.js","/_next/static/chunks/2myjm193pixht.js","/_next/static/chunks/3q0zcxtc9uq80.js","/_next/static/chunks/09pml84d4uoeh.js","/_next/static/chunks/2vrutmv-0m63u.js","/_next/static/chunks/3cdlx-tm7hyuq.js","/_next/static/chunks/2o-etke09ul30.js","/_next/static/chunks/183sa5pnnpvuj.js","/_next/static/chunks/3glue-gkerdj1.js","/_next/static/chunks/1lbxnxsq8ee8s.js","/_next/static/chunks/3dd99gw9mu-sf.js","/_next/static/chunks/1444rm47mh_mb.js","/_next/static/chunks/33_57fwl6a7_5.js","/_next/static/chunks/093uq_2nhv539.js","/_next/static/chunks/15riy05640d19.js","/_next/static/chunks/41-6ljd4yej5g.js","/_next/static/chunks/37fo5w4-gmeoz.js","/_next/static/chunks/0zf4ggrq52j6j.js","/_next/static/chunks/2d368ijh14dyh.js","/_next/static/chunks/24kcfhkyal62-.js","/_next/static/chunks/3nfyvi11gk9tz.js"],"ExpandableCode"] 46:["$","$L4a",null,{}] 48:["$","$L4b",null,{}] 4d:T696,"use client"; import { ModelPicker, type ModelPickerOption, } from "@/components/premium/model-picker"; // Sample catalog, not a statement of account availability or model pricing. const models: ModelPickerOption[] = [ ...[ "GPT-5.4", "GPT-5.4 mini", "GPT-5.4 nano", "GPT-5.2", "GPT-4.1", "GPT-4.1 mini", "o3", "o4-mini", ].map((name) => ({ id: name.toLowerCase().replaceAll(" ", "-"), name, provider: "OpenAI", providerId: "openai", })), ...[ "Claude Fable 5.1", "Claude Opus 5", "Claude Sonnet 5", "Claude Haiku 4.5", ].map((name) => ({ id: name.toLowerCase().replaceAll(" ", "-"), name, provider: "Anthropic", providerId: "anthropic", })), ...[ "Gemini 3.1 Pro", "Gemini 3.1 Flash", "Gemini 3.1 Flash-Lite", "Gemini 2.5 Pro", "Gemini 2.5 Flash", ].map((name) => ({ id: name.toLowerCase().replaceAll(" ", "-"), name, provider: "Google", providerId: "google", })), ...["Mistral Large", "Mistral Small", "Codestral", "Devstral"].map( (name) => ({ id: name.toLowerCase().replaceAll(" ", "-"), name, provider: "Mistral", providerId: "mistral", }), ), ]; export function ModelPickerPreview() { return (

); } export function ModelPickerRailPreview() { return (

); } 4f:T46c0,

"use client";

import {
  ModelPicker,
  type ModelPickerOption,
} from "@/components/premium/model-picker";

// Sample catalog, not a statement of account availability or model pricing.
const models: ModelPickerOption[] = [
  ...[
    "GPT-5.4",
    "GPT-5.4 mini",
    "GPT-5.4 nano",
    "GPT-5.2",
    "GPT-4.1",
    "GPT-4.1 mini",
    "o3",
    "o4-mini",
  ].map((name) => ({
    id: name.toLowerCase().replaceAll(" ", "-"),
    name,
    provider: "OpenAI",
    providerId: "openai",
  })),
  ...[
    "Claude Fable 5.1",
    "Claude Opus 5",
    "Claude Sonnet 5",
    "Claude Haiku 4.5",
  ].map((name) => ({
    id: name.toLowerCase().replaceAll(" ", "-"),
    name,
    provider: "Anthropic",
    providerId: "anthropic",
  })),
  ...[
    "Gemini 3.1 Pro",
    "Gemini 3.1 Flash",
    "Gemini 3.1 Flash-Lite",
    "Gemini 2.5 Pro",
    "Gemini 2.5 Flash",
  ].map((name) => ({
    id: name.toLowerCase().replaceAll(" ", "-"),
    name,
    provider: "Google",
    providerId: "google",
  })),
  ...["Mistral Large", "Mistral Small", "Codestral", "Devstral"].map(
    (name) => ({
      id: name.toLowerCase().replaceAll(" ", "-"),
      name,
      provider: "Mistral",
      providerId: "mistral",
    }),
  ),
];

export function ModelPickerPreview() {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <ModelPicker models={models} defaultValue="claude-sonnet-5" />
    </div>
  );
}

export function ModelPickerRailPreview() {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <ModelPicker
        models={models}
        defaultValue="gpt-5.4"
        variant="provider-rail"
      />
    </div>
  );
}

47:["$","div",null,{"className":"group relative overflow-hidden rounded-xl border border-(--color-border) bg-(--color-bg-elev) font-mono text-[13px]","children":[["$","div",null,{"className":"flex items-center justify-between gap-3 border-b border-(--color-border) bg-(--color-bg)/60 px-4 py-2.5","children":[["$","div",null,{"className":"flex min-w-0 items-center gap-2 text-xs","children":[["$","span",null,{"className":"inline-flex h-5 shrink-0 items-center rounded border border-(--color-border) bg-(--color-bg-elev) px-1.5 font-mono font-semibold text-[10px] text-(--color-fg-muted) uppercase tracking-wider","children":"TSX"}],["$","$L3a",null,{"ref":"$undefined","iconNode":[["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z","key":"1oefj6"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5","key":"wfsgrz"}]],"className":"lucide-file size-3.5 shrink-0 text-(--color-fg-muted)"}],["$","span",null,{"className":"truncate font-mono text-(--color-fg-muted)","children":[["$","span",null,{"className":"opacity-60","children":["components/previews/premium","/"]}],["$","span",null,{"className":"font-medium text-(--color-fg)","children":"model-picker-preview.tsx"}]]}]]}],["$","$L4c",null,{"text":"$4d","eventName":"copy_code","eventParams":{"filename":"components/previews/premium/model-picker-preview.tsx","lang":"tsx"}}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"relative px-0 py-4 text-[13px] leading-relaxed [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:w-max [&_pre]:min-w-full [&_code]:font-mono [&_code]:text-[13px] [&_.shiki]:bg-transparent [&_.shiki]:text-[var(--shiki-light)] dark:[&_.shiki]:text-[var(--shiki-dark)] [&_.shiki_span]:text-[var(--shiki-light)] dark:[&_.shiki_span]:text-[var(--shiki-dark)] [&_.line]:px-5 [&_.highlighted]:border-blue-500 [&_.highlighted]:border-l-2 [&_.highlighted]:bg-(--color-fg)/[0.07] [&_.highlighted]:!pl-[18px] [&_.diff.add]:border-green-500 [&_.diff.add]:border-l-2 [&_.diff.add]:bg-green-500/10 [&_.diff.add]:!pl-[18px] [&_.diff.remove]:border-red-500 [&_.diff.remove]:border-l-2 [&_.diff.remove]:bg-red-500/10 [&_.diff.remove]:!pl-[18px] [&_.focused]:opacity-100 [&_pre:has(.focused)_.line:not(.focused)]:opacity-30 [&_pre:has(.focused)_.line:not(.focused)]:transition-opacity","dangerouslySetInnerHTML":{"__html":"$4f"}}]}]]}] 50:T696,"use client"; import { ModelPicker, type ModelPickerOption, } from "@/components/premium/model-picker"; // Sample catalog, not a statement of account availability or model pricing. const models: ModelPickerOption[] = [ ...[ "GPT-5.4", "GPT-5.4 mini", "GPT-5.4 nano", "GPT-5.2", "GPT-4.1", "GPT-4.1 mini", "o3", "o4-mini", ].map((name) => ({ id: name.toLowerCase().replaceAll(" ", "-"), name, provider: "OpenAI", providerId: "openai", })), ...[ "Claude Fable 5.1", "Claude Opus 5", "Claude Sonnet 5", "Claude Haiku 4.5", ].map((name) => ({ id: name.toLowerCase().replaceAll(" ", "-"), name, provider: "Anthropic", providerId: "anthropic", })), ...[ "Gemini 3.1 Pro", "Gemini 3.1 Flash", "Gemini 3.1 Flash-Lite", "Gemini 2.5 Pro", "Gemini 2.5 Flash", ].map((name) => ({ id: name.toLowerCase().replaceAll(" ", "-"), name, provider: "Google", providerId: "google", })), ...["Mistral Large", "Mistral Small", "Codestral", "Devstral"].map( (name) => ({ id: name.toLowerCase().replaceAll(" ", "-"), name, provider: "Mistral", providerId: "mistral", }), ), ]; export function ModelPickerPreview() { return (

); } export function ModelPickerRailPreview() { return (

); } 51:T46c0,

"use client";

import {
  ModelPicker,
  type ModelPickerOption,
} from "@/components/premium/model-picker";

// Sample catalog, not a statement of account availability or model pricing.
const models: ModelPickerOption[] = [
  ...[
    "GPT-5.4",
    "GPT-5.4 mini",
    "GPT-5.4 nano",
    "GPT-5.2",
    "GPT-4.1",
    "GPT-4.1 mini",
    "o3",
    "o4-mini",
  ].map((name) => ({
    id: name.toLowerCase().replaceAll(" ", "-"),
    name,
    provider: "OpenAI",
    providerId: "openai",
  })),
  ...[
    "Claude Fable 5.1",
    "Claude Opus 5",
    "Claude Sonnet 5",
    "Claude Haiku 4.5",
  ].map((name) => ({
    id: name.toLowerCase().replaceAll(" ", "-"),
    name,
    provider: "Anthropic",
    providerId: "anthropic",
  })),
  ...[
    "Gemini 3.1 Pro",
    "Gemini 3.1 Flash",
    "Gemini 3.1 Flash-Lite",
    "Gemini 2.5 Pro",
    "Gemini 2.5 Flash",
  ].map((name) => ({
    id: name.toLowerCase().replaceAll(" ", "-"),
    name,
    provider: "Google",
    providerId: "google",
  })),
  ...["Mistral Large", "Mistral Small", "Codestral", "Devstral"].map(
    (name) => ({
      id: name.toLowerCase().replaceAll(" ", "-"),
      name,
      provider: "Mistral",
      providerId: "mistral",
    }),
  ),
];

export function ModelPickerPreview() {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <ModelPicker models={models} defaultValue="claude-sonnet-5" />
    </div>
  );
}

export function ModelPickerRailPreview() {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <ModelPicker
        models={models}
        defaultValue="gpt-5.4"
        variant="provider-rail"
      />
    </div>
  );
}

49:["$","div",null,{"className":"group relative overflow-hidden rounded-xl border border-(--color-border) bg-(--color-bg-elev) font-mono text-[13px]","children":[["$","div",null,{"className":"flex items-center justify-between gap-3 border-b border-(--color-border) bg-(--color-bg)/60 px-4 py-2.5","children":[["$","div",null,{"className":"flex min-w-0 items-center gap-2 text-xs","children":[["$","span",null,{"className":"inline-flex h-5 shrink-0 items-center rounded border border-(--color-border) bg-(--color-bg-elev) px-1.5 font-mono font-semibold text-[10px] text-(--color-fg-muted) uppercase tracking-wider","children":"TSX"}],["$","$L3a",null,{"ref":"$undefined","iconNode":"$47:props:children:0:props:children:0:props:children:1:props:iconNode","className":"lucide-file size-3.5 shrink-0 text-(--color-fg-muted)"}],["$","span",null,{"className":"truncate font-mono text-(--color-fg-muted)","children":[["$","span",null,{"className":"opacity-60","children":["components/previews/premium","/"]}],["$","span",null,{"className":"font-medium text-(--color-fg)","children":"model-picker-preview.tsx"}]]}]]}],["$","$L4c",null,{"text":"$50","eventName":"copy_code","eventParams":{"filename":"components/previews/premium/model-picker-preview.tsx","lang":"tsx"}}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"relative px-0 py-4 text-[13px] leading-relaxed [&_pre]:!bg-transparent [&_pre]:!p-0 [&_pre]:w-max [&_pre]:min-w-full [&_code]:font-mono [&_code]:text-[13px] [&_.shiki]:bg-transparent [&_.shiki]:text-[var(--shiki-light)] dark:[&_.shiki]:text-[var(--shiki-dark)] [&_.shiki_span]:text-[var(--shiki-light)] dark:[&_.shiki_span]:text-[var(--shiki-dark)] [&_.line]:px-5 [&_.highlighted]:border-blue-500 [&_.highlighted]:border-l-2 [&_.highlighted]:bg-(--color-fg)/[0.07] [&_.highlighted]:!pl-[18px] [&_.diff.add]:border-green-500 [&_.diff.add]:border-l-2 [&_.diff.add]:bg-green-500/10 [&_.diff.add]:!pl-[18px] [&_.diff.remove]:border-red-500 [&_.diff.remove]:border-l-2 [&_.diff.remove]:bg-red-500/10 [&_.diff.remove]:!pl-[18px] [&_.focused]:opacity-100 [&_pre:has(.focused)_.line:not(.focused)]:opacity-30 [&_pre:has(.focused)_.line:not(.focused)]:transition-opacity","dangerouslySetInnerHTML":{"__html":"$51"}}]}]]}]

Model Picker

Provider catalog

Provider rail

Install