下一代 AI 開發工具Vercel AI SDK 快速入門
最近AI的流行帶來了很多相等震撼的開源項目和開發框架，本文分享人工智能驅動的Web開發世界的一個令人興奮的開發工具 Vercel AI SDK，這是一個在科技界引起轟動的開源庫。這個強大的工具集允許開發人員輕松構建邊緣就緒的人工智能流文本和聊天Web應用程序。
Vercel AI SDK 是一個工具集合，旨在幫助構建基于 AI 的Web用戶界面。為了更好的了解它可以做什么，本文通過一個快速入門教程，通過構建一個簡單的人工智能標語生成器。
一個可互操作、支持流媒體、邊緣就緒的軟件開發套件，適用于使用 React 和 Svelte 構建的 AI 應用程序。
GitHub：https://github.com/vercel-labs/ai
首先，需要設置項目開發環境，需要安裝 Node.js 18+ 和 OpenAI API 密鑰。通過創建一個新的 Next.js 應用程序來開始。SDK提供了一些入門代碼，可幫助快速啟動并運行。
使用以下命令創建新項目：
npx create-next-app vercel-ai-app
此命令啟動項目創建項目并指導引導回答一些項目配置的問題：
之后，將下載并安裝項目模板和依賴項。
安裝項目完成后，接下來進入新創建的項目文件夾：
cd vercel-ai-app
接下來，將安裝必要的依賴項 ai 和 openai-edge。后者與 Vercel Edge Functions 兼容，因此比官方 OpenAI SDK 更受歡迎，使用以下命令添加這些依賴項：
npm install ai openai-edge --save
然后，將在項目根目錄的 .env.local 文件用來配置 OpenAI API 密鑰。
OPENAI_API_KEY=YOUR OPEN AI API KEY
安裝樣式相關的依賴：
npm install autoprefixer postcss tailwindcss --save
根目錄下創建文件 postcss.config.js，代碼如下：
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
下一步是創建 API 路由，路由處理程序將使用 Edge Runtime 通過 OpenAI 生成文本完成，然后將其流回 Next.js。 SDK 提供了一個簡潔的示例來說明路由處理程序應該是什么樣子：
import { Configuration, OpenAIApi } from "openai-edge";
import { OpenAIStream, StreamingTextResponse } from "ai";
const config = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(config);
export const runtime = "edge";
export async function POST(req) {
const { prompt } = await req.json();
const response = await openai.createCompletion({
model: "text-davinci-003",
stream: true,
temperature: 0.6,
prompt: `Create three slogans for a business with unique features.
Business: Bookstore with cats
Slogans: "Purr-fect Pages", "Books and Whiskers", "Novels and Nuzzles"
Business: Gym with rock climbing
Slogans: "Peak Performance", "Reach New Heights", "Climb Your Way Fit"
Business: ${prompt}
Slogans:`,
});
const stream = OpenAIStream(response);
return new StreamingTextResponse(stream);
}
將上述代碼復制到新建文件中 app/api/completion/route.js。接下來分解一下這段代碼，首先是導入必要的模塊：
import { Configuration, OpenAIApi } from "openai-edge";
import { OpenAIStream, StreamingTextResponse } from "ai";
Configuration 和 OpenAIApi 是從 openai-edge 包中導入的。Configuration 用于設置 OpenAI API 客戶端的配置，而 OpenAIApi 就是客戶端本身。OpenAIStream 和 StreamingTextResponse 是從 ai 包導入的。OpenAIStream 用于將 OpenAI API 的響應轉換為流，StreamingTextResponse 用于將流作為響應返回。
下來，設置 OpenAI API 客戶端：
const config = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(config);
上面代碼創建一個新的 Configuration 實例，傳入一個包含 OpenAI API 密鑰的對象，該密鑰存儲在環境變量中。然后創建一個新的 OpenAIApi 實例，傳入剛剛創建的配置。
將運行時設置為 edge 以獲得最佳性能：
export const runtime = "edge";
接下來，定義一個異步函數 POST，它將 Request 對象作為參數：
export async function POST(req) {
const { prompt } = await req.json();
這個函數實現處理 POST 請求，從請求的 JSON 正文中提取 prompt。然后，根據提示要求 OpenAI 進行流式完成：
const response = await openai.createCompletion({
model: "text-davinci-003",
stream: true,
temperature: 0.6,
prompt: `Create three slogans for a business with unique features.
Business: Bookstore with cats
Slogans: "Purr-fect Pages", "Books and Whiskers", "Novels and Nuzzles"
Business: Gym with rock climbing
Slogans: "Peak Performance", "Reach New Heights", "Climb Your Way Fit"
Business: ${prompt}
Slogans:`,
});
在 openai 客戶端調用 createCompletion 方法，傳入一個指定要使用的模型的對象 text-davinci-003，需要一個流響應 stream: true，AI的 temperature 設置（控制輸出的隨機性），以及AI應該響應的 prompt。
接下來，將響應轉換為文本流：
const stream = OpenAIStream(response);
通過調用 OpenAIStream，傳入 createCompletion 調用的響應，將響應轉換為流。最后，返回流作為響應返回給前端：
return new StreamingTextResponse(stream);
}
創建一個新的 StreamingTextResponse，傳入流并返回它，并發送回客戶端的響應。
小結一下，上面代碼設置了一個
OpenAI API客戶端，定義了一個處理POST請求的函數，在給定提示的情況下要求OpenAI進行流式完成，將響應轉換為流，并將流作為響應返回。
最后，將創建一個帶有表單的客戶端組件，用于收集用戶的提示并流回完成結果。SDK 提供了 useCompletion 掛鉤來處理用戶輸入和表單提交。該鉤子提供了多個實用函數和狀態變量，包括 completion、input、handleInputChange 和 handleSubmit。將 app/page.js 中的默認代碼替換為以下代碼：
"use client";
import { useCompletion } from "ai/react";
export default function SloganGenerator() {
const { completion, input, handleInputChange, handleSubmit } =
useCompletion();
return (
<div className="mx-auto w-full max-w-md py-24 flex flex-col stretch">
<form onSubmit={handleSubmit}>
<input
className="fixed w-full max-w-md bottom-0 border border-gray-300 rounded mb-8 shadow-xl p-2"
value={input}
placeholder="Describe your business..."
onChange={handleInputChange}
/>
</form>
<div className="whitespace-pre-wrap my-6">{completion}</div>
</div>
);
}
同樣來分解一下這個 React 組件：
首先，從 ai/react 包中導入需要的鉤子：
import { useCompletion } from "ai/react";
useCompletion 是 ai/react 包提供的自定義 React 鉤子。旨在處理用戶輸入和表單提交，以實現人工智能驅動的完成。
接下來定義一個功能組件 SloganGenerator：
export default function SloganGenerator() {
這是在 React 中定義功能組件的標準方式。在這個組件中，將調用 useCompletion 鉤子：
const { completion, input, handleInputChange, handleSubmit } =
useCompletion();
useCompletion 掛鉤返回一個包含多個屬性的對象：completion、input、handleInputChange 和 handleSubmit。 completion 是當前的完成結果，表示生成文本的字符串值。input 是用戶輸入字段的當前值。 handleInputChange 和 handleSubmit 是處理用戶交互的函數，例如分別在輸入字段中鍵入內容和提交表單。
接下來，主要是返回組件的 JSX。
到此可以啟動應用程序并通過輸入業務描述來進行測試，以實時查看人工智能生成的口號。
使用以下命令啟動 Web 應用程序：
npm run dev
已經使用 Vercel AI SDK 構建了一個流式標語生成器。
流媒體的力量
Vercel AI SDK 的主要功能之一是支持流接口。ChatGPT 等流式會話文本 UI 在過去幾個月中獲得了廣泛的流行，主要是因為它們可以提供更好的用戶體驗，尤其是在聊天機器人等會話應用程序中。
大型語言模型 (LLM) 非常強大，但在生成長輸出時，它們可能會很慢。如果嘗試構建傳統的阻塞式 UI，用戶可能會發現自己花了大量時間盯著加載的 Loading。流式 UI 可以通過在部分響應可用時顯示它們來幫助緩解此問題。
SDK 提供了阻塞式和流式 UI 的示例。流式 UI 開始顯示響應的速度比阻塞式 UI 快得多，阻塞式 UI 必須等待生成整個響應才能顯示任何內容。
緩存響應
根據正在構建的應用程序的類型，可能希望緩存從AI提供商收到的響應，至少是暫時的。Vercel AI SDK 提供了特殊的生命周期回調函數，可以用于此目的。onCompletion 回調特別有用，因為它會在流關閉時被調用，而這里就是可以緩存完整響應的地方。
SDK 提供了如何使用 Vercel KV 和 Next.js 將 OpenAI 響應緩存 1 小時 的示例，這對于頻繁發出相同或相似請求的應用程序特別有用。
總結
Vercel AI SDK 是用于構建人工智能驅動的用戶界面的強大工具。它對流接口和響應緩存的支持，以及與 Next.js 等流行框架的兼容性，使其成為開發人員的多功能且高效的工具。無論是構建聊天機器人、標語生成器還是任何其他人工智能驅動的應用程序，Vercel AI SDK 都可以創建流暢且響應迅速的用戶體驗。
