shadcn.io is not affiliated with official shadcn/ui
Model Selector Prompt AI Block for React Aria
A prompt box with a model picker that lists five models by lab with window and speed, depth and cost ratings, and a context meter that fills and blocks Send when a long document does not fit.
Installation
Overview
Show people what a model can take before they send, with this model-selector prompt for React with React Aria. A Textarea holds a sample question; a model button opens a Popover of five fictional models grouped by lab, each row with its window and three ratings, Speed, Depth and Cost, drawn as dots and also written as words ("Speed: fast"), so no rating rests on shape alone. Alt+M opens it while focus is inside the block, with its Kbd hint. Picking a model rewrites the context meter, "412 of 128K tokens", counted at about four characters per token; "Use a long document" adds a typed attachment of 45,000 tokens, and on Brellis Small, whose window is 32K, the meter fills, a line says "Too long for this model" and Send waits. The request preview lists the model, the attachment and the prompt. The Shine Button sends, the only colored control. It's built from Textarea, Popover, Kbd, Button, Shine Button and Guides, with a CSS entrance only. For playgrounds, prompt tools and any app with several models.
FAQ
Are the models and ratings real, and what stays local?
No. The five models, their windows and their ratings are typed example figures for fictional labs, written to be replaced; the page says so under the box. The token count is the length of the prompt divided by four plus the typed 45,000 of the document, so it is a rough guide and not a tokenizer. Send builds the request line and nothing leaves the page. To make it real, fill MODELS from your provider's list and count tokens with its tokenizer.
What happens when the document is too long?
The meter reaches its end, the line under it says "Too long for this model." with an alert icon, and Send is marked unavailable but stays in place and focusable. Pressing it explains in the status line what to do (pick a bigger window or remove the document) and moves focus to the model button. Switch to Orvane 2 or Brellis Large and the same document fits, with the room left written out.
How is the meter read by a screen reader?
A real meter element, hidden from the eye, carries the value, the window and the name "Context used"; the drawn bar is decoration. The count and the verdict ("Fits, with 83,000 tokens to spare") are also visible text.
How does the picker work from the keyboard?
Alt+M opens it from anywhere in the block, or press the button; the model rows are buttons marked pressed for the current one, and Escape closes the popover and returns focus to the model button. Picking a row closes it and the status line says which model is set and its window.