Tiptap Docs

Review AI changes

With the AI Changes extension, you can introduce a review workflow for AI-generated content, so that users can correct and approve the changes made by the AI.

Start tracking changes

To start tracking changes, use startTrackingAiChanges command.

editor.commands.startTrackingAiChanges()

It creates a snapshot of the editor's content at the moment of running the command. From then on, all new changes to the document will be compared to this snapshot and displayed in the editor.

The most common pattern is to call startTrackingAiChanges immediately before generating AI content. This allows you to capture all AI-generated changes for review. For example, you can chain it with the AI Generation extension commands:

editor
  .chain()
  .startTrackingAiChanges()
  .aiTextPrompt({ text: 'Write a blog post about Tiptap' })
  .run()

You can access the snapshot of the previous document with the getPreviousDoc method of the extension's storage object:

const storage = editor.extensionStorage.aiChanges
const previousDoc = storage.getPreviousDoc()

This will return a Prosemirror Node object that represents the previous document.

When you call the startTrackingAiChanges command, you can provide an optional previous document. This is useful when you want to compare the new changes with a different document than the one currently in the editor.

editor.commands.startTrackingAiChanges(previousDoc)

Access changes data

The AI Changes extension provides several extension storage methods to retrieve the tracked changes:

  • getChanges: Returns a list of all the changes made to the document since the last time startTrackingAiChanges was called.
  • getSelectedChange: Returns the currently selected change. A change is selected when the cursor is on top of it.
  • getIsTrackingAiChanges: Returns a boolean that indicates if the editor is currently tracking AI changes.
  • getIsShowingAiChanges: Returns a boolean that indicates if the editor is currently showing the AI changes. AI changes can be temporarily hidden with the setShowAiChanges command.
  • getPreviousDoc: Returns the previous document before the AI made changes. If the extension is currently not tracking changes, this will be null.

To learn how to use these methods to display changes in your editor, see the Display AI Changes guide.

Accept and reject changes

The AI Changes extension provides several commands to review changes.

To accept a change, call the acceptAiChange command. This will modify the snapshot of the previous document to include the change.

editor.commands.acceptAiChange(changeId)

To reject a change, call the rejectAiChange command. This will modify the current editor content to match the previous document in the range of that change.

editor.commands.rejectAiChange(changeId)

To accept all AI changes, use the acceptAllAiChanges command.

editor.commands.acceptAllAiChanges()

To reject all AI changes, use the rejectAllAiChanges command.

editor.commands.rejectAllAiChanges()

Stop tracking changes

Finally, to stop tracking AI changes, run the stopTrackingAiChanges command. This will remove the snapshot of the previous document and stop tracking changes.

editor.commands.stopTrackingAiChanges()

The previous document snapshot will be set to null, and the editor will no longer display the changes made by the AI.

You can learn more about the AI Changes extension commands in the API Reference.