Model Selector

Installation

pnpm dlx shadcn@latest add https://simple-ai.dev/r/model-selector.json

Usage

import { ModelSelector } from "@/components/ui/model-selector"

The Model Selector component is a wrapper around the shadcn/ui Select component that allows users to choose from different AI models. It includes:

• Predefined model options with icons
• Ability to disable specific models
• Customizable value and change handler
• Built-in icons from svgl.app

import { useState } from "react";
import { ModelSelector } from "@/components/ui/model-selector";
 
function MyComponent() {
    const [model, setModel] = useState<Model>("deepseek-chat");
    return (
        <ModelSelector
            value={model}
            onChange={setModel}
        />
    );
}

Available Models

The component includes these predefined models but you can easily add or remove models:

• deepseek-chat
• deepseek-r1-distill-llama-70b
• llama-3.3-70b-versatile
• llama-3.1-8b-instant
• gpt-4o
• gpt-4o-mini

Each model has a corresponding icon from svgl.app that appears in the dropdown.

Disabling Models

You can disable specific models by using the disabledModels prop.