Image prompt composer
A prompt box for image generation. Add reference images and say what each is for, pick shape, style and count from small menus, list what to leave out, and have the prompt rewritten in more detail.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/image-prompt-composer.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/image-prompt-composer.json
Usage & API
Example
import { ImagePromptComposer } from "@/components/ai/image-prompt-composer"
<ImagePromptComposer
value={value}
onChange={() => {}}
onGenerate={() => {}}
styles={[]}
/>Props ImagePromptComposer
| Prop | Type & description | Required |
|---|---|---|
value | ImageSettings | Required |
onChange | (value: ImageSettings) => void | Required |
onGenerate | (value: ImageSettings) => void | Required |
onStop | () => void | Optional |
onEnhance | (prompt: string) => Promise<string> | stringReturn a fuller prompt. It is typed into the box, with an undo. | Optional |
styles | ImageStyle[] | Required |
generating | boolean | Optional |
progress | number0 to 1 while generating. | Optional |
creditsPerImage | number | Optional |
maxCount | number | Optional |
maxReferences | number | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Default is the only variant. The reference row is a list labelled Reference images. Each thumb's name says the file name, used for the role, and Change. The menu is a radio group labelled Use this image for, plus a Remove row. A hover button also removes the image and is labelled Remove plus the name. The prompt textarea is labelled Image prompt and grows up to 168 pixels. Leave out is a pill, Leave something out, which reveals a field whose placeholder is text, watermarks, extra people. Clearing it is Remove what to leave out. Aspect ratio opens a radio group of the eight ratios beside a live rectangle of the current shape. Style opens a radio group labelled Style, with None and a swatch per style you passed. The trigger reads Style, or the style name. Number of images is a radio group of 1 through maxCount. Add a reference image disables when the cap is hit, and its title says Up to that many references. Submit's name is Generate plus the count and image or images, and it stays disabled while the prompt is empty, while enhancing, or while generating. A drop overlay covers the card while a drag is inside. It reads Drop to use as a reference, or Up to the maxReferences count once there is no room left. A polite live region says Generating or Rewriting prompt while those states are on.
Choosing a layout
Use it when the request is a picture and the settings have to travel with the prompt. onGenerate receives the whole settings object. You send that to whatever generates the image. The empty placeholder is Describe an image, or drop one in to start from. Enter submits, with the same Shift and IME exceptions as a chat field, and it also submits from the leave-out input. Prompt input is the wrong box here. Its hero can say Add image, but that button is unwired and there is no aspect, no style and no avoid line. Attachments tray's image grid is closer when the job is reordering existing shots and marking a reference, without a style menu.
Skip the composer when you only need to show pictures that already exist. The bottom of the file draws a result batch with per-image labels, Generated image or Generating image plus the index, but the settings form is the component you place. If you do not pass onEnhance, the wand button is omitted. If you do not pass onStop, the stop button during generating is disabled. creditsPerImage is optional. Leave it unset and the credit count stays hidden, so a product that does not sell credits does not have to invent a number.
The rewrite button is missing, and Stop does nothing while an image is generating.
Both are optional props. The wand renders only when onEnhance is passed, and it is disabled when the prompt is empty or a rewrite or a generation is already running. The stop control renders when generating is true, and it is disabled when onStop is missing. Its label still includes the percent from progress. You set generating and progress yourself. The composer does not time the job. Undo rewrite only appears after a successful enhance, and it forgets the previous prompt after 7 seconds.
What is stored for a reference that came from a file drop versus a demo swatch?
addFiles keeps image files, up to the free slots under maxReferences, and the src becomes an object URL. preview is a CSS background used when there is no src, which is how a demo can show a chip without a file. The role defaults on insert. Change it from the radio group. Removing a reference revokes the object URL when src starts with blob:. The prompt string does not embed the image. onGenerate gets references as data, and your request has to send the bytes.