Model Selector

A dropdown selector for choosing AI models with provider information and pro badges.

Usage in Gaia

Power to the user. Swap between models (GPT-4, Claude) on the fly.

Features

Model List - Display available AI models with icons
Provider Info - Shows model provider (OpenAI, Anthropic, etc.)
Pro Badge - Indicates premium models
Description - Optional model description

Installation

npx shadcn@latest add https://ui.heygaia.io/r/model-selector.json

Usage

import { ModelSelector } from "@/components/ui/model-selector";
import { useState } from "react";
 
const models = [
  { id: "gpt-4", name: "GPT-4", provider: "OpenAI", isPro: true },
  { id: "claude", name: "Claude", provider: "Anthropic" },
];
 
export default function Example() {
  const [selected, setSelected] = useState(models[0]);
  
  return (
    <ModelSelector
      models={models}
      selectedModel={selected}
      onSelect={setSelected}
    />
  );
}

Props

Prop	Type	Description
models	AIModel[]	Array of available models
selectedModel	AIModel	Currently selected model
onSelect	(model) => void	Selection callback
disabled	boolean	Disable the selector

AIModel

Property	Type	Description
id	string	Unique identifier
name	string	Display name
provider	string	Provider name
icon	string	Icon URL
isPro	boolean	Show pro badge
description	string	Model description

iOS Message Bubbles Navbar Menu

On This Page

Meet GAIA

Your open-source, proactive personal AI assistant with 200+ integrations. GAIA combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.