Install Content AI

Please follow the next steps closely in order to prevent any missing settings before you start using Tiptap AI.

Unless you’re an business customer who wants to use custom resolver functions, you’ll need to set up your OpenAI keys in your Tiptap account.

Set up Tiptap AI for your team

This extension relies on using our Content AI backend service. You'll need a valid Entry, Business or Enterprise subscription. Just head over to our pricing page to learn more.

1. You’ll need to provide an OpenAI API token yourself, which we’re using in order to send requests to the OpenAI API. Your token is stored well encrypted and is only used on a per-request basis. Add the OpenAI API Key to your team
2. Generate a JWT (HS256 algorithm) with our provided secret to authenticate the extension against our service. Get your JWT secret.
3. Set up the extension as described below.

Install the extension

Once done, you can install the extension from our private registry:

npm install @tiptap-pro/extension-ai

Initialize the extension

The integration into your editor instance is done like every other Tiptap extension. This is an example on how it could look like:

import { useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Ai from '@tiptap-pro/extension-ai'

const editor = useEditor({
  extensions: [
    StarterKit,
    Ai.configure({
      // Your Tiptap Content AI app id
      appId: 'APP_ID_HERE',
      // This needs to be your generated JWT and MUST NOT be the OpenAI API key!
      token: 'TOKEN_HERE',
      autocompletion: true,
      // … other options (see below)
    }),
    // … more extensions
  ],
})

At this point you’re good to go to use OpenAI in your Tiptap editor. Have a look at the configuration options to customize your experience.