shadcn.io is not affiliated with official shadcn/ui
Model Comparison AI Block for React Aria
One prompt put to two named models side by side: both answers stream at once, and a derived sentence and two bar pairs compare words, seconds and cost.
Installation
Overview
Put two models side by side on the same question, with this model comparison for React with React Aria. A hairline frame with a plus mark on each corner holds a prompt field with two sample chips, and free text is matched to one of the two samples by a keyword. Two Native Selects name the models, Orvane 2, Orvane 2 Fast or Brellis Large, and they never match. The Shine Button, the only colored control, runs both: the two answers stream into their columns at once, in three pieces each. Under each column a list gives the words, counted from the text, the seconds, typed, and the cost, worked out from the model's example output price. A band above the columns says it in one derived sentence, such as "Orvane 2 Fast answered 2.6 times faster and cost 15 times less", and draws the time and the cost as two bars each on one shared scale. The prompt is an Input, the chips are Buttons, and Guides rule the bands. For model benches, prompt playgrounds and any product that lets people choose a model.
FAQ
What stays in the page, and how do I make it real?
Everything. The six answers, their seconds and token counts, and the example prices are typed in the file, and the words and the cost are worked out from them. Nothing is sent and no model runs; the page says the figures are examples. To wire it for real, call both models from run, stream their text into the same pieces, and take seconds and tokens from the responses.
What happens with a prompt of my own?
It is matched by a word to the closest sample, the late-delivery apology if it mentions apologies, lateness or delivery and the database index question otherwise, and the status line says it ran on the closest sample. An empty prompt asks for one and moves focus to the field.
How is the cost worked out?
Tokens times the model's example output price per million tokens, shown to four decimals of a dollar, so a 52-token answer from Orvane 2 reads $0.0008. The sentence compares the unrounded figures, so the ratio does not drift with rounding.
Can both columns use the same model?
No. Choosing the model already on the other side swaps them, so the comparison is always between two different models.