带评论的跟踪更改

实验性

Tracked Changes 扩展目前处于 Alpha 阶段。

继续阅读 tracked changes 指南

本指南是对 tracked changes 指南的延续。请先阅读它。

你可以让 AI 为每个更改提供理由。每个理由都会成为一个评论线程，并通过 Comments 扩展链接到对应的跟踪更改。

API 端点

在服务端，将 operationMeta 选项传递给 toolDefinitions，以便为编辑操作添加 meta 字段。然后指示 AI 在 meta 字段中提供理由。

// app/api/tracked-changes-comments/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.
Rule: Use tiptapRead before tiptapEdit.
Rule: When editing the document, ALWAYS provide a brief justification for each change in the meta field.`,
    tools: toolDefinitions({
      operationMeta:
        'Brief justification explaining why this change improves the document.',
    }),
  })

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

客户端设置

在客户端，添加 CommentsKit 扩展，并将 commentsOptions 传递给 executeTool 方法。commentsOptions 属性用于配置 AI 生成的评论的线程和评论元数据。

import { AiToolkit, getAiToolkit } from '@tiptap-pro/ai-toolkit'
import { CommentsKit } from '@tiptap-pro/extension-comments'
import { TrackedChanges } from '@tiptap-pro/extension-tracked-changes'

const editor = useEditor({
  extensions: [
    StarterKit,
    TrackedChanges.configure({ enabled: false }),
    AiToolkit,
    CommentsKit.configure({
      provider, // Your TiptapCollabProvider instance
    }),
  ],
})

// 在 onToolCall 内部：
const result = toolkit.executeTool({
  toolName: toolCall.toolName,
  input: toolCall.input,
  reviewOptions: {
    mode: 'trackedChanges',
    trackedChangesOptions: {
      userId: 'ai-assistant',
      userMetadata: { name: 'AI' },
    },
  },
  commentsOptions: {
    threadData: { userName: 'AI' },
    commentData: { userName: 'AI' },
  },
})

编辑操作中每个非空的 meta 字段都会变成一个与其跟踪更改相关联的评论线程。用户可以审核更改，并在评论侧边栏中阅读 AI 的理由。

最终效果

查看 GitHub 上的源代码。

后续步骤

在 API 参考中了解更多关于 review options 的内容。
使用流式传输指南添加实时流式传输。
了解用于样式和配置选项的 Tracked Changes 扩展。
了解用于评论配置和样式的 Comments 扩展。

Previously修订记录

Next up建议