Search for a command to run...
Power to the user. Swap between models (GPT-4, Claude) on the fly.
npx shadcn@latest add https://ui.heygaia.io/r/model-selector.jsonimport { 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}
/>
);
}| Prop | Type | Description |
|---|---|---|
| models | AIModel[] | Array of available models |
| selectedModel | AIModel | Currently selected model |
| onSelect | (model) => void | Selection callback |
| disabled | boolean | Disable the selector |
| 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 |