Tiptap 编辑

构建一个通用的编辑工作流:读取文档、生成编辑操作,并将其应用到服务器上。

查看 GitHub 上的源代码

当 AI 需要重写现有内容时使用该工作流

Tiptap 编辑工作流是最灵活的 Server AI Toolkit 工作流。可用于诸如 重写段落、在目标节点附近插入新块,或转换整份文档等任务。

在读取与执行中复用同一个 session

读取步骤会返回一个 sessionId。在执行请求中发送相同的 sessionId,以便当文档在 AI 读取之后发生变化时,服务器能够拒绝过期的编辑。

开始之前,请先按照 授权指南 完成身份验证设置。

1. 从 AI Server 读取文档

读取你希望模型处理的文档部分。调用:

  • POST /v3/ai/toolkit/read/read-document
import { getAuthHeaders } from '@/lib/server-ai-toolkit/get-auth-headers'

const readResponse = await fetch(`${apiBaseUrl}/toolkit/read/read-document`, {
  method: 'POST',
  headers: getAuthHeaders(),
  body: JSON.stringify({
    schemaAwarenessData,
    sessionId,
    format: 'shorthand',
    reviewOptions: {
      mode: 'disabled',
    },
    experimental_documentOptions: {
      documentId,
      userId: 'ai-assistant',
    },
  }),
})

const readResult = await readResponse.json()

2. 生成编辑操作

从 AI Server 获取工作流定义,并让模型生成结构化的编辑操作。

const workflowResponse = await fetch(`${apiBaseUrl}/toolkit/workflows/edit`, {
  method: 'POST',
  headers: getAuthHeaders(),
  body: JSON.stringify({
    format: 'shorthand',
  }),
})

const workflow = await workflowResponse.json()

const schemaResponse = await fetch(`${apiBaseUrl}/toolkit/schema-awareness-prompt`, {
  method: 'POST',
  headers: getAuthHeaders(),
  body: JSON.stringify({
    schemaAwarenessData,
  }),
})

const { prompt: schemaAwarenessPrompt } = await schemaResponse.json()

const result = streamText({
  model,
  system: `${workflow.systemPrompt}\n\n${schemaAwarenessPrompt}`,
  prompt: JSON.stringify({
    content: readResult.output.content,
    task,
  }),
  output: Output.object({ schema: z.fromJSONSchema(workflow.outputSchema) }),
})

const output = await result.output

3. 执行编辑工作流

将生成的操作发送回 Server AI Toolkit。当你使用的是 Tiptap Cloud 文档时,服务器会自动更新协作文档。调用:

  • POST /v3/ai/toolkit/execute-workflow/tiptap-edit
const executeResponse = await fetch(`${apiBaseUrl}/toolkit/execute-workflow/tiptap-edit`, {
  method: 'POST',
  headers: getAuthHeaders(),
  body: JSON.stringify({
    schemaAwarenessData,
    format: 'shorthand',
    input: output,
    sessionId: readResult.sessionId,
    reviewOptions: {
      mode: 'disabled',
    },
    experimental_documentOptions: {
      documentId,
      userId: 'ai-assistant',
    },
  }),
})

const executeResult = await executeResponse.json()

4. 从编辑器 UI 触发工作流

客户端应保存最新的 sessionId,并在下一次请求中一并发送。

const response = await fetch('/api/server-edit-workflow', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    documentId,
    schemaAwarenessData: getSchemaAwarenessData(editor),
    task,
    sessionId,
  }),
})

const result: { sessionId: string } = await response.json()
setSessionId(result.sessionId)

跟踪更改(Tracked changes)

将此工作流与 Tracked Changes 扩展集成,以便在 AI 编辑文档后显示审阅界面,并允许用户接受和拒绝更改。

在向 POST /v3/ai/toolkit/execute-workflow/tiptap-edit 发起的请求中,配置 reviewOptions 参数:

reviewOptions: {
  mode: 'trackedChanges',
  trackedChangesOptions: {
    userId: 'ai-assistant',
  },
}

查看 AI Toolkit 演示,了解如何将 Server AI Toolkit 工作流与 Tracked Changes 集成的示例。

最终效果

完成的演示会在服务器端将协作文档进行整体重写:

查看 GitHub 上的源代码

下一步