01
Componentsopen source
Signature
An animated SVG signature effect that draws out text as if hand-written.
Back to discovery
Live preview recorded from Dqnamo Kitchen; component and provider source published by JP / dqnamo. Preview: platform recorded · rights authorized.
ComponentFree
Advanced Model Selector
A benchmark-informed picker with model configuration.
dSource LanddqnamoWhy it stands out
A benchmark-informed model picker pairs task intent with model configuration. Opening the selector reveals model choices and supporting metrics, allowing the user to compare options without leaving the workflow.
Prompt
import { useState } from "react";
import {
DEFAULT_LLM_MODELS,
ModelSelectorPrompt,
type ModelConfiguration,
} from "./model-selector-prompt";
export function PromptComposer() {
const [modelValue, setModelValue] = useState("claude-fable-5");
const [configurations, setConfigurations] = useState<
Record<string, ModelConfiguration>
>({});
const [prompt, setPrompt] = useState("");
return (
<ModelSelectorPrompt
configurations={configurations}
models={DEFAULT_LLM_MODELS}
onConfigurationChange={(_, __, nextConfigurations) => {
setConfigurations(nextConfigurations);
}}
onModelChange={(model) => {
setModelValue(model.value);
}}
onPromptChange={setPrompt}
onSubmit={({ model, configuration, prompt }) => {
submitPrompt({ model, configuration, prompt });
}}
prompt={prompt}
value={modelValue}
/>
);
}Discovery vocabulary
Related by governed terms
Continue comparing
06
More from dqnamo