Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chat blocks

Pro

AI Image Generation Chat Block for React

A commission thread with an illustrator: drawn sketch, colour and final plates, Approve and Request changes buttons, a progress list, and a real SVG download of the final.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Run a commission as a conversation, with this image commission chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Sketchbourne, an illustration studio: the top bar names the illustrator, Cosima Ardley, with a four-step progress list (Brief, Sketch, Colour, Delivered), and the log holds Message and Bubble rows with drawn plates between them. "Approve sketch" moves the commission on and, after a typing line, she posts the next version, a different drawing, until the final; "Request changes" puts a note starter in the composer and she answers in words. On the final plate "Download drawing" saves the shown scene as a real SVG file. The composer's Shine Button, the only colored control, sends your notes. It's the starting point for a freelance brief, a design review thread or any approval flow in a chat.

FAQ

What stays in the page, and how do I make it real?

Everything. The three plates are typed drawings made of shapes in greys, nothing is generated, and the illustrator's replies come from a short typed script. Nothing is sent. To wire it for real, post approve and the notes to your project system, append the illustrator's messages and plates to the same list as they arrive, and keep the card for each file you receive.

How does approval work?

Approve sketch and Approve colour are buttons on the newest plate only; older plates go quiet. Pressing one posts your approval, shows a typing line and then adds her message and the next plate, and the progress list moves one step. Both buttons are disabled while she is typing.

What does Download drawing save?

A real SVG file built from the final plate's shapes, named lighthouse-poster-v3.svg, made in your browser with no network request. Open it in any browser or editor.

Is it usable with a keyboard and a screen reader?

The log is a focusable region announced as a log, each plate is a figure with a title and caption, and the progress list marks the current step and says which are done in words. Request changes moves focus to the composer.

How does it look on a phone?

The same single column, with only the current step shown in the progress list. Plates scale to the width, the window keeps its height and only the log scrolls.

All 200 chat blocks