---
title: "Review changes with the AI Changes extension"
description: "Learn how to integrate the AI agent with the AI Changes extension to review AI-generated changes."
canonical_url: "https://tiptap.dev/docs/content-ai/capabilities/agent/review/ai-changes"
---

# Review changes with the AI Changes extension

Learn how to integrate the AI agent with the AI Changes extension to review AI-generated changes.

Integrate the AI Agent extension with the AI Changes extension to provide a review workflow for AI-generated changes. Allow users to review changes after they are applied to the document.

## Setting up the AI Changes integration

This guide walks you through the process of setting up the AI Changes extension for reviewing, accepting and rejecting changes.

> **Note:**
>
> We provide a code demo of how to integrate the AI Changes extension in [the introduction
> page](https://tiptap.dev/docs/content-ai/capabilities/agent.md).

### Step 1: Install both extensions

```bash
npm install @tiptap-pro/extension-ai-agent @tiptap-pro/extension-ai-changes
```

### Step 2: Configure both extensions in your editor

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

const provider = new AiAgentProvider({
  appId: 'YOUR_APP_ID',
  token: 'YOUR_JWT_TOKEN',
  reviewOptions: {
    // Set extension to "aiChanges" to use AI Changes for review
    extension: 'aiChanges',
    // Optional: Set autoAccept to "never" to always require review
    autoAccept: 'never',
  },
  // ... other options
})

const editor = new Editor({
  extensions: [
    StarterKit,
    AiAgent.configure({
      provider,
    }),
    AiChanges.configure({
      // Optional: Customize the appearance of AI changes to display a popover when a change is selected
      getCustomDecorations({ change, isSelected, getDefaultDecorations }) {
        const decorations = getDefaultDecorations()
        // Add custom decorations if needed
        return decorations
      },
    }),
  ],
})
```

### Step 3: Configure styles

Customize how the suggestions are displayed in the editor.

```css
.tiptap-ai-changes--old {
  color: var(--color-red-700);
  background-color: var(--color-red-100);
}

.tiptap-ai-changes--old * {
  background-color: var(--color-red-100);
}

.tiptap-ai-changes--new {
  color: var(--color-green-700);
  background-color: var(--color-green-100);
}
```

## How the review workflow works

1. When the AI agent makes changes to the document, they are tracked by the AI Changes extension
2. If `autoAccept` is set to `never` or `onlyRead` (for content-modifying changes), the changes are shown as pending
3. The provider's state changes to `reviewingToolCall`
4. The user can review the changes and decide to accept or reject them
5. After accepting or rejecting, the conversation continues

## Accepting and rejecting changes

You can call these methods to accept or reject changes:

```tsx
// Accept all pending changes
provider.acceptToolCall()

// Reject all pending changes
provider.rejectToolCall()
```

> **Note:**
>
> If the tool call is rejected, the AI agent provider will attempt to reset the document to the
> state before the tool call was executed, with the AI Changes extension. However, if the AI Changes
> extension is not imported or the `extension` parameter is set to `null`, the AI agent will not be
> able to reset the document state automatically, so you will need to implement your own logic to
> handle rejected tool calls and restore the document to a previous state.

A way to handle rejected tool calls without the AI Changes extension is to store the document state before the tool call is applied (when the `beforeToolCall` event is triggered), and restore it when the tool call is rejected.

> **Note:**
>
> The AI Changes extension lets users review changes after they are applied to the document. To
> review changes before they are applied, integrate the [AI
> Suggestion](https://tiptap.dev/docs/content-ai/capabilities/agent/review/ai-suggestion.md) extension.