Tiptap 中文文档

使用修订痕迹

独立产品

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

实验性功能

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

继续自 AI 代理聊天机器人指南

本指南是对 AI 代理聊天机器人指南 的延续。请先阅读该指南。

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

查看 GitHub 上的源代码。

显示修订更改

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

API 端点

API 端点与 AI 代理聊天机器人指南 中相同。服务器端无需做任何更改即可支持修订更改。

// app/api/tracked-changes/route.ts
import { openai } from '@ai-sdk/openai'
import { toolDefinitions } from '@tiptap-pro/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.4-mini'),
    instructions:
      'You are an assistant that can edit rich text documents. Use tiptapRead before tiptapEdit.',
    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/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 上的源代码。

后续步骤

Previously审核变更