Tiptap Editor 3.0 Beta is out. Start here
Tiptap Docs

Review AI-generated changes

The AI Agent extension can be integrated with the AI Changes extension to provide a review workflow for AI-generated changes. This allows users to see, accept, or reject changes made by the AI Agent before they are applied to the document.

Setting up the AI Changes integration

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',
  // Set autoAccept to "never" to always require review
  autoAccept: 'never',
  // Enable AI Changes integration (enabled by default)
  useAiChangesExtension: true,
})

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
      },
    }),
  ],
})

How the review workflow works

  1. When the AI Agent makes changes to the document, they are tracked by the AI Changes extension
  2. If autoAccept is set to never or onlyRead (for content-modifying changes), the changes are shown as pending
  3. The provider's state changes to reviewingToolCall
  4. The user can review the changes and decide to accept or reject them
  5. 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 if useAiChangesExtension is set to false, 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.

Auto-accept configuration

To control whether tools are automatically applied or need to be reviewed by the user, configure theautoAccept option.

  • "always": All tools are automatically applied without review
  • "never": All tools require user review and explicit acceptance
  • "onlyRead": Only tools that modify the editor content require review; read operations are auto-accepted.
// Configure auto-accept behavior
const provider = new AiAgentProvider({
  // ...other options
  autoAccept: 'onlyRead', // Default setting
})

// Change auto-accept behavior at runtime
provider.setAutoAccept('never')