近日， Vercel 推出了全新的工具來改善 AI 體驗(yàn)：

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

Vercel AI SDK

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

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

npm install ai

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

內(nèi)置 LLM 適配器

選擇適合應(yīng)用的 LLM 對(duì)于構(gòu)建出色的體驗(yàn)至關(guān)重要。每個(gè) LLM 都有獨(dú)特的權(quán)衡，并且可以以不同的方式進(jìn)行調(diào)整以滿足要求。

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

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

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

Hooks

Vercel AI SDK 包括用于數(shù)據(jù)獲取和渲染流式文本響應(yīng)的 React 和 Svelte 鉤子。這些鉤子使得應(yīng)用能夠?qū)崟r(shí)、動(dòng)態(tài)地渲染數(shù)據(jù)，為用戶提供沉浸式和交互式的體驗(yàn)。

現(xiàn)在，借助 useChat 和 useCompletion，構(gòu)建豐富的聊天或完成接口只需要幾行代碼：

'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>
  )
}

回調(diào)

Vercel AI SDK 還為在同一請(qǐng)求中將已完成的流式響應(yīng)存儲(chǔ)到數(shù)據(jù)庫中提供了回調(diào)。該功能允許進(jìn)行高效的數(shù)據(jù)管理，并簡化了處理流式文本響應(yīng)的整個(gè)過程。

export async function POST(req: Request) {
  // ...
 
  // 將響應(yīng)轉(zhuǎn)換為友好的文本流
  const stream = OpenAIStream(response, {
    onStart: async () => {
      // 流開始時(shí)調(diào)用此回調(diào)
      // 可以使用它來將提示保存到數(shù)據(jù)庫中
      await savePromptToDatabase(prompt)
    },
    onToken: async (token: string) => {
      // 為流中的每個(gè)標(biāo)記調(diào)用此回調(diào)
      // 可以使用它來調(diào)試流或?qū)?token 保存到數(shù)據(jù)庫中
      console.log(token)
    },
    onCompletion: async (completion: string) => {
      // 流完成時(shí)調(diào)用此回調(diào)
      // 可以使用它來將最終的完成保存到數(shù)據(jù)庫中
      await saveCompletionToDatabase(completion)
    }
  })
 
  // 響應(yīng)流
  return new StreamingTextResponse(stream)
}

Edge 和 Serverless

Vercel AI SDK 與 Vercel 產(chǎn)品（如 Serverless 和 Edge 函數(shù)）集成。可以部署 AI 應(yīng)用，實(shí)現(xiàn)即時(shí)擴(kuò)展、流式生成響應(yīng)，并且具有成本效益。

使用框架定義的基礎(chǔ)架構(gòu)，可以使用 AI SDK 在 Next.js 和 SvelteKit 等框架中編寫應(yīng)用代碼，然后 Vercel 將此代碼轉(zhuǎn)換為全局應(yīng)用基礎(chǔ)架構(gòu)。

Chat & Prompt Playground

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

現(xiàn)在，在其中添加了一個(gè)新的聊天界面，以便可以同時(shí)比較并排顯示聊天模型。除此之外，還為 Vercel AI SDK 添加了代碼生成支持。現(xiàn)在，只需點(diǎn)擊幾下即可從 Playground 轉(zhuǎn)到聊天應(yīng)用。

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

AI Chatbot

除了上述產(chǎn)品之外， Vercel 還推出了一個(gè)使用 Next.js、Vercel AI SDK、OpenAI 和 Vercel KV 構(gòu)建的開源 AI 聊天應(yīng)用模板。

在線體驗(yàn)地址：https://chat.vercel.ai/

AI Chatbot 模板應(yīng)用具有以下特性：

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

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

未來

在未來的幾周中，Vercel 將添加更多的 SDK 示例，以及完全使用 AI SDK 構(gòu)建的新模板。此外，隨著構(gòu)建 AI 應(yīng)用的新最佳實(shí)踐出現(xiàn)，將根據(jù)反饋將它們加入到 SDK 中。