Vercel 推出 AI SDK、AI 應用模板，快速構建 AI 應用！
近日， 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 中。
