Tiptap Editor 3.0 Beta is out. Start here
Tiptap Docs

Use AI Agent with Content AI Cloud

The fastest way to get started with the AI Agent extension is with Tiptap Cloud. This works out of the box, you only need to provide the authentication credentials to the extension.

Note

This guide relies on using the Tiptap Cloud service. If you want to configure it with your own custom LLM, follow the custom LLMs 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.

Add your authentication credentials to the extension

Use the AiAgentProvider class to connect with Tiptap Cloud. It handles the communication with Tiptap Cloud and manages the AI Agent's state.

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import AiAgent, { AiAgentProvider } from '@tiptap-pro/extension-ai-agent'

const provider = new AiAgentProvider({
  // Your Tiptap Content AI app id
  appId: 'APP_ID_HERE',
  // Your generated JWT token. It MUST NOT be the OpenAI API key!
  token: 'TOKEN_HERE',
  // ... Other options
})

When you use the AiAgentProvider to send messages to the AI Agent, the Tiptap Cloud API will be called to get the AI Agent's response. The AI Agent will then generate chat messages and make edits to the document to accomplish the user's task.

Customize the OpenAI model

You can customize the OpenAI model that is used in Tiptap Cloud by setting the modelName option. The AI Agent works best with the gpt-4.1 model, as it provides the best performance for complex document editing tasks. Note that the model needs to support function calling.

const provider = new AiAgentProvider({
  modelName: 'gpt-4.1',
})