各位AI粉丝大家好！今天，我想与您分享人工智能驱动的Web开发领域的一个令人兴奋的发展。我一直在探索Vercel AI SDK，这是一个开源库，在技术界掀起了波澜。这个强大的工具集允许开发人员轻松构建边缘就绪的 AI 驱动的流媒体文本和聊天 Web 应用程序，我很高兴与您分享我的发现。

Vercel AI SDK 入门

Vercel AI SDK是一系列工具，旨在帮助您构建基于AI的Web用户界面。为了让您了解它的功能，让我们演练一个快速入门教程，我们将在其中构建一个简单的具有流式处理用户界面的 AI 驱动的标语生成器。

首先，您需要设置您的项目。您需要在本地开发计算机上安装 Node.js 18+ 和一个 OpenAI API 密钥。满足这些先决条件后，可以先创建新的 Next.js 应用程序。SDK 提供了一些入门代码，可帮助您快速启动和运行。

使用以下命令创建新项目：

pnpm dlx create-next-app my-vercel-ai-app

此命令启动项目创建项目，并指导您回答几个设置项目配置的问题：

之后，将下载并安装项目模板和依赖项：

安装项目完成后，您可以直接输入新创建的项目文件夹：

cd my-vercel-ai-app

接下来，您将安装必要的依赖项和 ai openai-edge. 后者优于官方OpenAI SDK，因为它与Vercel Edge Functions兼容。使用以下命令可以轻松添加这些依赖项：

pnpm install ai openai-edge

然后，您将在项目根目录的 .env.local 文件中配置 OpenAI API 密钥。此处的第一步是使用以下命令创建此文件：

touch .env.local

在您喜欢的代码或文本编辑器中打开文件，然后按以下格式插入 OpenAI API 密钥：

OPENAI_API_KEY=[YOUR OPEN AI API KEY]

实现应用程序

下一步是创建 API 路由。此路由处理程序将使用边缘运行时通过 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);
}

将此新文件插入到“下一步.js项目结构中的新文件 app/api/complete/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';

接下来，我们定义一个将 Request 对象作为参数的异步函数 POST ：

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 的温度设置（控制输出的随机性）以及 AI 应响应的提示。

接下来，我们将响应转换为友好的文本流：

const stream = OpenAIStream(response);

我们调用，传入来自调用 OpenAIStream 的 createCompletion 响应，这会将响应转换为流。

最后，我们返回流作为响应：

return new StreamingTextResponse(stream);
}

我们创建一个新的 StreamingTextResponse ，在流中传递，并返回它。这是将发送回客户端的响应。

总之，此代码设置了一个 OpenAI API 客户端，定义了一个函数来处理 POST 请求，在给定提示的情况下要求 OpenAI 完成流式处理，将响应转换为流，并将流作为响应返回。

最后，您将创建一个具有窗体的客户端组件，以收集用户的提示并流式传输回完成。SDK 提供了一个 useCompletion 挂钩来处理用户输入和表单提交。此挂钩提供了多个实用程序函数和状态变量，包括 completion 、 input 、 handleInputChange 和 handleSubmit 。

将应用程序/页面中的默认代码替换为截取的以下代码.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 钩子。它旨在处理 AI 驱动的完成的用户输入和表单提交。

接下来，我们定义一个功能组件 SloganGenerator ：

export default function SloganGenerator() {

这是在 React 中定义功能组件的标准方法。

在这个组件中，我们调用钩子 useCompletion ：

const { completion, input, handleInputChange, handleSubmit } = useCompletion();

挂钩 useCompletion 返回一个包含多个属性的对象： completion 、 handleInputChange 、 input 和 handleSubmit 。 completion 是当前完成结果，表示生成的文本的字符串值。 input 是用户输入字段的当前值。 handleInputChange 和是处理用户交互的函数，例如分别在输入字段中键入和 handleSubmit 提交表单。

接下来，我们返回组件的 JSX：

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>
  );

此 JSX 表示组件的 UI。它由一个带有输入字段的表单和一个用于显示完成的 div 组成。表单的 onSubmit prop 设置为，这意味着提交表单时 handleSubmit ，将调用该 handleSubmit 函数。输入字段的 value prop 设置为 input ，这意味着输入字段的值将是用户输入的当前值。输入字段的 onChange prop 设置为，这意味着当用户在输入字段中键入时 handleInputChange ，将调用该 handleInputChange 函数。完成显示在 div 中。

设置完所有内容后，您可以启动应用程序并通过输入业务描述来测试它，以实时查看 AI 生成的标语。

使用以下命令启动 Web 应用程序：

pnpm run dev

瞧！您已经使用 Vercel AI SDK 构建了一个流媒体口号生成器。

流媒体的力量

Vercel AI SDK的主要功能之一是它对流接口的支持。流式对话文本 UI，如 ChatGPT，在过去几个月中获得了广泛的普及。这是因为它们可以提供更好的用户体验，尤其是在聊天机器人等对话应用程序中。

大型语言模型（LLM）非常强大，但在生成长输出时，它们可能会很慢。如果您尝试构建传统的阻止 UI，您的用户可能会发现自己长时间盯着加载微调器。流式处理 UI 可以通过在响应部分可用时显示它们来帮助缓解此问题。

SDK 提供了阻止和流式处理 UI 的示例。流式处理 UI 开始显示响应的速度比阻止 UI 快得多，阻止 UI 必须等待生成整个响应才能显示任何内容。

缓存响应

根据要构建的应用程序类型，您可能希望缓存从 AI 提供商收到的响应，至少是暂时的。Vercel AI SDK 提供了可用于此目的的特殊生命周期回调。 onCompletion 回调特别有用，因为它是在流关闭时调用的。您可以在此处缓存完整响应。

SDK 提供了如何使用 Vercel KV 和 Next.js 将 OpenAI 响应缓存 1 小时的示例。这对于频繁发出相同或类似请求的应用程序特别有用。

总结

Vercel AI SDK是构建AI驱动的用户界面的强大工具。它对流接口和响应缓存的支持，以及与 Next.js 等流行框架的兼容性，使其成为开发人员的多功能且高效的工具。无论您是在构建聊天机器人、口号生成器还是任何其他 AI 驱动的应用程序，Vercel AI SDK 都可以帮助您创建流畅且响应迅速的用户体验。

请记住，在使用 AI 构建应用程序时，您的想象力是极限。因此，请随意试验和扩展应用程序的功能。Vercel AI SDK旨在使实现流式UI尽可能简单，使您可以专注于最重要的事情 - 为您的用户创建令人惊叹的应用程序。

伙计们，今天就到此为止！我希望你发现Vercel AI SDK的探索和我一样令人兴奋。请继续关注更深入的技术和编程世界。直到下一次，祝您编码愉快！