Reference Tray
Reference images for edits and multi-reference generations, numbered the way prompts address them: “the jacket from image 2”.
1
2
In use
Inside the Playground's prompt, above its text. Drop or paste images onto the prompt, or add them from the toolbar; each model takes its own number.
Your image will appear here
Your image will appear here
Your image will appear here
Your image will appear here
Paint over what to change. Tab reaches the marks: arrow keys move one, Enter edits its note, Delete removes it.
Your video will appear here
Installation
pnpm dlx shadcn@latest add https://mgp.paukraft.com/r/reference-tray.jsonReferenceTray
| Prop | Type | Default |
|---|---|---|
| images | { id, src, file?, name? }[]In order: the first is image 1. | — |
| max | numberHides the add tile once reached. REFERENCE_LIMITS has each model's. | — |
| onAdd | (files: File[]) => voidPicked or dropped image files. Omit to hide the add tile. | — |
| onRemove | (id: string) => voidThe corner button, or Delete on a focused tile. | — |
| onReorder | (images) => voidDrag, or Alt + arrow keys. Omit to keep the order fixed. | — |
| itemLabel | stringNames tiles for screen readers, e.g. "Image 2: jacket.jpg". | "Image" |
Helpers
| Prop | Type | Default |
|---|---|---|
| useReferenceImages | ({ max?, initial? }) => propsThe tray's state; spread it on. Picked files become object URLs, released on removal. | — |
| toMedia | (source: string | Blob) => Promise<string>A reference as the API takes it: its URL, or its file as base64. From @/lib/media. | — |
| REFERENCE_LIMITS | { flux3Image: 10, flux2: 8, flux2Klein: 4, kontext: 4, … }How many references each model takes. | — |