Vercel/ai：Vercel开源AI开发 SDK，支持流式输出和多模型集成-壹联网络

今天推荐的是Vercel/ai，这是Vercel官方开源的AI开发SDK，专为构建AI应用而设计。它支持几乎所有主流大语言模型，提供流式输出（Streaming）支持，让开发者可以轻松构建实时AI交互应用。Star已突破23000+。

项目介绍

vercel/ai是Vercel官方开源的AI应用开发框架，它提供了构建现代AI应用的完整工具链。该SDK的核心特点是支持流式输出——让AI的响应可以一个字一个字地流式返回给用户，而不是等待整个响应生成完毕再一次性显示，带来更流畅的对话体验。

GitHub：https://github.com/vercel/ai
Stars：23437+ | 语言：TypeScript | 协议：Apache-2.0

核心特色

1. 流式输出（Streaming）：支持AI响应的流式返回，实时显示生成过程，极大提升用户体验。

2. 多模型支持：支持OpenAI、Anthropic Claude、Google Gemini、Meta Llama、Mistral、Perplexity等几乎所有主流LLM。

3. 多框架支持：支持Next.js、React、Svelte、Solid.js等主流前端框架。

4. UI组件库：提供现成的AI聊天界面组件，开箱即用。

5. 工具调用（Tool Calling）：支持AI调用外部工具和函数，实现更复杂的功能。

6. 消息持久化：内置消息存储和历史记录管理。

7. 完整示例：提供50+完整示例项目，覆盖各种使用场景。

安装步骤

方式一：npm安装（推荐）

npm install ai @ai-sdk/openai @ai-sdk/anthropic

安装特定模型SDK

npm install @ai-sdk/google     # Google Gemini
npm install @ai-sdk/amazon     # Amazon Bedrock
npm install @ai-sdk/mistral    # Mistral
npm install @ai-sdk/perplexity # Perplexity
npm install @ai-sdk/ollama    # Ollama（本地模型）

Next.js项目集成

npx create-next-app@latest my-ai-app
cd my-ai-app
npm install ai @ai-sdk/openai

使用方法

基础聊天示例（Next.js App Router）

// app/page.tsx
"use client"

import { useState } from "react"
import { generateText } from "ai"
import { openai } from "@ai-sdk/openai"

export default function Chat() {
  const [messages, setMessages] = useState<Array<{role: string, content: string}>>([])
  const [input, setInput] = useState("")

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    const userMessage = { role: "user", content: input }
    setMessages(prev => [...prev, userMessage])
    setInput("")

    const { text } = await generateText({
      model: openai("gpt-4o"),
      system: "你是一个有帮助的AI助手。",
      messages: [...messages, userMessage],
    })

    setMessages(prev => [...prev, { role: "assistant", content: text }])
  }

  return (
    <div>
      {messages.map((m, i) => (
        <div key={i}>{m.role}: {m.content}</div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit">发送</button>
      </form>
    </div>
  )
}

流式聊天示例

// 使用 streamText 实现流式输出
import { streamText } from "ai"
import { openai } from "@ai-sdk/openai"

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

  const result = await streamText({
    model: openai("gpt-4o"),
    system: "你是一个技术博客助手。",
    messages,
  })

  return result.toDataStreamResponse()
}

工具调用示例

import { generateText, tool } from "ai"
import { openai } from "@ai-sdk/openai"
import { z } from "zod"

const result = await generateText({
  model: openai("gpt-4o"),
  tools: {
    weather: tool({
      description: "获取指定城市的天气信息",
      parameters: z.object({
        city: z.string().describe("城市名称"),
      }),
      execute: async ({ city }) => {
        const response = await fetch(`https://api.weather.com/?city=${city}`)
        return await response.json()
      },
    }),
  },
  prompt: "北京今天天气怎么样？",
})

console.log(result.toolResults)
// AI会自动调用weather工具并返回结果

使用Claude模型

import { generateText } from "ai"
import { anthropic } from "@ai-sdk/anthropic"

const result = await generateText({
  model: anthropic("claude-3-5-sonnet-20241022"),
  prompt: "用一句话解释量子计算。",
})

console.log(result.text)