---
title: "使用 AI 工具包添加评论"
description: "让您的 AI 代理具备读取、编写和编辑文档评论的能力。"
canonical_url: "https://tiptap.zhcndoc.com/content-ai/capabilities/ai-toolkit/agents/comments"
---

# 使用 AI 工具包添加评论

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

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

> **Interactive demo:** [comments](https://ai-toolkit-demos.vercel.app/comments)

查看 [GitHub 上的源码](https://github.com/ueberdosis/ai-toolkit-demos)。

## 初始设置

首先，按照[评论指南](https://tiptap.zhcndoc.com/comments/getting-started/overview.md)构建带有评论功能的 Tiptap 编辑器。

## API 端点

创建一个调用 AI 模型的 API 端点。在本例中，我们使用 [Next.js 框架](https://nextjs.org/) 构建 API 端点，并使用 [Vercel 的 AI SDK](https://ai-sdk.dev/) 调用 AI 模型。

如果您的后端使用的不是 TypeScript 编程语言，请参阅[本指南](https://tiptap.zhcndoc.com/content-ai/capabilities/ai-toolkit/advanced-guides/non-typescript-backends.md)。

为 Tiptap AI 工具包提供[工具定义](https://tiptap.zhcndoc.com/content-ai/capabilities/ai-toolkit/tools/ai-sdk.md)。启用 `getThreads` 和 `editThreads` 工具，使 AI 代理能够读取和编辑文档中的评论。

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

```ts
// 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](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) 调用 API 端点并管理聊天对话。

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

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

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

```tsx
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 聊天机器人应用：

> **Interactive demo:** [comments](https://ai-toolkit-demos.vercel.app/comments)

查看 [GitHub 上的源码](https://github.com/ueberdosis/ai-toolkit-demos)。

## 定制 AI 代理的行为

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

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

AI 也可以被指示执行特定操作。借助[工具定义](https://tiptap.zhcndoc.com/content-ai/capabilities/ai-toolkit/agents/tools.md)，AI 理解线程、评论、已解决线程和回复的概念。

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

了解更多提示工程相关内容，请参见[AI 工程指南](https://tiptap.zhcndoc.com/content-ai/capabilities/ai-toolkit/advanced-guides/ai-engineering.md)。

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

想要进行文档编辑并将其与评论关联起来吗？请参阅[带评论的跟踪更改指南](https://tiptap.zhcndoc.com/content-ai/capabilities/ai-toolkit/agents/review-changes/tracked-changes-with-comments.md)，了解如何将 AI 生成的跟踪更改与解释每项更改的评论线程结合使用。

## 路线图

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