How do I build an LLM comparison or eval UI?

Use Model Comparison to render two responses side by side with blind mode and a vote bar — suitable for human-preference evals. Pair it with Prompt Templates so testers can reuse curated prompts.

UI pour les agents IA

Compare LLM responses in your UI

Evaluating models — or letting users pick a winner — needs a side-by-side surface. Compare two responses with optional blind mode and a vote bar, and give users a reusable, fillable prompt library to test with.

Composants que vous utiliserez

Model ComparisonCompare AI model responses side by side in React: optional blind mode, metadata stats, and a vote bar. Evaluate LLMs in your UI. Install via the shadcn CLI.
Prompt TemplatesSearchable prompt template gallery in React: category filter, variable fill-in form, and onSelect. Ship a reusable prompt library. Install via the shadcn CLI.

Installation

Ajoutez chaque composant ci-dessus avec la CLI shadcn. Vous possedez le source apres installation.

pnpm dlx shadcn@latest add https://ui.vllnt.com/r/model-comparison.json
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/prompt-templates.json

Questions frequentes

How do I build an LLM comparison or eval UI?: Use Model Comparison to render two responses side by side with blind mode and a vote bar — suitable for human-preference evals. Pair it with Prompt Templates so testers can reuse curated prompts.

Parcourir tous les composants d'agents IA