Writing Assistant / Smart Suggestion

Editor with an assistant sidebar: pick an action, preview the suggestion as a word diff, accept or discard. `rewrite` is your model call; the demo ships a deterministic fake so it runs offline. The draft is controlled (`value`/`onChange`) or uncontrolled (`defaultValue`); Accept goes through `onChange` too.

Import

import { WritingAssistant } from '@marbleui/ui'

Props

<WritingAssistant>

Prop	Type	Default
className	`string`	`—`
defaultValue	`string`	`''`
onChange	`(value: string) => void`	`—`
rewrite	`(text: string, action: RewriteAction) => Promise<string>`	`fakeRewrite`
value	`string`	`—`

Usage notes

Plain-text draft with an assistant sidebar: pick Improve, Shorten, Formal or Friendly, preview the rewrite as a word diff, then Accept or Discard. For formatted text use RichTextEditor.

<WritingAssistant
  defaultValue={draft}
  rewrite={async (text, action) => (await api.rewrite({ text, action })).text}
/>

Pass rewrite; without it you get fakeRewrite, an offline stand-in made of regex tweaks.
The draft is controlled (value + onChange) or uncontrolled (defaultValue). Accepting a suggestion goes through onChange too.
rewrite gets the whole draft, not a selection. A rejected promise shows a short “Couldn’t rewrite” note and re-enables Suggest. If the draft is edited while a request is in flight, the result is dropped with a note to suggest again, so Accept never overwrites newer edits.
Typing discards the current suggestion. The suggestion area is a polite live region.

Example source · show

import { WritingAssistant } from './writing-assistant'

export const styles = { Default: () => <WritingAssistant defaultValue="hey team, thanks for a lot of very good work this sprint! we're really close to launch and i just want to say we can't do it without you." /> }

Source: packages/ui/src/writing-assistant/writing-assistant.tsx

Catalog