AI Model Selector

AI chats

About

Select and switch between AI models

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

Code

How AI Model Selector is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import AIModelSelector from "@/components/ui/ai-model-selector";

export default function DemoOne() {
  return (
    <div>
      <AIModelSelector
        models={[
          // OpenAI
          { id: "gpt-4o", name: "GPT-4o", provider: "openai" },
          { id: "gpt-4.1", name: "GPT-4.1", provider: "openai" },
          { id: "gpt-3.5-turbo", name: "GPT 3.5 Turbo", provider: "openai" },

          // Anthropic
          { id: "claude-3.5-sonnet", name: "Claude 3.5 Sonnet", provider: "anthropic" },
          { id: "claude-3.5-haiku", name: "Claude 3.5 Haiku", provider: "anthropic" },
          { id: "claude-3-opus", name: "Claude 3 Opus", provider: "anthropic" },

          // Google
          { id: "gemini-1.5-pro", name: "Gemini 1.5 Pro", provider: "google" },
          { id: "gemini-1.5-flash", name: "Gemini 1.5 Flash", provider: "google" },
          { id: "gemini-1.0-ultra", name: "Gemini 1.0 Ultra", provider: "google" },

          // Meta
          { id: "llama-3.1-405b", name: "Llama 3.1 405B", provider: "meta" },
          { id: "llama-3.1-70b", name: "Llama 3.1 70B", provider: "meta" },
          { id: "llama-3.1-8b", name: "Llama 3.1 8B", provider: "meta" },

          // Mistral
          { id: "mistral-large", name: "Mistral Large", provider: "mistral" },
          { id: "mistral-medium", name: "Mistral Medium", provider: "mistral" },
          { id: "mixtral-8x7b", name: "Mixtral 8x7B", provider: "mistral" },

          // Cohere
          { id: "command-r-plus", name: "Command R Plus", provider: "cohere" },
          { id: "command-r", name: "Command R", provider: "cohere" },
        ]}
        selectedModelId="gpt-4o"
        onSelect={(id) => {
          /* select model */
        }}
      />
    </div>
  );
}