Install the AI Suggestion extension

This setup guide will help you integrate the AI Suggestion Extension from scratch into your application.

Install

The AI Suggestion extension is published in Tiptap’s private npm registry. Integrate the extension by following the private registry guide.

Once you're ready you can install it like any other Tiptap Pro extension.

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

Import the extension in your editor

Add the AiSuggestion to the list of extensions.

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

// Initialize the editor
const editor = new Editor{
  extensions: [
    StarterKit,
    AiSuggestion.configure({
      // Define suggestion rules
      rules: [
        {
          id: '1',
          title: 'Spell Check',
          prompt: 'Identify and correct any spelling mistakes',
          color: '#DC143C',
          backgroundColor: 'FFE6E6',
        },
      ],
      // Configure Content AI Cloud (see next section)
      appId: 'APP_ID_HERE',
      token: 'TOKEN_HERE',
      // … other options
    }),
    // … more extensions
  ],
  // Recommended: disable spellcheck to avoid conflicts
  editorProps: {
    attributes: {
      spellcheck: false,
    },
  },
})

Decide how suggestions are generated

The next step is to configure a way to generate the suggestions that will be displayed in the editor.

The easiest way to get started with the AI Suggestion extension is to use Tiptap Content AI Cloud. Our API will generate suggestions from your rules and content. Follow this setup guide: Use Tiptap Content AI Cloud.

You can also use your own backend and LLMs to generate proofreading suggestions. You can find a guide here: Integrate your own backend and LLMs.

Customize the User Interface

Finally, you’ll need to configure the editor styles so that the suggestions are displayed in the UI.

By default, the AI Suggestions have CSS classes and color attributes to help you style them. Use these CSS styles to show a colored underline below the suggestions.

.tiptap-ai-suggestion {
  border-bottom: 2px solid var(--tiptap-ai-suggestion-color);
  margin-bottom: -2px;
}

.tiptap-ai-suggestion--selected {
  background-color: var(--tiptap-ai-suggestion-background-color);
  transition: background-color 0.5s;
}

You can customize the suggestions' appearance even more by providing custom decorations. To show a tooltip or a popover when you select a suggestion, follow this guide.