Diff view

Use the AI Suggestion extension to preview changes before they are applied to the document. Display changes in a diff view, and enable users to accept/reject individual changes.

Note

To review changes after they are applied to the document, see the AI Changes extension.

Beta feature

The diff view API is experimental and might change in the future. We appreciate your feedback! Contact us.

Setup guide

Step 1: Configure the AI Suggestion extension

Initialize the Editor instance with the AI Suggestion extension. Disable automatic loading of suggestions.

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

const editor = new Editor({
  content: '<p>This is the initial content of the document</p>',
  extensions: [
    StarterKit,
    AiSuggestion.configure({
      // Disable automatic loading of suggestions
      loadOnStart: false,
      reloadOnUpdate: false,
    }),
  ],
})

Step 2: Define a rule to group diff suggestions

Every suggestion must be associated with a rule. In this case, we want to display the diff as a list of suggestions that belong to the 'diff' rule.

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

const editor = new Editor({
  content: '<p>This is the initial content of the document</p>',
  extensions: [
    StarterKit,
    AiSuggestion.configure({
      // Disable automatic loading of suggestions
      loadOnStart: false,
      reloadOnUpdate: false,
      rules: [
        {
          id: 'diff',
          // Title, prompt, and color are not used in the diff view
          title: '',
          prompt: '',
          color: '#000',
          backgroundColor: '#fff',
          // Do not send this rule to the AI model to generate suggestions
          ignoreInTiptapCloud: true,
          // Display suggestions in a diff format
          displayAsDiff: true,
        },
      ],
    }),
  ],
})

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);
}

Learn how to add advanced styles to suggestions in the styling guide.

Step 4: Generate suggestions

Generate suggestions by passing the new content of the document to the resolver function (in html format). The AI Suggestion extension will compare the new content with the current content and generate a list of suggestions that belong to the 'diff' rule defined earlier.

editor.commands.loadAiSuggestions({
  resolver: async (options) => {
    const newSuggestions = await options.defaultResolver({
      ...options,
      apiResolver: async () => {
        return {
          format: 'fullHtml',
          content: {
            items: [
              {
                ruleId: 'diff',
                fullHtml: '<p>This is the new content of the document</p>',
              },
            ],
          },
        }
      },
    })

    return newSuggestions
  },
})

Step 5: Review suggestions

Reviewing diff-based suggestions is done the same way as regular suggestions. See the apply suggestions guide for more information.