Install the AI Changes extension

The AI Changes extension is available as an npm package through our private registry. Follow these steps to install and set it up in your project.

Install the extension

The AI Changes extension is published in Tiptap's private npm registry. Integrate the extension by following the private registry guide.

Once you're ready you can install it like any other Tiptap Pro extension.

npm install @tiptap-pro/extension-ai-changes

Initialize the extension

Integrate AI Changes into your editor instance just like any other Tiptap extension. Here's an example implementation:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import AiChanges from '@tiptap-pro/extension-ai-changes'

const editor = new Editor({
  extensions: [
    StarterKit,
    AiChanges,
    // … more extensions
  ],
})

You will also need to set up the CSS styles so that the changes are visible in the editor.

:root {
  --color-green-100: oklch(0.962 0.044 156.743);
  --color-green-700: oklch(0.527 0.154 150.069);
  --color-red-100: oklch(0.936 0.032 17.717);
  --color-red-700: oklch(0.505 0.213 27.518);
}

.tiptap-ai-changes--old,
.tiptap-ai-changes--old > * {
  color: var(--color-red-700);
  background-color: var(--color-red-100);
}

.tiptap-ai-changes--new,
.tiptap-ai-changes--new > * {
  color: var(--color-green-700);
  background-color: var(--color-green-100);
}

Start tracking changes

To begin tracking changes, call the startTrackingAiChanges command. This creates a snapshot of the current editor content that will be compared with any new content generated by the AI.

editor.commands.startTrackingAiChanges()

After calling this command, any modifications to the editor content—whether made manually or through the AI Generation extension—will be tracked and displayed as changes.

Accept or reject changes

The extension provides several commands to review changes:

// Accept a specific change
editor.commands.acceptAiChange(changeId)

// Reject a specific change
editor.commands.rejectAiChange(changeId)

// Accept all changes
editor.commands.acceptAllAiChanges()

// Reject all changes
editor.commands.rejectAllAiChanges()

Stop tracking changes

When you're finished reviewing changes, call the stopTrackingAiChanges command to end the tracking session:

editor.commands.stopTrackingAiChanges()

This removes the snapshot of the previous document and stops displaying change highlights.

For more detailed information about reviewing, accepting, and rejecting changes, see the reviewing content guide.