50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T21f0,"use client"; import { ModelSelector, ModelSelectorContent, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorTrigger, } from "@/components/ai-elements/model-selector"; import { Button } from "@/registry/default/ui/button"; import { CheckIcon } from "lucide-react"; import { memo, useCallback, useState } from "react"; const models = [ { chef: "OpenAI", chefSlug: "openai", id: "gpt-4o", name: "GPT-4o", providers: ["openai", "azure"], }, { chef: "OpenAI", chefSlug: "openai", id: "gpt-4o-mini", name: "GPT-4o Mini", providers: ["openai", "azure"], }, { chef: "OpenAI", chefSlug: "openai", id: "o1", name: "o1", providers: ["openai", "azure"], }, { chef: "OpenAI", chefSlug: "openai", id: "o1-mini", name: "o1 Mini", providers: ["openai", "azure"], }, { chef: "Anthropic", chefSlug: "anthropic", id: "claude-opus-4-20250514", name: "Claude 4 Opus", providers: ["anthropic", "azure", "google-vertex", "amazon-bedrock"], }, { chef: "Anthropic", chefSlug: "anthropic", id: "claude-sonnet-4-20250514", name: "Claude 4 Sonnet", providers: ["anthropic", "azure", "google-vertex", "amazon-bedrock"], }, { chef: "Anthropic", chefSlug: "anthropic", id: "claude-3.5-sonnet", name: "Claude 3.5 Sonnet", providers: ["anthropic", "azure", "google-vertex", "amazon-bedrock"], }, { chef: "Anthropic", chefSlug: "anthropic", id: "claude-3.5-haiku", name: "Claude 3.5 Haiku", providers: ["anthropic", "azure", "google-vertex", "amazon-bedrock"], }, { chef: "Google", chefSlug: "google", id: "gemini-2.0-flash-exp", name: "Gemini 2.0 Flash", providers: ["google", "google-vertex"], }, { chef: "Google", chefSlug: "google", id: "gemini-1.5-pro", name: "Gemini 1.5 Pro", providers: ["google", "google-vertex"], }, { chef: "Google", chefSlug: "google", id: "gemini-1.5-flash", name: "Gemini 1.5 Flash", providers: ["google", "google-vertex"], }, { chef: "Meta", chefSlug: "llama", id: "llama-3.3-70b", name: "Llama 3.3 70B", providers: ["groq", "togetherai", "amazon-bedrock"], }, { chef: "Meta", chefSlug: "llama", id: "llama-3.1-405b", name: "Llama 3.1 405B", providers: ["togetherai", "amazon-bedrock"], }, { chef: "Meta", chefSlug: "llama", id: "llama-3.1-70b", name: "Llama 3.1 70B", providers: ["groq", "togetherai", "amazon-bedrock"], }, { chef: "Meta", chefSlug: "llama", id: "llama-3.1-8b", name: "Llama 3.1 8B", providers: ["groq", "togetherai"], }, { chef: "DeepSeek", chefSlug: "deepseek", id: "deepseek-r1", name: "DeepSeek R1", providers: ["deepseek", "openrouter"], }, { chef: "DeepSeek", chefSlug: "deepseek", id: "deepseek-v3", name: "DeepSeek V3", providers: ["deepseek", "openrouter"], }, { chef: "DeepSeek", chefSlug: "deepseek", id: "deepseek-coder-v2", name: "DeepSeek Coder V2", providers: ["deepseek", "openrouter"], }, { chef: "Mistral AI", chefSlug: "mistral", id: "mistral-large", name: "Mistral Large", providers: ["mistral", "azure"], }, { chef: "Mistral AI", chefSlug: "mistral", id: "mistral-small", name: "Mistral Small", providers: ["mistral", "azure"], }, { chef: "Mistral AI", chefSlug: "mistral", id: "codestral", name: "Codestral", providers: ["mistral"], }, { chef: "Alibaba", chefSlug: "alibaba", id: "qwen-2.5-72b", name: "Qwen 2.5 72B", providers: ["alibaba", "openrouter"], }, { chef: "Alibaba", chefSlug: "alibaba", id: "qwen-2.5-coder-32b", name: "Qwen 2.5 Coder 32B", providers: ["alibaba", "openrouter"], }, { chef: "Alibaba", chefSlug: "alibaba", id: "qwen-max", name: "Qwen Max", providers: ["alibaba"], }, { chef: "Cohere", chefSlug: "cohere", id: "command-r-plus", name: "Command R+", providers: ["cohere", "azure", "amazon-bedrock"], }, { chef: "Cohere", chefSlug: "cohere", id: "command-r", name: "Command R", providers: ["cohere", "azure", "amazon-bedrock"], }, { chef: "xAI", chefSlug: "xai", id: "grok-3", name: "Grok 3", providers: ["xai"], }, { chef: "xAI", chefSlug: "xai", id: "grok-2-1212", name: "Grok 2 1212", providers: ["xai"], }, { chef: "xAI", chefSlug: "xai", id: "grok-vision", name: "Grok Vision", providers: ["xai"], }, { chef: "Moonshot AI", chefSlug: "moonshotai", id: "moonshot-v1-128k", name: "Moonshot v1 128K", providers: ["moonshotai"], }, { chef: "Moonshot AI", chefSlug: "moonshotai", id: "moonshot-v1-32k", name: "Moonshot v1 32K", providers: ["moonshotai"], }, { chef: "Perplexity", chefSlug: "perplexity", id: "sonar-pro", name: "Sonar Pro", providers: ["perplexity"], }, { chef: "Perplexity", chefSlug: "perplexity", id: "sonar", name: "Sonar", providers: ["perplexity"], }, { chef: "Vercel", chefSlug: "v0", id: "v0-chat", name: "v0 Chat", providers: ["vercel"], }, { chef: "Amazon", chefSlug: "amazon-bedrock", id: "nova-pro", name: "Nova Pro", providers: ["amazon-bedrock"], }, { chef: "Amazon", chefSlug: "amazon-bedrock", id: "nova-lite", name: "Nova Lite", providers: ["amazon-bedrock"], }, { chef: "Amazon", chefSlug: "amazon-bedrock", id: "nova-micro", name: "Nova Micro", providers: ["amazon-bedrock"], }, ]; interface ModelItemProps { model: (typeof models)[0]; selectedModel: string; onSelect: (id: string) => void; } const ModelItem = memo(({ model, selectedModel, onSelect }: ModelItemProps) => { const handleSelect = useCallback( () => onSelect(model.id), [onSelect, model.id] ); return ( {model.name} {model.providers.map((provider) => ( ))} {selectedModel === model.id ? ( ) : (

)} ); }); ModelItem.displayName = "ModelItem"; const Example = () => { const [open, setOpen] = useState(false); const [selectedModel, setSelectedModel] = useState("gpt-4o"); const handleModelSelect = useCallback((id: string) => { setSelectedModel(id); setOpen(false); }, []); const selectedModelData = models.find((model) => model.id === selectedModel); // Get unique chefs in order of appearance const chefs = [...new Set(models.map((model) => model.chef))]; return (

No models found. {chefs.map((chef) => ( {models .filter((model) => model.chef === chef) .map((model) => ( ))} ))}

); }; export default Example; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@ai-elements","registryDependencies":["https://elements.ai-sdk.dev/model-selector.json","button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/examples/model-selector.tsx","content":"$52","type":"registry:block","target":"components/ai-elements/example-model-selector.tsx"}],"className":"h-[70svh] min-h-80"}]]}]