---
title: "Install the AI Changes extension"
description: "Install and configure the AI Changes extension to track AI-generated modifications with accept and reject functionality."
canonical_url: "https://tiptap.dev/docs/content-ai/capabilities/changes/install"
---

# Install the AI Changes extension

Install and configure the AI Changes extension to track AI-generated modifications with accept and reject functionality.

> **Deprecated:**
>
> This extension is being phased out in favor of the AI Toolkit, which offers enhanced capabilities
> and a modernized API. While you can continue using this extension, we recommend exploring the AI
> Toolkit for new implementations.

The AI Changes extension is available as an npm package through our private registry. Follow these steps to set it up in your project.

## Install the extension

The AI Changes extension is published in Tiptap's private npm registry. Integrate the extension by following the [private registry guide](https://tiptap.dev/docs/guides/pro-extensions.md).

## Initialize the extension

Integrate AI Changes into your editor instance just like any other Tiptap extension. Here's an example implementation:

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

const editor = new Editor({
  extensions: [
    StarterKit,
    AiChanges,
    // … more extensions
  ],
})
```

You will also need to set up the CSS styles so that the changes are visible in the editor.

```css
:root {
  --color-green-100: oklch(0.962 0.044 156.743);
  --color-green-700: oklch(0.527 0.154 150.069);
  --color-red-100: oklch(0.936 0.032 17.717);
  --color-red-700: oklch(0.505 0.213 27.518);
}

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

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

## Start tracking changes

To begin tracking changes, call the `startTrackingAiChanges` command. This creates a snapshot of the current editor content that will be compared with any new content generated by the AI.

```ts
editor.commands.startTrackingAiChanges()
```

After calling this command, any modifications to the editor content—whether made manually or through the [AI Generation](https://tiptap.dev/docs/content-ai/capabilities/generation/overview.md) extension—will be tracked and displayed as changes.

## Accept or reject changes

The extension provides several commands to review changes:

```ts
// Accept a specific change
editor.commands.acceptAiChange(changeId)

// Reject a specific change
editor.commands.rejectAiChange(changeId)

// Accept all changes
editor.commands.acceptAllAiChanges()

// Reject all changes
editor.commands.rejectAllAiChanges()
```

## Stop tracking changes

When you're finished reviewing changes, call the `stopTrackingAiChanges` command to end the tracking session:

```ts
editor.commands.stopTrackingAiChanges()
```

This removes the snapshot of the previous document and stops displaying change highlights.

For more detailed information about reviewing, accepting, and rejecting changes, see the [reviewing content guide](https://tiptap.dev/docs/content-ai/capabilities/changes/features/review-changes.md).