AI-Native

ModelSelector

모델 선택 드롭다운 — tier 자동 배지.

Select의 wrapper. tier(frontier/balanced/fast)에 따라 자동 배지,group으로 provider 그룹화.

import { ModelSelector, type ModelOption } from "@nxtgen-org/react";

Basic

Tier 배지 + group

선택: opus

tsx

1const MODELS = [
2  { value: "opus",   label: "Claude Opus 4.7",   group: "Anthropic", tier: "frontier" },
3  { value: "sonnet", label: "Claude Sonnet 4.6", group: "Anthropic", tier: "balanced" },
4  { value: "haiku",  label: "Claude Haiku 4.5",  group: "Anthropic", tier: "fast" },
5  { value: "gpt-5",  label: "GPT-5",             group: "OpenAI",    tier: "frontier" },
6];
7
8<ModelSelector models={MODELS} value={model} onChange={setModel} />

API

Name	Type	Default	Description
models*	ModelOption[]	—	—
value / defaultValue	string	—	—
onChange	(value: string) => void	—	—
size	"sm" \| "md" \| "lg"	"sm"	—
ModelOption	{ value, label, group?, tier?, description? }	—	tier: "frontier" \| "balanced" \| "fast"