Vercel AI SDK 在 Next.js App Router 中的实践指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00453/article/details/148378037

Vercel AI SDK 在 Next.js App Router 中的实践指南

ai 项目地址: https://gitcode.com/gh_mirrors/ai1/ai

前言

随着人工智能技术的快速发展，将 AI 功能集成到 Web 应用中的需求日益增长。Vercel AI SDK 正是为解决这一问题而生的工具，它特别针对 Next.js 的 App Router 架构进行了优化。本文将深入探讨如何在不同场景下高效使用这一 SDK。

核心概念

Vercel AI SDK 提供了与 Next.js App Router 深度集成的功能，主要包含以下几个关键部分：

流式响应处理：支持实时数据流传输，提升用户体验
多运行时适配：既支持传统的 Node.js 运行时，也支持边缘运行时
组件级集成：可在服务端组件和客户端组件中灵活使用

路由处理器的最佳实践

路由处理器是与 AI 服务交互的推荐方式，以下是使用 OpenAI 的完整示例：

import OpenAI from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';

// 推荐使用边缘运行时以获得更好性能
export const runtime = 'edge';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY!,
});

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

  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages,
  });

  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}

关键点说明：

边缘运行时可显著降低延迟，避免冷启动问题
OpenAIStream 将 API 响应转换为可读流
StreamingTextResponse 专为流式文本设计

服务端组件中的实现

在服务端组件中使用时，需要手动处理流式响应：

import { Suspense } from 'react';

async function Reader({ reader }) {
  const { done, value } = await reader.read();
  if (done) return null;
  
  const text = new TextDecoder().decode(value);
  return (
    <span>
      {text}
      <Suspense>
        <Reader reader={reader} />
      </Suspense>
    </span>
  );
}

注意事项：

使用 Suspense 边界处理异步渲染
递归组件实现流式内容逐步渲染
动态路由参数会自动启用动态渲染

客户端组件的集成方案

对于需要交互的场景，可以使用专用钩子：

'use client';

import { useChat } from 'ai/react';

export default function ChatInterface() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div className="chat-container">
      <ul className="message-list">
        {messages.map((m, index) => (
          <li key={index} className={`message ${m.role}`}>
            {m.role === 'user' ? '您: ' : 'AI: '}
            {m.content}
          </li>
        ))}
      </ul>

      <form onSubmit={handleSubmit} className="input-form">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="输入消息..."
        />
        <button type="submit">发送</button>
      </form>
    </div>
  );
}

架构建议：