shadcn.io is not affiliated with official shadcn/ui
Code Assistant AI Block for Ark UI
A pairing chat beside two code files: ask for a rename or a discount and the assistant proposes hunks you accept or reject one by one, with Undo, Accept all and a live count of hunks applied.
Installation
Overview
Let people review a model's code changes one hunk at a time, with this code assistant for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Pairfield, a pairing assistant: the chat sits at the start and two files, cart.ts and cart.test.ts, fill the main area in Tabs. A typed script answers "Rename total to subtotal" and "Add a discount" after a typing line, with a folded Reasoning in a Collapsible, and each answer proposes hunks: cards in the code pane with the old lines marked with a minus and the new ones with a plus, and Accept and Reject on each. An accepted hunk is applied to the file on screen (the lines are rebuilt from the original and the accepted set, so the numbers follow), Undo and Reconsider bring a decision back, Accept all takes every pending hunk, and the count in the top bar is derived. The log is made of Message and Bubble rows, the composer is a Textarea with the Shine Button, the only colored control, and below the medium breakpoint a Chat and Code switch shows one side at a time. Guides draw the frame; everything moves with CSS only. For coding assistants and any tool where a person approves each change.
FAQ
What stays in the page, and how do I make it real?
All of it. The two requests, their replies, the reasoning and the hunks are typed in the file, and the accepted set lives in state; nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the request and the open files to your model where post runs, and turn what comes back into hunks of the same shape: a file, the first line it touches, how many lines it drops and the lines that replace them.
How do hunks, Undo and Accept all fit together?
Every hunk is typed against the original file and none overlap, so any set of them applies cleanly. Accept replaces the old lines with the new ones, Reject keeps the old ones, and each decision leaves a one-line caption with Undo or Reconsider that puts the hunk back to pending. Accept all takes the hunks still pending in every file.
How does it work from the keyboard?
Tab runs from the chat to the file tabs, Accept all and then the code pane, where each pending hunk has Accept and Reject buttons named with the hunk number. Enter sends in the composer and Shift and Enter adds a line. After a decision, focus moves to the Undo or Reconsider button that takes its place.
Why is the code drawn by hand and not as one block?
The pane needs a mark on single lines, cards in the middle of a file and numbers that change as hunks apply, which a plain code block cannot do. A small tokenizer in the file colors keywords, strings, numbers and comments with the theme's tokens.