Review changes with the AI Changes extension

Integrate the AI Agent extension with the AI Changes extension to provide a review workflow for AI-generated changes. Allow users to review changes after they are applied to the document.

Setting up the AI Changes integration

This guide walks you through the process of setting up the AI Changes extension for reviewing, accepting and rejecting changes.

Note

We provide a code demo of how to integrate the AI Changes extension in the introduction page.

Step 1: Install both extensions

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

Step 2: Configure both extensions in your editor

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

const provider = new AiAgentProvider({
  appId: 'YOUR_APP_ID',
  token: 'YOUR_JWT_TOKEN',
  reviewOptions: {
    // Set extension to "aiChanges" to use AI Changes for review
    extension: 'aiChanges',
    // Optional: Set autoAccept to "never" to always require review
    autoAccept: 'never',
  },
  // ... other options
})

const editor = new Editor({
  extensions: [
    StarterKit,
    AiAgent.configure({
      provider,
    }),
    AiChanges.configure({
      // Optional: Customize the appearance of AI changes to display a popover when a change is selected
      getCustomDecorations({ change, isSelected, getDefaultDecorations }) {
        const decorations = getDefaultDecorations()
        // Add custom decorations if needed
        return decorations
      },
    }),
  ],
})

Step 3: Configure styles

Customize how the suggestions are displayed in the editor.

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

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

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

How the review workflow works

When the AI Agent makes changes to the document, they are tracked by the AI Changes extension
If autoAccept is set to never or onlyRead (for content-modifying changes), the changes are shown as pending
The provider's state changes to reviewingToolCall
The user can review the changes and decide to accept or reject them
After accepting or rejecting, the conversation continues

Accepting and rejecting changes

You can call these methods to accept or reject changes:

// Accept all pending changes
provider.acceptToolCall()

// Reject all pending changes
provider.rejectToolCall()

Note

If the tool call is rejected, the AI Agent provider will attempt to reset the document to the state before the tool call was executed, with the AI Changes extension. However, if the AI Changes extension is not imported or the extension parameter is set to null, the AI Agent will not be able to reset the document state automatically, so you will need to implement your own logic to handle rejected tool calls and restore the document to a previous state.

A way to handle rejected tool calls without the AI Changes extension is to store the document state before the tool call is applied (when the beforeToolCall event is triggered), and restore it when the tool call is rejected.

Note

The AI Changes extension lets users review changes after they are applied to the document. To review changes before they are applied, integrate the AI Suggestion extension.