shadcn.io is not affiliated with official shadcn/ui
Model Selector Panel AI Block for Radix UI
Choose a model by what you need: capability chips, a budget slider and a context size rank five models by needs met then price, with a reason for the best match and a why-not for the rest.
Installation
Overview
Help people pick a model by the job instead of the name, with this model selector panel for React with Radix UI. A hairline frame with a plus mark on each corner holds the needs at the start: four capability chips, Vision, Tool use, Long context and JSON, which are real checkboxes, a budget slider reading "Up to $15 per million output tokens" and an Input for the context you need in tokens. At the end the five fictional models are ranked by a rule written above the list, the needs a model meets and then its price. The top is the best match with a derived reason such as "Has vision and tool use, fits 90K, $15 per 1M"; every other row says why not, in words, for example "Why not: no vision". The Shine Button, the only colored control, selects the top model and the status line says so, with a Badge marking the row. Guides rule the bands, and everything moves with CSS only. For playgrounds, model catalogs and any app that offers several models.
FAQ
What stays in the page, and how do I make it real?
Everything. The five models, their windows, capabilities and example prices are typed in MODELS, and the ranking is worked out in the browser from your three needs. Selecting a model records it in the status line only. Nothing is sent and no model is called. To make it real, fill MODELS from your provider's list and set your app's model from use.
How is the ranking decided?
Each model is scored by its misses: a capability you ticked that it lacks, a window smaller than the context you need, and an output price above your budget. Fewer misses rank higher; models with the same number are ordered by price, lowest first. The rule is written above the list, so the order is never a mystery.
What if nothing meets every need?
The top row is then labelled Closest match and its reason lists what it misses, for example "Closest, but no vision and $20 per 1M is over $15", so you can loosen one need and see the list change. The rows below keep their why-not lines.
What does the context field accept?
A whole number of tokens from 1 to 2,000,000; commas and spaces are ignored. Anything else shows a problem line under the field and the window test is skipped until it is a number again.