🎁 100 free AI Toolkit licenses – apply by August 15.Learn more
Tiptap 中文文档

使用修订痕迹

独立产品

跟踪更改 是一款与 AI Toolkit 分开的 Tiptap 产品，需单独购买。它默认处理用户编辑内容，并且在与 AI Toolkit 集成后也可以审核 AI 编辑内容。

实验性功能

跟踪更改 扩展目前处于 Alpha 阶段。

继续自 AI 智能体聊天机器人指南

本指南承接 AI 智能体聊天机器人 指南。请先阅读它。

将 AI 生成的更改显示为修订内容，这样你的用户就可以逐一审阅并接受或拒绝这些更改。本指南将展示如何将 AI Toolkit 连接到单独授权的 跟踪更改 扩展。

查看 GitHub 上的源代码。

显示修订更改

要以修订模式显示 AI 编辑内容，在执行工具时将 reviewOptions.mode 设置为 'trackedChanges'。

API 端点

API 端点与 AI agent chatbot 指南 中相同。无需在服务器端进行任何更改即可启用修订更改。

// app/api/tracked-changes/route.ts
import { openai } from '@ai-sdk/openai'
import { toolDefinitions } from '@tiptap-pro/client-ai-toolkit-ai-sdk'
import { createAgentUIStreamResponse, ToolLoopAgent, type UIMessage } from 'ai'

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json()

  const agent = new ToolLoopAgent({
    model: openai('gpt-5.6-luna'),
    instructions:
      '你是一个可以编辑富文本文档的助手。在使用 tiptapEdit 之前先使用 tiptapRead。',
    tools: toolDefinitions(),
  })

  return createAgentUIStreamResponse({
    agent,
    uiMessages: messages,
  })
}

客户端设置

在客户端，安装并添加 TrackedChanges 扩展，然后在 executeTool 方法中传入模式为 'trackedChanges' 的 reviewOptions。

在 AI 进行编辑时，必须将 TrackedChanges 扩展配置为 enabled: false。

import { useChat } from '@ai-sdk/react'
import { EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import { AiToolkit, getAiToolkit } from '@tiptap-pro/client-ai-toolkit'
import { TrackedChanges } from '@tiptap-pro/extension-tracked-changes'
import { DefaultChatTransport, lastAssistantMessageIsCompleteWithToolCalls } from 'ai'

export default function Page() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [
      StarterKit,
      TrackedChanges.configure({
        enabled: false,
      }),
      AiToolkit,
    ],
    content: `<p>Ask the AI to improve this document.</p>`,
  })

  const { messages, sendMessage, addToolOutput } = useChat({
    transport: new DefaultChatTransport({ api: '/api/tracked-changes' }),
    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
    async onToolCall({ toolCall }) {
      if (!editor) return

      const toolkit = getAiToolkit(editor)
      const result = toolkit.executeTool({
        toolName: toolCall.toolName,
        input: toolCall.input,
        reviewOptions: {
          mode: 'trackedChanges',
          trackedChangesOptions: {
            userId: 'ai-assistant',
            userMetadata: {
              name: 'AI',
            },
          },
        },
      })

      addToolOutput({
        tool: toolCall.toolName,
        toolCallId: toolCall.toolCallId,
        output: result.output,
      })
    },
  })

  // ... 渲染编辑器和聊天界面
}

AI 编辑文档后，更改将以修订模式显示。用户可以使用 Tracked Changes 扩展提供的 acceptSuggestion、rejectSuggestion、acceptAllSuggestions 和 rejectAllSuggestions 命令接受或拒绝更改。

最终效果

查看 GitHub 上的源代码。

后续步骤

PreviouslyReview changes