shadcn.io is not affiliated with official shadcn/ui
Multimodal Chat AI Block for Ark UI
A narrow window where a plus menu attaches a typed sample photo, voice note or file to a tray, the sent message shows a drawn plate, a bar waveform with a Play sweep and a file card, and the assistant answers by kind.
Installation
Overview
Let people show an assistant things, with this multimodal AI chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Mediawren, a show-and-tell assistant. The composer's plus Dropdown Menu offers a Photo, a Voice note and a File, each a typed sample (a lighthouse sketch, a 6-second note, a small budget table) that becomes a chip in a tray above the field with a Remove button. Sending shows them in your message: a drawn greyscale plate, a voice clip of drawn bars with "0:06, No audio in this demo" and a Play button whose sweep runs across the bars for the clip's length, and a file card. The assistant answers by kind, in pieces after a Typing Indicator Text, one part for each thing you attached. The Shine Button is the only colored control, and the frame is ruled by Guides.
FAQ
What stays in the page, and how do I make it real?
Everything. The three samples, the plate, the waveform and the replies are typed or drawn in the file. Nothing is uploaded, recorded or played, no image is analysed and no model runs; the assistant's "I can see a lighthouse sketch" is a sentence in the script. To wire it, replace the menu items with a file picker and a recorder, send the files with the message in post, and render the model's answer where the reply is built.
How does it answer by kind?
replyFor builds the reply from what is in the tray: a sentence about the photo, a typed transcript for the voice note and a summary for the file, in that order, and a hint to use the plus button when the message carries nothing. Text alone gets the same hint, so the demo never pretends to understand it.
What does Play do with no audio?
It runs a tint across the bars for exactly the clip's six seconds and says "There is no audio in this demo" in the status line. Pressing it again stops the sweep. Under reduced motion the sweep is skipped. The drawn plate has a text title for screen readers.
Can I attach the same thing twice?
No: each kind can be in the tray once, and the status line says so. Remove takes a chip out, and focus returns to the field. You can send attachments with no text; the message then carries a hidden line naming them.
Is it usable with a keyboard and a screen reader?
The plus button opens a menu whose items are named Photo, Voice note and File; chips have Remove buttons named for their file; the log is a focusable region announced as a log, and each of your messages starts with a hidden "You, 11:23. Attached: photo."