最近AI的盛行带来了许多相等震撼的开源项目和开发结构，本文共享人工智能驱动的Web开发世界的一个令人兴奋的开发东西 Vercel AI SDK，这是一个在科技界引起轰动的开源库。这个强壮的东西集答应开发人员轻松构建边际安排妥当的人工智能流文本和谈天Web应用程序。
Vercel AI SDK 是一个东西集合，旨在协助构建依据AI的Web用户界面。为了更好的了解它能够做什么，本文经过一个快速入门教程，经过构建一个简略的人工智能标语生成器。
一个可互操作、支撑流媒体、边际安排妥当的软件开发套件，适用于运用 React 和 Svelte 构建的 AI 应用程序。
GitHub：github.com/vercel-labs…
首先，需求设置项目开发环境，需求装置 Node.js 18+ 和 OpenAI API 密钥。经过创立一个新的 Next.js 应用程序来开端。SDK供给了一些入门代码，可协助快速发动并运行。
项目地址：github.com/QuintionTan…
运用以下指令创立新项目：
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 小时 的示例，这对于频繁宣布相同或相似请求的应用程序特别有用。
项目地址：github.com/QuintionTan…
总结
Vercel AI SDK 是用于构建人工智能驱动的用户界面的强壮东西。它对流接口和呼应缓存的支撑，以及与 Next.js 等盛行结构的兼容性，使其成为开发人员的多功能且高效的东西。无论是构建谈天机器人、标语生成器还是任何其他人工智能驱动的应用程序，Vercel AI SDK 都能够创立流畅且呼应迅速的用户体会。
