v0.2.0 Now Available

The Universal Model Selector

Stop hardcoding model dropdowns. One React component that discovers and selects models from any OpenAI-compatible API.

View on GitHub
Docs
See it in action
Auto-Discovery

Point it at an endpoint.
It does the rest.

Give it a base URL and the component fetches available models, normalizes their metadata across providers, and renders a searchable, filterable selector. Venice.ai, OpenRouter, or your own endpoint — it all works the same.

App.tsx
// This is all you need
<ModelSelector
  baseUrl="https://api.venice.ai/api/v1"
  value={model}
  onChange={setModel}
/>
Live — fetching from Venice.ai
connected
8 Model Types

Every modality, one component

Text, image, video, inpaint, embedding, TTS, ASR, and upscale. Each type surfaces relevant metadata — context length for LLMs, aspect ratios for image models, voices for TTS.

Filter

Showing Image models · Generation

Click through the type filters — the model list updates automatically

Rich onChange

Full model data,
zero extra API calls.

Most selectors give you an ID and leave you to fetch the rest. This one calls onChange(id, model) with the complete normalized object — provider, type, pricing, context length, privacy flags, and more.

Try selecting a model
onChange → model object

Select a model on the right
to see the full object here

Two Modes, Zero Hassle

Let it fetch, or bring your own models

Managed mode auto-discovers models from any endpoint. Controlled mode takes your own array — no network calls, full control. Styles are encapsulated either way.

Managed.tsxYour Code
import { ModelSelector } from "open-model-selector";
import "open-model-selector/styles.css";

<ModelSelector
  baseUrl="https://api.venice.ai/api/v1"
  value={model}
  onChange={(id, model) => { ... }}
/>
What You Get
Auto-fetchModels fetched from your endpoint
NormalizedMetadata standardized across providers
SearchableFilterable dropdown with keyboard nav
Type-awareContext length, pricing, voices & more
Zero glue codeNo network logic on your side
Playground

Try it yourself

Configure the component, switch modes, filter by type, and see the generated code update in real time.

Configuration

Fetches models from the API endpoint automatically.
Live Preview✦ Auto-Discovery
Type

Select a model to see details