Preview changes with the AI Suggestion extension

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

Setting up the AI Suggestion integration

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

Step 1: Install both extensions

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

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 AiSuggestion from '@tiptap-pro/extension-ai-suggestion'

const provider = new AiAgentProvider({
  appId: 'YOUR_APP_ID',
  token: 'YOUR_JWT_TOKEN',
  reviewOptions: {
    // Set extension to "aiSuggestion" to use AI Suggestion for previewing
    // changes
    extension: 'aiSuggestion',
    // Optional: Set autoAccept to "never" to always require user review
    // before changes are applied
    autoAccept: 'never',
  },
  // ... other options
})

const editor = new Editor({
  extensions: [
    StarterKit,
    AiAgent.configure({
      provider,
    }),
    AiSuggestion.configure({
      loadOnStart: false,
      reloadOnUpdate: false,
      // Optional: Customize the appearance of suggestions.
      // For example, to display a popover when a suggestion is selected.
      getCustomDecorations({ change, isSelected, getDefaultDecorations }) {
        const decorations = getDefaultDecorations()
        // Add custom decorations if needed (see the demo above for an example)
        return decorations
      },
    }),
  ],
})

Step 3: Configure styles

Customize how the suggestions are displayed 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-diff-suggestion--old {
  color: var(--color-red-700);
  background-color: var(--color-red-100);
}

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

.tiptap-ai-diff-suggestion--new * {
  background-color: var(--color-green-100);
}

How the review workflow works

When the AI Agent makes changes to the document, if autoAccept is set to never or onlyRead, the changes are sent to the AI Suggestion extension instead of being directly applied to the document
The AI Suggestion extension displays the changes as suggestions
The user can review the suggestions and decide to accept or reject them
After accepting or rejecting, the changes are applied to the document and 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

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