开发框架教程(3)：Vercel AI SDK —— 全栈工程师的最爱

1. 什么是 Vercel AI SDK？

如果你是做网页开发（Web Developer）出身，特别是用 Next.js 或 React 的，那你肯定会爱死这个库。

LangChain 和 LlamaIndex 主要是 Python 界的霸主（虽然它们也有 JS 版，但 Python 版更强）。而 Vercel AI SDK 是专门为 JavaScript/TypeScript 全栈开发设计的。

它的核心优势

流式输出 (Streaming) 极其简单：让文字像打字机一样一个字一个字蹦出来，在 Vercel AI SDK 里只需要两行代码。在 Python 里实现这个通常很麻烦。
UI 组件化：它直接提供了 useChat 这样的 React Hook，帮你管理聊天记录、输入框状态、加载状态。你不需要自己写 useState 来存聊天列表。

2. 核心概念

useChat (前端 Hook)

这是最常用的 Hook。它帮你处理了所有繁琐的逻辑：

自动发送请求到后端。
自动把后端流回来的数据拼接到当前对话中。
自动处理 Loading 状态。

AI SDK Core (后端/统一接口)

Vercel 推出了一个统一的 generateText 和 streamText 函数。无论你用 OpenAI, Anthropic, Google Gemini 还是 Mistral，代码完全一样！

// 以前你可能需要针对不同厂家写不同代码
// 现在：
import { openai } from '@ai-sdk/openai';
import { anthropic } from '@ai-sdk/anthropic';
import { generateText } from 'ai';

const { text } = await generateText({
  model: openai('gpt-4-turbo'), // 换成 anthropic('claude-3-sonnet') 只需要改这里
  prompt: '讲个笑话',
});

3. 实战：Next.js 聊天机器人

后端 (APP Router: `app/api/chat/route.ts`)

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

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

  const result = await streamText({
    model: openai('gpt-4-turbo'),
    messages,
  });

  return result.toDataStreamResponse(); // 自动处理流式响应头
}

前端 (React Component)

'use client';

import { useChat } from 'ai/react';

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

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          {m.role === 'user' ? '我: ' : 'AI: '}
          {m.content}
        </div>
      ))}
 
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">发送</button>
      </form>
    </div>
  );
}

4. 总结

如果你要做一个 Web 版的 AI 应用，请毫不犹豫地选择 Vercel AI SDK。它可以帮你省去 90% 处理 HTTP 流、状态管理和 UI 更新的脏活累活。