Tiptap 中文文档

追踪更改

Experimental

The Tracked Changes extension is currently in Alpha phase.

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

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

显示 AI 生成的更改为修订模式，以便用户能够逐条审阅并接受或拒绝。此功能将 AI Toolkit 与 Tracked Changes 扩展集成。

See the source code on GitHub.

Show tracked changes

要以修订模式显示 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。

TrackedChanges 扩展必须配置为 enabled: false —— AI Toolkit 会在需要时自动启用它。

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 上的源代码。

Next steps

Previously审核变更