Migrate from AI Suggestion to the AI Toolkit

The AI Suggestion extension lets you AI review the document and display suggestions that users can accept or reject.

You can achieve the same functionality with the AI Toolkit by following the Proofreader guide.

Reviewing the document

In the Proofreader guide, the setHtmlSuggestions method is used to display a list of suggestions that users can accept or reject, from HTML content that was generated by an AI model.

It's recommended to have a look at the API reference of the setHtmlSuggestions method to learn more about its parameters and customization options.

Accepting and rejecting suggestions

To learn more about how suggestions are stored and managed, have a look at the API reference of the suggestions utilities.

In particular, use the applySuggestion method to accept a suggestion.

Customizing the appearance of the suggestions

The appearance of the suggestions can be completely customized with the AI Toolkit's options. See the Style suggestions guide.

You can also render React and Vue components inside a suggestion, using the renderDecorations option. See the API reference. This option can be configured to render a popover or a tooltip when a suggestion is selected.

Improving speed and performance

The AI Toolkit's suggestions utility is significantly faster than the AI Suggestion extension, because it lets you stream suggestions (see the Proofreader guide for an example). This is a major improvement over the AI Suggestion extension, where suggestions were loaded all at once, which could cause performance issues when there were a lot of suggestions.

The AI Toolkit also provides a way to split the document into chunks. Then, each of these chunks can be sent to the AI and processed independently. Parallelizing the processing of the chunks can significantly improve latency.

import { getChanges } from './api'

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

// Split the document into chunks of the default size
const chunks = toolkit.getHtmlChunks()

// Iterate over each chunk.
for (const chunk of chunks) {
  // Call the AI to generate the changes that should be applied
  // to that chunk.
  const changes = await getChanges(chunk.content)
  // Set the suggestions using the `setHtmlSuggestions` method,
  // only on the range of that chunk.
  toolkit.setHtmlSuggestions({
    range: chunk.range,
    changes,
  })
}