Install the AI Agent extension

Available in Team planBeta

Install the package

The AI Agent 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-agent

Set up the provider

The provider object manages the state of the AI Agent. The easiest way to get started with the AI Agent extension is to use the Tiptap Cloud provider:

import { AiAgentProvider } from '@tiptap-pro/extension-ai-agent'

const provider = new AiAgentProvider({
  // Configure Tiptap Cloud (see next section)
  appId: 'APP_ID_HERE',
  token: 'TOKEN_HERE',
})

The AI Agent works out-of-the-box with Tiptap Cloud as a backend.

To add text-editing capabilities to your custom AI Agent that runs in your backend, read the integration guide.

Import the extension in your editor

Add AiAgent to the list of extensions and configure it with the provider.

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

const editor = new Editor({
  extensions: [
    StarterKit,
    AiAgent.configure({
      provider,
      // … other options
    }),
    // … more extensions
  ],
})

Call the AI Agent

Call the methods of the provider to interact with the AI Agent.

provider.addUserMessage(
  'Correct the spelling and grammar mistakes. Then, find the key phrases in the text and format them in bold.',
)
provider.run()

Display the AI Agent chat conversation

You can access the AI Agent state (including the chat conversations) and display it in the UI:

provider.state.messages

You can also subscribe to events and update the UI when they are triggered:

// Subscribe to state changes
provider.on('stateChange', (newState, previousState, context) => {
  console.log('State changed:', newState)
  // Update your UI based on the new state
})

// Subscribe to loading errors
provider.on('loadingError', (error, context) => {
  console.error('Error occurred:', error)
  // Show error message to the user
})