入门 Vercel AI SDK

Vercel AI SDK 允许你构建一个包含多个AI 模型提供商的 AI Agent。它让你轻松切换提供商，以便尝试它们，并找到最适合你的那个。

提供代码演示

本指南包含一个代码演示，助你快速入门。请查看 GitHub 仓库。

客户端设置

首先，安装 AI Agent 扩展。

npm install @tiptap-pro/extension-ai-agent

然后，导入扩展并使用 AiAgentProvider 类进行配置。

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import AiAgent, { AiAgentProvider } from '@tiptap-pro/extension-ai-agent'

const provider = new AiAgentProvider()

const editor = new Editor({
  extensions: [
    StarterKit,
    AiAgent.configure({
      provider,
    }),
  ],
})

在 AI Agent 提供商内定义一个 resolver 函数，该函数调用你的后端。

import AiAgent, { AiAgentProvider } from '@tiptap-pro/extension-ai-agent'

const provider = new AiAgentProvider({
  // `chatMessages` 属性包含会话的聊天消息
  resolver: async ({ chatMessages, schemaAwarenessData }) => {
    // 调用你的后端 API 端点
    const response = await fetch('/api-endpoint', {
      method: 'POST',
      body: JSON.stringify({ chatMessages, schemaAwarenessData }),
    })
    return await response.json()
  },
})

下一节我们将演示如何实现返回正确格式响应的 API 端点。

服务端设置

首先，安装 AI Agent、Vercel AI SDK 以及你偏好的 AI 提供商（此例使用 OpenAI）。

npm install @tiptap-pro/extension-ai-agent-server ai @ai-sdk/openai

从请求参数中获取聊天消息和模式感知数据。

// Code inside your API endpoint. Code depends on your backend framework
const { chatMessages, schemaAwarenessData } = request

然后，在你的 API 端点中，创建一个 AiAgentToolkit 实例。它允许你配置 AI 模型可用的工具。

Use with Vercel AI SDK v4

To use the Vercel AI SDK v4 instead of v5, import the vercelAiSdkV4Adapter instead of vercelAiSdkAdapter.

import { AiAgentToolkit, vercelAiSdkAdapter } from '@tiptap-pro/extension-ai-agent-server'

const toolkit = new AiAgentToolkit({
  adapter: vercelAiSdkAdapter,
  schemaAwarenessData,
})

同时，定义一个 ChatMessagesFormatter 实例。它让你将聊天消息转换为 Vercel AI SDK 所期望的格式。

import {
  AiAgentToolkit,
  vercelAiSdkAdapter,
  ChatMessagesFormatter,
} from '@tiptap-pro/extension-ai-agent-server'

const formatter = new ChatMessagesFormatter({
  initialMessages: chatMessages,
  adapter: vercelAiSdkAdapter,
})

创建 toolkit 和 formatter 后，使用 Vercel AI SDK 向 AI 提供商发送请求。

import {
  AiAgentToolkit,
  vercelAiSdkAdapter,
  ChatMessagesFormatter,
} from '@tiptap-pro/extension-ai-agent-server'
import { generateText } from 'ai'
import { openai } from '@ai-sdk/openai'

const { chatMessages, schemaAwarenessData } = request

const toolkit = new AiAgentToolkit({
  adapter: vercelAiSdkAdapter,
  schemaAwarenessData,
})

const formatter = new ChatMessagesFormatter({
  // 从请求体中获取聊天消息
  initialMessages: chatMessages,
  adapter: vercelAiSdkAdapter,
})

// 调用 Vercel AI SDK
const response = await generateText({
  model: openai('gpt-4.1'),
  messages: [
    {
      role: 'system',
      content: `
<你的系统提示>
${toolkit.getSystemPrompt()}
`,
    },
    ...formatter.format(),
  ],
  // 提供 AI 模型可调用的工具
  tools: toolkit.format(),
})

在系统提示的末尾，包含由 AiAgentToolkit 实例生成的系统提示，例如：toolkit.getSystemPrompt()。它包含了有关如何使用工具的指令。

有关编写系统提示，请参阅系统提示指南。其中包含示例系统提示，可作为起点。

最后，使用 formatter 将响应转换为 AI Agent 扩展所需的格式。

formatter.addAiResponse(response)

const response = formatter.getResolverResponse()

从 formatter.getResolverResponse() 返回的值应作为你的 API 端点响应以及 resolver 函数的返回值。

Previously开始使用

Next upOpenAI 补全