ModelSelector

A React dropdown component for selecting AI models with search, descriptions, and custom icons. Perfect for AI applications, model switching interfaces, or configuration panels. Built with TypeScript.

Installation

npm install @sarthakb009/model-selector

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom lucide-react

Required versions:

• react ^18.0.0
• react-dom ^18.0.0
• lucide-react ^0.294.0

Usage

Basic Example

import { ModelSelector } from '@sarthakb009/model-selector';
import { Sparkles, Box } from 'lucide-react';
import { useState } from 'react';

function App() {
  const [selectedId, setSelectedId] = useState('gpt-4');

  const models = [
    {
      id: 'gpt-4',
      name: 'GPT-4',
      provider: 'OpenAI',
      description: 'Most capable model',
      icon: Sparkles,
    },
    {
      id: 'gpt-3.5',
      name: 'GPT-3.5 Turbo',
      provider: 'OpenAI',
      description: 'Fast and efficient',
      icon: Box,
    },
  ];

  return (
    <ModelSelector
      selectedId={selectedId}
      models={models}
      onChange={(modelId) => {
        setSelectedId(modelId);
        console.log('Selected:', modelId);
      }}
    />
  );
}

With Sizes

import { ModelSelector } from '@sarthakb009/model-selector';

function App() {
  return (
    <>
      <ModelSelector
        selectedId={selectedId}
        models={models}
        onChange={setSelectedId}
        size="sm" // 'sm' | 'md' | 'lg'
      />
      
      <ModelSelector
        selectedId={selectedId}
        models={models}
        onChange={setSelectedId}
        size="lg"
      />
    </>
  );
}

With Loading State

import { ModelSelector } from '@sarthakb009/model-selector';

function App() {
  return (
    <ModelSelector
      selectedId={selectedId}
      models={models}
      onChange={setSelectedId}
      isLoading={true}
    />
  );
}

Disabled State

import { ModelSelector } from '@sarthakb009/model-selector';

function App() {
  return (
    <ModelSelector
      selectedId={selectedId}
      models={models}
      onChange={setSelectedId}
      disabled={true}
    />
  );
}

Props

| Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | selectedId | string | - | Yes | The currently selected model ID | | models | ModelData[] | - | Yes | Array of available models | | onChange | (modelId: string) => void | - | Yes | Callback fired when a model is selected | | size | 'sm' \| 'md' \| 'lg' | 'md' | No | Visual size of the component | | className | string | undefined | No | Additional CSS classes | | disabled | boolean | false | No | Disable interaction | | isLoading | boolean | false | No | Show loading spinner state |

ModelData Type

interface ModelData {
  id: string;
  name: string;
  provider: string;
  description?: string;
  icon?: LucideIcon;
  tags?: string[];
}

Features

• ✅ Dropdown Interface: Clean, accessible dropdown
• ✅ Model Information: Display name, provider, and description
• ✅ Custom Icons: Support for Lucide icons
• ✅ Multiple Sizes: Small, medium, and large variants
• ✅ Loading State: Built-in loading indicator
• ✅ Keyboard Navigation: Full keyboard support
• ✅ Click Outside: Closes when clicking outside
• ✅ TypeScript: Full TypeScript support with exported types
• ✅ Accessible: Proper ARIA labels and focus management

TypeScript

The component is written in TypeScript and exports all types:

import {
  ModelSelector,
  ModelSelectorProps,
  ModelData,
  ModelSize,
} from '@sarthakb009/model-selector';

const model: ModelData = {
  id: 'gpt-4',
  name: 'GPT-4',
  provider: 'OpenAI',
  description: 'Most capable model',
};

const props: ModelSelectorProps = {
  selectedId: 'gpt-4',
  models: [model],
  onChange: (id) => console.log(id),
  size: 'md' as ModelSize,
};

License

MIT