shadcn.io is not affiliated with official shadcn/ui
Split Panel Chat AI Block for Solid
A chat that builds a page beside you: a draggable divider splits the log from a pane with Preview, Code and Console tabs, and asking for pricing or a footer advances the page from version 1 to 3.
Installation
Overview
Let people watch what they ask for take shape, with this split panel chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Splitwright, a page-building assistant: the chat sits at the start and a pane at the end, with a Resizable divider between them that you drag or move with the arrow keys. The pane's Tabs show a drawn greyscale landing page for a bike repair shop under Preview, its markup under Code and the typed build lines under Console. Asking for "add pricing" or "add a footer" in the composer advances the page from version 1 to version 3: a typing line shows first, the reply arrives in a few pieces, Send turns into Stop while it does, and the pane changes when the reply is done. Messages are 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 Preview switch in the top bar shows one side at a time. Guides draw the frame; everything moves with CSS only. For page builders, design assistants and any chat that produces something to look at.
FAQ
What stays in the page, and how do I make it real?
Everything. The replies are a short typed script keyed on words in your message ("pricing", "footer"), the three page versions, their markup and their build lines are constants in the file, and the preview is drawn from boxes, not generated. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send post's text to your model where the code says so, stream its answer into the same pieces, and render the pane from what your tool returns.
How does the divider work?
It is the catalog Resizable's trigger: a separator you drag with a pointer or move with the arrow keys, announced with its value, and kept between 30 and 62 percent for the chat. The sizes live in state, so you can store the layout between visits. Below the medium breakpoint the divider is hidden and the two sides never show together.
What does Stop do?
While a reply is arriving, the Send button is replaced by an outline Stop button in the same place. Pressing it keeps the words that arrived, marks the turn "Stopped", builds nothing and leaves the page at its version. Focus returns to the composer.
What happens with reduced motion?
The typing line still shows for its short wait, then the whole reply lands at once instead of in pieces, and the pane changes with it. The typing dots hold still.