Four composers for AI products — an image prompt with references, a capsule that grows as you type, a playground with model and temperature controls and a metered box that prices each send.
Image prompt
image-prompt.tsxLarge image-prompt composer with drawn reference thumbnails, style chips, an aspect selector with a sliding thumb and an image counter.
| Prop | Type | Default | Description |
|---|---|---|---|
onGenerate | (request: ImagePromptRequest) => void | — | Called with { prompt, styles, aspect, count, references }. |
generating | boolean | false | Turns Generate into Stop. |
onStop | () => void | — | Called by the Stop button. |
styles / defaultStyles | string[] | — | Chip options and the ones on at start. |
maxStyles | number | 3 | Most chips on at once; the oldest turns off. |
aspects / defaultAspect | AspectRatio[] / AspectRatio | "4:5" | Ratios offered and the initial one. |
counts / defaultCount | number[] / number | [1, 2, 4] / 2 | Image counts offered. |
defaultReferences | ImagePromptReference[] | — | Initial reference chips ({ id, name, tone? }). |
defaultValue / placeholder | string | — | Initial prompt and placeholder. |
Capsule
capsule.tsxFully rounded single-line capsule that springs taller and softens its corners as text wraps; voice swaps to send once you type.
| Prop | Type | Default | Description |
|---|---|---|---|
onSubmit | (value: string) => void | — | Enter sends; Shift+Enter adds a line. |
onAttach | () => void | — | Shows the plus button. |
onVoice | () => void | — | Shows a voice button while the field is empty. |
maxRows | number | 6 | Lines before the field scrolls. |
placeholder | string | "Message GetUrUI" | Field placeholder. |
disabled | boolean | — | Disables the composer. |
Playground
playground.tsxPlayground composer with a toolbar: model menu, temperature popover with presets and a slider, max-token switch and tool toggles.
| Prop | Type | Default | Description |
|---|---|---|---|
onRun | (prompt: string, settings: PlaygroundSettings) => void | — | Run button or Cmd/Ctrl+Enter. |
running | boolean | false | Turns Run into Stop. |
onStop | () => void | — | Called by Stop. |
models | PlaygroundModel[] | — | Model menu options ({ id, label, description? }). |
defaultSettings | Partial<PlaygroundSettings> | — | Initial { model, temperature, maxTokens, tools }. |
onSettingsChange | (settings: PlaygroundSettings) => void | — | Called on every settings change. |
Metered
metered.tsxComposer with a credit meter that previews the draft's cost as you type and ticks the balance down with a flying debit chip on send.
| Prop | Type | Default | Description |
|---|---|---|---|
credits / defaultCredits | number | 1240 | Controlled or initial balance. |
maxCredits | number | 2000 | Plan size; the meter's scale. |
estimateCost | (text: string) => number | — | Cost of a draft. Default: 4 + 1 per 60 characters. |
onSubmit | (value: string, cost: number) => void | — | Called after a send. |
onCreditsChange | (credits: number) => void | — | Called with the new balance. |
onTopUp | () => void | — | Shows Top up when the balance runs low. |
lowThreshold | number | 0.15 | Fraction of the plan that turns the meter ember. |
resetLabel | string | "Resets Oct 1" | Small print beside the meter. |
Install the whole set
Installs every prompt composers variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Every textarea is labelled; IME composition is respected before Enter or Cmd/Ctrl+Enter submits.
- Chips and toggles use aria-pressed; aspect ratio, image count and token limits are radio groups; popovers close on Escape and return focus.
- Icon buttons carry labels that describe the current action (send, stop, voice, remove).