shadcn.io is not affiliated with official shadcn/ui
Writing Assistant AI Block for React
Review a draft one suggestion at a time: six typed suggestions show the struck original and the underlined proposal, Accept replaces the span in the text, and word, sentence and reading-ease figures update as you type.
Installation
Overview
Let people accept edits one by one instead of rewriting a whole text, with this writing assistant for React with Base UI. A hairline frame with a plus mark on each corner holds an editable Textarea with a short draft at the start, and under it three figures worked out from the text as you type: words, sentences and a reading ease from the Flesch formula with a plain word beside it. At the end six suggestions each point at a span of the draft: a Badge names the kind, Clarity, Concise, Grammar or Tone, the original is struck, the proposal is underlined and a short reason follows. Accept replaces that span in the draft, Dismiss sets it aside, and a Native Select shows all of them, the open ones or one kind. If you edit a span away the card says Text changed and switches off. The Shine Button, the only colored control, copies the revised text. Guides rule the bands, and everything moves with CSS only. For editors, note apps and any form field that could use a second pair of eyes.
FAQ
What stays in the page, and how do I make it real?
Everything. The draft and the six suggestions are typed in DRAFT and TIPS, the figures are worked out in the browser, and Copy writes to your clipboard. No model reads your text and nothing is sent. To make it real, return suggestions of the same shape, a span to find, a replacement, a kind and a reason, from your own service, and keep accept as it is.
What does Accept actually do?
It replaces the first place the card's original text appears in the draft with the proposal, a real string replace, and marks the card Applied. Because it works on the text itself, you can edit around a suggestion and it still applies.
What if I edit the text a suggestion points at?
The card reads Text changed and its buttons switch off, because there is nothing left to replace. Reset draft restores the original text and brings every suggestion back.
How is reading ease worked out?
With the Flesch formula: 206.835 minus 1.015 times the words per sentence, minus 84.6 times the syllables per word. Syllables are counted by a vowel-group rule, so it is an estimate, and the result is kept between 0 and 100. Higher is easier to read.