使用 AI 工具包添加评论

让您的 AI 代理具备读取、编写和编辑文档中的评论的能力。

查看 GitHub 上的源码。

初始设置

首先，按照评论指南构建带有评论功能的 Tiptap 编辑器。

API 端点

创建一个调用 AI 模型的 API 端点。在本例中，我们使用 Next.js 框架构建 API 端点，并使用 Vercel 的 AI SDK 调用 AI 模型。

如果您的后端使用的不是 TypeScript 编程语言，请参阅本指南。

为 Tiptap AI 工具包提供工具定义。启用 getThreads 和 editThreads 工具，使 AI 代理能够读取和编辑文档中的评论。

可选地，您可以禁用 tiptapEdit 工具来防止 AI 对文档内容进行更改。

// app/api/chat/route.ts
import { openai } from '@ai-sdk/openai'
import { toolDefinitions } from '@tiptap-pro/ai-toolkit-ai-sdk'
import { createAgentUIStreamResponse, ToolLoopAgent, 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 add comments to a rich text document.',
    tools: toolDefinitions({
      tools: {
        // 启用用于读取和编辑评论的工具
        getThreads: true,
        editThreads: true,
        // （可选）阻止 AI 编辑文档内容
        tiptapEdit: false,
      },
    }),
  })

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

客户端设置

在前端，创建一个 React 组件来渲染聊天机器人 UI。该组件利用 Vercel AI SDK 中的 useChat hook 调用 API 端点并管理聊天对话。

当 AI 模型输出工具调用时，使用 Tiptap AI 工具包执行该工具：

如果工具是 getThreads，则读取文档中的评论。
如果工具是 editThreads，则编辑文档中的评论。

以下示例展示了如何实现：

import { useChat } from '@ai-sdk/react'
import { getAiToolkit } from '@tiptap-pro/ai-toolkit'
import { DefaultChatTransport, lastAssistantMessageIsCompleteWithToolCalls } from 'ai'
import { useState, useRef } from 'react'

export function CommentsAiChatbot({ editor }) {
  const [input, setInput] = useState(
    "请在最后一段的第一句添加一条评论，内容为“做得好”",
  )

  // 修复问题：https://github.com/vercel/ai/issues/8148
  const editorRef = useRef(editor)
  editorRef.current = editor

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

      const { toolName, input, toolCallId } = toolCall

      // 使用 AI 工具包执行该工具
      const toolkit = getAiToolkit(editor)
      const result = toolkit.executeTool({
        toolName,
        input,
      })

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

  return (
    <div>
      <EditorContent editor={editor} />
      {messages?.map((message) => (
        <div key={message.id} style={{ whiteSpace: 'pre-wrap' }}>
          <strong>{message.role}</strong>
          <br />
          {message.parts
            .filter((p) => p.type === 'text')
            .map((p) => p.text)
            .join('\n')}
        </div>
      ))}
      <form
        onSubmit={(e) => {
          e.preventDefault()
          sendMessage({ text: input })
          setInput('')
        }}
      >
        <input value={input} onChange={(e) => setInput(e.target.value)} />
      </form>
    </div>
  )
}

最终效果

通过附加 CSS 样式，结果是一个简单且精致的 AI 聊天机器人应用：

查看 GitHub 上的源码。

定制 AI 代理的行为

您可以通过提供自定义系统提示影响 AI 代理的评论行为。例如，可以指示 AI 以特定风格或格式添加评论。

您是一名能够在富文本文档中添加评论的助手。评论内容应始终采用 Markdown 格式。

AI 也可以被指示执行特定操作。借助工具定义，AI 理解线程、评论、已解决线程和回复的概念。

无论用户是否要求，永远不要解决线程。只有用户可以通过点击“解决”按钮来解决线程。

了解更多提示工程相关内容，请参见AI 工程指南。

将评论与跟踪更改结合使用

想要进行文档编辑并将其与评论关联起来吗？请参阅带评论的跟踪更改指南，了解如何将 AI 生成的跟踪更改与解释每项更改的评论线程结合使用。

路线图

在未来版本中，我们计划支持将评论流式写入编辑器，以提升用户体验。同时，我们也在探索改进令牌用量、速度和开发者体验的方法。

Previously流媒体

Next up多文档