近日， Vercel 推出了全新的工具來改善 AI 體驗：

• Vercel AI SDK：輕松地從 AI 模型中獲取 API 響應；
• Chat & Prompt Playground：探索來自 OpenAI、Hugging Face 等的模型；
• AI Chatbot：使用 Next.js 構建的開源 AI 聊天應用模板。

Vercel AI SDK

Vercel AI SDK 是一個開源庫，旨在幫助開發者在 JavaScript 和 TypeScript 中構建 AI 流式聊天應用。該 SDK 支持 React/Next.js、Svelte/SvelteKit，即將支持 Nuxt/Vue。

可以在終端中輸入以下命令來安裝此 SDK：

npm install ai

可以在 Github 查看其源碼：https://github.com/vercel-labs/ai

內置 LLM 適配器

選擇適合應用的 LLM 對于構建出色的體驗至關重要。每個 LLM 都有獨特的權衡，并且可以以不同的方式進行調整以滿足要求。

Vercel 的 AI SDK 支持互操作性，并為 OpenAI、LangChain 和 Hugging Face Inference 提供一流的支持。這意味著無論首選的 AI 模型提供商是哪個，都可以利用 Vercel AI SDK 創建前沿的流式 UI 體驗。

import { OpenAIStream, StreamingTextResponse } from 'ai'
import { Configuration, OpenAIApi } from 'openai-edge'

// 創建一個 OpenAI API 客戶端
const config = new Configuration({
  apiKey: process.env.OPENAI_API_KEY
})
const openai = new OpenAIApi(config)
 
// 將運行時設置為 edge
export const runtime = 'edge'
 
export async function POST(req: Request) {
  // 從請求正文中提取 messages
  const { messages } = await req.json()
 
  // 根據提示要求 OpenAI 完成流式聊天
  const response = await openai.createChatCompletion({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages
  })
  // 將響應轉換為友好的文本流
  const stream = OpenAIStream(response)
  // 響應流
  return new StreamingTextResponse(stream)
}

Hooks

Vercel AI SDK 包括用于數據獲取和渲染流式文本響應的 React 和 Svelte 鉤子。這些鉤子使得應用能夠實時、動態地渲染數據，為用戶提供沉浸式和交互式的體驗。

現在，借助 useChat 和 useCompletion，構建豐富的聊天或完成接口只需要幾行代碼：

'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}: {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  )
}

回調

Vercel AI SDK 還為在同一請求中將已完成的流式響應存儲到數據庫中提供了回調。該功能允許進行高效的數據管理，并簡化了處理流式文本響應的整個過程。

export async function POST(req: Request) {
  // ...
 
  // 將響應轉換為友好的文本流
  const stream = OpenAIStream(response, {
    onStart: async () => {
      // 流開始時調用此回調
      // 可以使用它來將提示保存到數據庫中
      await savePromptToDatabase(prompt)
    },
    onToken: async (token: string) => {
      // 為流中的每個標記調用此回調
      // 可以使用它來調試流或將 token 保存到數據庫中
      console.log(token)
    },
    onCompletion: async (completion: string) => {
      // 流完成時調用此回調
      // 可以使用它來將最終的完成保存到數據庫中
      await saveCompletionToDatabase(completion)
    }
  })
 
  // 響應流
  return new StreamingTextResponse(stream)
}

Edge 和 Serverless

Vercel AI SDK 與 Vercel 產品（如 Serverless 和 Edge 函數）集成。可以部署 AI 應用，實現即時擴展、流式生成響應，并且具有成本效益。

使用框架定義的基礎架構，可以使用 AI SDK 在 Next.js 和 SvelteKit 等框架中編寫應用代碼，然后 Vercel 將此代碼轉換為全局應用基礎架構。

Chat & Prompt Playground

4 月，Vercel 推出了一個交互式的在線 AI Playground：play.vercel.ai，其包含了20個開源和云 LL，可以實時比較各種語言模型的結果，調整參數，并快速生成 Next.js、Svelte 和 Node.js 代碼。

現在，在其中添加了一個新的聊天界面，以便可以同時比較并排顯示聊天模型。除此之外，還為 Vercel AI SDK 添加了代碼生成支持。現在，只需點擊幾下即可從 Playground 轉到聊天應用。

以上是通過 Vercel AI SDK Playground 比較 OpenAI GPT-4、Anthropic Claude 和 Hugging Face 的結果。

AI Chatbot

除了上述產品之外， Vercel 還推出了一個使用 Next.js、Vercel AI SDK、OpenAI 和 Vercel KV 構建的開源 AI 聊天應用模板。

在線體驗地址：https://chat.vercel.ai/

AI Chatbot 模板應用具有以下特性：

• Next.js App Router
• React 服務端組件 (RSCs)、Suspense 和服務端操作
• 支持使用 Vercel AI SDK 來進行流式聊天 UI
• 支持使用 OpenAI（默認）、Anthropic、HuggingFace 或自定義 AI 聊天模型和/或 LangChain Edge 運行時準備就緒
• shadcn/ui
• 使用 Tailwind CSS 進行樣式設置
• 使用 Phosphor Icons 圖標
• 使用 Vercel KV 進行聊天歷史記錄、速率限制和會話存儲
• 使用 Next Auth 進行身份驗證

Github 源碼地址：https://github.com/vercel-labs/ai-chatbot

未來

在未來的幾周中，Vercel 將添加更多的 SDK 示例，以及完全使用 AI SDK 構建的新模板。此外，隨著構建 AI 應用的新最佳實踐出現，將根據反饋將它們加入到 SDK 中。