Tiptap Docs

Install the AI Generation extension

This installation guide relies on using the Tiptap Content AI backend service, if you want to configure it with your own custom LLM you need to follow this guide instead.

Start your Content AI app

  1. Activate a plan: Begin a free trial or choose a subscription.
  2. Configure your AI app. Add your OpenAI API key to your Content AI app.
  3. Set up authentication: Generate a JWT (HS256 algorithm) with our provided secret to authenticate the extension against our service. Get your JWT secret.

Access the Pro registry

The AI Generation extension is published in Tiptap’s private npm registry. Integrate the extension by following the private registry guide. If you already authenticated your Tiptap account you can go straight to #Install.

Install 

npm install @tiptap-pro/extension-ai

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

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

const editor = new Editor{
  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.