shadcn.io is not affiliated with official shadcn/ui
Message With Artifacts AI Block for React
An answer that opens as a document: an artifact card in the chat opens a pane with a version picker, a line diff against the version before, Copy, a real Markdown download and Close.
Installation
Overview
Give long answers a place to live beside the conversation, with this artifact message for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Craftloft, a planning assistant. The first answer carries an artifact card, "Q3 launch plan, Document, v3": pressing it opens the document in the pane at the end with a quick fade, and Close puts focus back on the card. The pane has a Native Select for the version (v1 to v3 with fixed dates), a Switch that draws the line diff against the version before it with a plus or minus in the gutter, Copy, which puts the real Markdown on the clipboard, and Download, which saves a real .md file. The chat is made of Message and Bubble rows with a Typing Indicator Text; the composer's Shine Button, the only colored control, sends a sample question, and becomes Stop while a reply arrives. Guides draw the frame, and everything moves with CSS only. For documents, plans, code files and any answer people keep.
FAQ
What stays in the page, and how do I make it real?
Everything. The three versions of the plan are arrays of lines in the file, the replies are a typed script keyed on words in your question, and the diff is computed in the browser from two of those arrays. Copy and Download use the text on screen. Nothing is sent and no model runs. To wire it for real, store each artifact version your model returns in the same shape, and open the card from the message that carries it.
How is the diff worked out?
Show changes compares the version on screen with the one before it, line by line: a line only in the older one is removed, a line only in the newer one is added, and the rest are kept. Added lines are tinted and carry a plus, removed ones are struck through and carry a minus, and screen readers hear "Added" or "Removed" before each. Version 1 has nothing before it, so it is shown whole.
What do Copy and Download produce?
The Markdown of the version you are looking at: headings with hashes and list items with dashes. Download names the file with the version, for example q3-launch-plan-v3.md. The status line at the foot of the window says what was copied or saved.
Where does focus go when I open and close the document?
Opening moves focus to the document's title so a keyboard or screen reader user lands in it; Close, and Back on a phone, return it to the card that opened it. The pane's text is a focusable region, so it scrolls with the keyboard.