Install the AI Agent extension

Integrate or test the AI Agent

To test or integrate this feature, you need an active trial or Tiptap Team subscription.

Install the package

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. If you want to use it with your own backend, read our guide on custom LLM and backend integration.

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
})