AI Diff Suggestion UI: Accept or Reject Edits (React)

AI suggestions presented as an inline diff — deletions struck through in red, additions in green, accepted or rejected one by one.

AI edit suggestions presented as diff markers inside a paragraph of text — deleted original text gets a red background with a strikethrough, added text gets a green background — and hovering a marker floats out small accept and reject buttons: accepting plays a green confirmation animation, rejecting restores the original. A header offers "Accept all" and a remaining count, which suits AI writing assistants, copy polishing, and review workflows.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/ai-diff-suggestion.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Card titletitle

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<AiDiffSuggestion/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/ai-diff-suggestion.en.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/ai-diff-suggestion.

Usage

import {
  AiDiffSuggestion,
  type DiffSegment,
} from "@/components/ui/ai-diff-suggestion";

const segments: DiffSegment[] = [
  { type: "text", content: "Thank you for " },
  { type: "suggestion", id: "s1", removed: "trying", added: "taking the time to experience" },
  { type: "text", content: " our service." },
];

<AiDiffSuggestion
  segments={segments}
  onResolve={(id, action) => console.log(id, action)}
/>

Props

Prop	Type	Default	Description
`segments`	`DiffSegment[]`	—	The sequence of diff segments, interleaving plain text with AI suggestions
`title`	`string`	`"AI modification suggestion"` ("AI edit suggestions")	Card title
`onResolve`	`(id: string, action: "accept" \| "reject") => void`	—	Fires when a single suggestion is accepted or rejected
`onComplete`	`() => void`	—	Fires once when every suggestion has been resolved
`className`	`string`	—	Forwarded to the card's outer container

DiffSegment is a union of two types:

Field	Type	Description
`type`	`"text" \| "suggestion"`	`text` is a plain text segment, `suggestion` is an AI suggestion segment
`content`	`string`	Plain text content (`text` only)
`id`	`string`	Unique identifier of the suggestion, returned through `onResolve` (`suggestion` only)
`removed`	`string`	The original text the suggestion deletes; an empty string means a pure addition (`suggestion` only)
`added`	`string`	The text the suggestion adds; an empty string means a pure deletion (`suggestion` only)

Accessibility

Deletions and additions use the semantic del and ins elements, so assistive technology can tell what kind of revision each one is
Accept and reject are real button elements with an aria-label, focusable with Tab, and the buttons surface automatically on focus
Touch devices have no hover: tapping the marker itself pins the accept / reject buttons in place
When the user has "reduce motion" enabled at the system level, the green confirmation flash and the cascade animation of "Accept all" are skipped and the result is shown directly

AI Diff Suggestion Card