Tiptap Docs

Review changes

After the Server AI Toolkit edits a document on the server, you can display a review UI on the client so users can accept or reject the changes before they are applied.

This guide shows how to use the client-side AI Toolkit's setSuggestions method with the compareDocuments format to show a diff of the server-side changes.

How it works

  1. The Server AI Toolkit edits the document on the server and returns the updated document.
  2. On the client, you pass the updated document to the AI Toolkit's setSuggestions method using the compareDocuments format.
  3. The AI Toolkit compares the current editor document with the updated document and displays the differences as suggestions.
  4. Users can accept or reject individual changes, or accept/reject all changes at once.

Display the diff

After receiving the updated document from the Server AI Toolkit, use setSuggestions to show the changes:

import { getAiToolkit } from '@tiptap-pro/ai-toolkit'
import { Node } from '@tiptap/pm/model'

// Get the AI Toolkit instance from the editor
const toolkit = getAiToolkit(editor)

// `doc` is the updated document returned by the Server AI Toolkit.
// Convert it to a ProseMirror Node with the editor's schema.
const otherDoc = Node.fromJSON(editor.state.schema, doc)

// Display the diff
toolkit.setSuggestions([
  {
    format: 'compareDocuments',
    doc: otherDoc,
  },
])

Schema compatibility

The document returned by the Server AI Toolkit must be converted to a ProseMirror Node using the editor's schema. Use Node.fromJSON(editor.state.schema, doc) to ensure both documents share the same schema.

The editor will now display the differences between the current document and the server-edited version, with deletions highlighted in red and insertions in green.

Style the diff

Add CSS to style the suggestions as a red/green diff:

/* Highlight deleted text in red */
.tiptap-ai-suggestion,
.tiptap-ai-suggestion > * {
  background-color: oklch(80.8% 0.114 19.571);
}

/* Highlight inserted text in green */
.tiptap-ai-suggestion-diff,
.tiptap-ai-suggestion-diff > * {
  background-color: oklch(87.1% 0.15 154.449);
}

Accept or reject changes

Once the diff is displayed, users can accept or reject changes using the suggestion methods:

const toolkit = getAiToolkit(editor)

// Accept all changes
toolkit.acceptAllSuggestions()

// Reject all changes
toolkit.rejectAllSuggestions()

// Or handle individual suggestions
const suggestions = toolkit.getSuggestions()
toolkit.acceptSuggestion(suggestions[0].id)
toolkit.rejectSuggestion(suggestions[1].id)

Next steps

PreviouslyAI agent chatbot