Vercel AI SDK 实战：使用 Next.js 实现结构化数据流式传输

Vercel AI SDK 实战：使用 Next.js 实现结构化数据流式传输

ai Build AI-powered applications with React, Svelte, Vue, and Solid 项目地址: https://gitcode.com/gh_mirrors/ai/ai

引言

在现代 Web 应用中，处理大型结构化数据时，传统的等待全部数据生成完毕再展示的方式往往会导致用户体验不佳。Vercel AI SDK 提供了一种创新的解决方案——流式对象传输（Stream Object），允许我们将结构化数据分块实时传输到客户端，显著提升应用的响应速度和用户体验。

流式对象传输的核心优势

1. 实时反馈：用户无需等待全部数据生成完毕即可看到部分结果
2. 降低感知延迟：即使后端处理需要较长时间，用户也能立即看到进度
3. 资源优化：可以更早地开始处理已接收到的数据部分

基础实现方案

1. 定义数据结构模式

首先需要明确我们要传输的数据结构。使用 Zod 库定义模式是最佳实践：

import { z } from 'zod';

export const notificationSchema = z.object({
  notifications: z.array(
    z.object({
      name: z.string().describe('虚构人物姓名'),
      message: z.string().describe('消息内容，不要使用表情符号或链接'),
    })
  ),
});

这种模式定义不仅用于验证数据，还能为 AI 模型提供生成指导。

2. 服务端实现

服务端使用 streamObject 函数处理请求：

import { openai } from '@ai-sdk/openai';
import { streamObject } from 'ai';
import { notificationSchema } from './schema';

export const maxDuration = 30;

export async function POST(req: Request) {
  const context = await req.json();

  const result = streamObject({
    model: openai('gpt-4-turbo'),
    schema: notificationSchema,
    prompt: `根据以下上下文生成3条消息应用通知:` + context,
  });

  return result.toTextStreamResponse();
}

关键点：

• 设置合理的超时时间（maxDuration）
• 使用强大的 AI 模型（如 gpt-4-turbo）
• 将结果转换为文本流响应

3. 客户端实现

客户端使用 useObject 钩子处理流式数据：

'use client';

import { experimental_useObject as useObject } from '@ai-sdk/react';
import { notificationSchema } from './api/use-object/schema';

export default function Page() {
  const { object, submit, isLoading, stop } = useObject({
    api: '/api/use-object',
    schema: notificationSchema,
  });

  return (
    <div>
      <button
        onClick={() => submit('期末考试周的消息')}
        disabled={isLoading}
      >
        生成通知
      </button>

      {isLoading && (
        <div>
          <div>加载中...</div>
          <button type="button" onClick={() => stop()}>
            停止
          </button>
        </div>
      )}

      {object?.notifications?.map((notification, index) => (
        <div key={index}>
          <p>{notification?.name}</p>
          <p>{notification?.message}</p>
        </div>
      ))}
    </div>
  );
}

高级应用模式

1. 数组模式（Array Mode）

当需要生成列表数据时，数组模式更为高效：

服务端调整：

const result = streamObject({
  model: openai('gpt-4-turbo'),
  output: 'array',
  schema: notificationSchema,
  prompt: `生成3条消息应用通知:` + context,
});

客户端调整：

const { object } = useObject({
  api: '/api/use-object',
  schema: z.array(notificationSchema),
});

2. 无模式（No-Schema Mode）

对于动态数据结构，可以使用无模式：

const result = streamObject({
  model: openai('gpt-4-turbo'),
  output: 'no-schema',
  prompt: `生成3条消息应用通知:` + context,
});

最佳实践建议

1. 错误处理：始终为流式请求添加错误处理逻辑
2. 加载状态：提供清晰的加载指示器和取消操作
3. 性能优化：合理设置超时时间，避免长时间运行
4. 数据验证：即使使用无模式，也应在客户端验证数据
5. 用户体验：考虑添加渐进式渲染动画，使数据加载更平滑

常见问题解答

Q：流式传输与传统API调用有何不同？ A：传统方式是等待所有数据就绪后一次性返回，而流式传输是分块实时发送，显著减少用户等待时间。

Q：如何确保流式数据的安全性？ A：应在服务端和客户端都进行数据验证，即使使用无模式也应检查基本数据结构。

Q：流式传输适合所有场景吗？ A：不适合小数据量或需要完整数据才能进行后续处理的场景，最适合大型结构化数据的生成。

通过 Vercel AI SDK 的流式对象传输功能，开发者可以轻松构建出响应迅速、用户体验优秀的 AI 应用，特别是在处理复杂数据结构时展现出明显优势。

ai Build AI-powered applications with React, Svelte, Vue, and Solid 项目地址: https://gitcode.com/gh_mirrors/ai/ai