Prompt builderPro
A structured prompt: subject, style, lighting, lens, composition and mood rows of chips and free text, compiled live into one prompt with copy, weights and edit as text.
On this page
ProSubject, style, lighting, lens, composition and mood rows compiled live into one prompt.
Installation
Usage
import { PromptBuilder } from "@/components/ui/chatcn/pro/prompt-builder"
<PromptBuilder onPromptChange={setPrompt} />Rows default to subject, style, lighting, lens, composition and mood; pass rows for your own. Type a term and press Enter or a comma to add it. Edit as text opens the compiled prompt in a textarea; applying it parses terms back into rows (the row that suggests a term wins, new terms go to the first row). compilePrompt and parsePrompt are exported for server use.
Examples
Weights
Weights mode gives every selected term a weight from 0.1 to 2. The prompt compiles to term::1.2, shown as quiet marks so the words stay readable.
ProEach term with a weight, compiled as term::1.2 and shown as quiet marks in the prompt.
States
ProEmpty and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
rows | PromptBuilderRow[] | id, label, options, placeholder |
value, defaultValue, onValueChange | Record<string, WeightedTerm[]> | Terms per row |
onPromptChange | (prompt: string) => void | The compiled prompt |
weights, defaultWeights, onWeightsChange | boolean | |
weightRange | { min, max, step } | Default 0.1 to 2, step 0.1 |
separator | string | Default , |
disabled | boolean |
Keyboard
| Key | Action |
|---|---|
Space, Enter on a chip | Toggle the term |
↑ ↓ on a selected chip | Change its weight by 0.1 in weights mode |
Enter or , in a field | Add the typed term |
Backspace in an empty field | Remove the last custom term |
⌘ + Enter in edit as text | Apply the text; Esc cancels |
Accessibility
- Each row is a labelled group; chips are toggle buttons with
aria-pressed. - In weights mode a selected chip describes its weight and how to change it.
Motion
- Chips change fill in 150 ms with the 0.97 press. The compiled prompt never animates: people read it while they click.