ai-sdk 一站式 ai 解决方案

ai-sdk 是什么

ai-sdk 是由 vercel 官方推出的一个 ai 接口解决方案。

官方文档的解释

AI SDK 是一个 TypeScript 工具包，旨在帮助开发者使用 React、Next.js、Vue、Svelte、Node.js 等技术构建人工智能应用程序和代理。

为什么要使用 ai-sdk

虽然目前大多数大模型的提供商都有类型 openai 的借口规范，但是还是有一些细微的差别，为了方便开发专注于业务的开发，减少适配的成本，ai-sdk 提出了 provider 的概念，你可以只写一套代码，使用不同的 provider 就可以适配不同的模型，例如下面的例子。

OpenAI

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

const { text } = await generateText({
  model: openai("o3-mini"),
  prompt: "What is love?"
})

xAi

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

const { text } = await generateText({
  model: xai("grok-3-beta"),
  prompt: "What is love?"
})

Anthropic

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

const { text } = await generateText({
  model: anthropic("claude-3-5-sonnet-latest"),
  prompt: "What is love?"
})

甚至你也可以写一个自己的 provider

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

const { text } = await generateText({
  model: custom("model-id"),
  prompt: "What is love?"
})

编写一个 chat 应用

下面将用 ai-sdk 写一个简单的 chat 聊天应用，这个我们使用 nextjs 来开发

启动模版

pnpm create de

选择 starter-next-app, 这个是我日常使用的 nextjs 模版，也可以使用官方的模版通过 pnpm create next-app@latest my-ai-app 创建

安装 ai-sdk

这里我们使用 openrouter 提供的 provider，它有提供免费的模型使用，对于学习够用了

pnpm add ai @ai-sdk/react @openrouter/ai-sdk-provider zod

openrouter 创建一个 api-key

创建路由

这里我们创建一个 route，来处理请求，在 openrouter 选择一个免费的模型，这里选择 openai/gpt-oss-20b:free，将生成的 api-key 放到环境变量中

import { createOpenRouter } from '@openrouter/ai-sdk-provider'
import { convertToModelMessages, streamText } from 'ai'
import type { UIMessage } from 'ai'

const openRouter = createOpenRouter({
  // eslint-disable-next-line n/prefer-global/process
  apiKey: process.env.OPENROUTER_API_KEY,
})

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

  const result = streamText({
    model: openRouter('openai/gpt-oss-20b:free'),
    messages: convertToModelMessages(messages),
  })

  return result.toUIMessageStreamResponse()
}

编写 UI

app/page.tsx

'use client'

import { useChat } from '@ai-sdk/react'
import { useState } from 'react'

export default function Chat() {
  const [input, setInput] = useState('')
  const { messages, sendMessage } = useChat()

  return (
    <div className='stretch mx-auto flex w-full max-w-md flex-col py-24'>
      {messages.map((message) => (
        <div key={message.id} className='whitespace-pre-wrap'>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.parts.map((part, i) => {
            switch (part.type) {
              case 'text':
                return <div key={`${message.id}-${i}`}>{part.text}</div>
              default:
                return null
            }
          })}
        </div>
      ))}

      <form
        onSubmit={(e) => {
          e.preventDefault()
          sendMessage({ text: input })
          setInput('')
        }}
      >
        <input
          className='fixed bottom-0 mb-8 w-full max-w-md rounded border border-zinc-300 p-2 shadow-xl dark:border-zinc-800 dark:bg-zinc-900'
          value={input}
          placeholder='Say something...'
          onChange={(e) => setInput(e.currentTarget.value)}
        />
      </form>
    </div>
  )
}

结语

ai-sdk 还提供了很多的功能 generateObject Tool Calling Image Generation，具体可查看官方文档