shadcn.io is not affiliated with official shadcn/ui
Canvas Chat AI Block for Solid
Edit a draft with the assistant in the margin: select a paragraph, make it shorter, friendlier or add an example, and step through the versions with a strip, Undo and a live word count.
Installation
Overview
Let people shape a draft while they talk about it, with this canvas chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Canvasmere, a drafting assistant: the chat sits in a margin at the start and a five-paragraph draft fills the main area. Each paragraph is a button you press; the selected one shows a bar under it with Shorter, Friendlier and Add an example, and each applies a typed variant of paragraphs 1 to 3 (the others say there is no sample edit for them in this demo). Every edit becomes a version: a strip of v1, v2 and so on grows along the toolbar and restores that version when pressed, Undo steps back one, the word count follows the text on screen, and the chat log notes each change ("Made paragraph 2 shorter"). The log is made of Message and Bubble rows with a Typing Indicator Text, the composer is a Textarea with the Shine Button, the only colored control, and below the medium breakpoint a Chat and Canvas switch shows one side at a time. Guides draw the frame; everything moves with CSS only. For writing tools, document editors and any chat that edits something in place.
FAQ
What stays in the page, and how do I make it real?
Everything. The draft, the variants of its first three paragraphs and the chat replies are typed in the file; the version list lives in state and goes when you leave. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the selected paragraph and the action to your model where edit runs, and push the text it returns as the next version with the same label.
How do versions, Undo and the strip fit together?
Each edit adds a version after the one on screen; the strip lists every version and pressing one shows it. Undo moves one version back without deleting the later ones, so you can step forward again from the strip. Editing while an older version is on screen starts a new line of versions from that point.
What if I press the same edit twice?
The status line says the paragraph already reads that way and no new version is made, since the sample variant would be the same text. Pressing Friendlier after Shorter switches to the friendly variant of the original paragraph, because each variant is typed against the original wording.
How does it work from the keyboard?
Tab reaches each paragraph; Enter or Space selects it, which puts its three edit buttons right after it in the tab order. The version strip, Undo and the composer are ordinary buttons and a labelled field. Pressing a paragraph again clears the selection.