如何在 NextJS 中传输 OpenAI 响应
已发表: 2024-03-22概括：
了解如何使用 Vercel 的 AI SDK 在 NextJS 中无缝传输 OpenAI 响应。 通过本指南中概述的简单集成流程，开发人员可以有效利用实时人工智能生成的力量，从而增强用户体验和工作流程效率。
在当今快速发展的数字环境中，集成先进的人工智能功能对于努力保持竞争力的公司来说势在必行。 作为一家 OpenAI 开发公司，利用 NextJS 等尖端技术的力量来简化生成和管理 OpenAI 响应的流程具有许多优势。
从增强用户体验到优化工作流程效率， OpenAI 开发公司的专业知识可以深刻影响 OpenAI 功能在 NextJS 框架内的无缝集成和利用。 在本指南中，我们深入研究了 OpenAI 开发公司所必需的战略和见解，以有效利用 NextJS 的潜力来简化 OpenAI 响应，从而使企业能够开启创新和效率的新领域。
我们知道您一直感到沮丧，并且一直在 NextJS 中寻找流式 OpenAI 响应。 有很多方法可以传输 OpenAI 响应，并且在解析数据以使其可读的流之后还有很多工作要做。
注意：我们将在整个博客中使用 NextJS 和 Vercel AI SDK。
什么是 Next.js？
Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。 您可以使用 React Components 来构建用户界面，并使用 Next.js 来实现附加功能和优化。
在底层，Next.js 还抽象并自动配置 React 所需的工具，例如捆绑、编译等。 这使您可以专注于构建应用程序，而不是花时间进行配置。
无论您是个人开发人员还是大型团队的一员，Next.js 都可以帮助您构建交互式、动态且快速的 React 应用程序。
维塞尔是什么？
Vercel 是一个面向开发人员的平台，可提供更快地构建和部署 Web 应用程序所需的工具、工作流程和基础设施，而无需额外配置。
Vercel 开箱即用地支持流行的前端框架，其可扩展、安全的基础设施分布在全球范围内，可以从用户附近的数据中心提供内容，以实现最佳速度。
Vercel 和 Nextjs 是什么关系？
Vercel 的平台由 Next.js 的创建者创建，专为 Next.js 应用程序而设计。 总之，Vercel 和 Next.js 之间的关系代表了一种共生伙伴关系，它重新定义了我们构建和部署 Web 应用程序的方式。 通过利用这两个平台的优势，开发人员可以释放新的可能性并提供在当今竞争格局中脱颖而出的卓越网络体验。
在开发过程中，Vercel 提供了用于项目实时协作的工具，例如自动预览和生产环境以及预览部署的评论。
我们如何使用 Vercel 和 NextJS 使流式传输变得更容易？
2023 年 6 月，Vercel 发布了新的 ai 库（Vercel AI SDK），它提供内置 LLM 适配器/Streaming First UI Helpers/Stream Helpers 和回调。 自从这个库以来，流式 OpenAI 响应变得更加容易。
在深入示例之前，我先告诉您 Vercel AI SDK 支持哪些节点库/框架。
它支持 React/Next.js、Svelte/SvelteKit，并且即将支持 Nuxt/Vue。
示例 - NextJS（反应框架）中的前端/后端
第 1 步：创建 NextJS 应用程序并安装 Vercel AI SDK
npx create-next-app@latest
要安装 SDK，请在终端中输入以下命令：
我爱
要安装 Openai，请在终端中输入以下命令：
npm 我打开
我刚刚遵循了 npx create-next-app@latest 为我创建的简单/默认文件夹结构，以使这个演示简单易懂。
第 2 步：创建前端页面以传输响应
从“反应”导入{useState}；
导出默认函数 Home() {
const [问题，setQuestion] = useState("")
const [answer, setAnswer] = useState("")
/// 调用openai路由器并处理流响应的函数
异步函数 retriveResponse() {
/// 调用路由
const 响应：any = wait fetch("/api/chat", {
方法：“POST”，
正文：JSON.stringify({
问题
}),
下一个：{重新验证：0}
})
让resptext =“”；
const reader = 响应.body
.pipeThrough(new TextDecoderStream())
.getReader();
/// 处理流
而（真）{
const { 值，完成 } = 等待 reader.read();
如果（完成）{
休息;
}
响应文本+=值；
setAnswer(resptext);
}
}
返回 （
<div>
<label htmlFor="问你的问题"></label>
<input type="text" value={question} onChange={(e)=>setQuestion(e.target.value)}/>
<button onClick={retriveResponse}>流响应</button>
<br/>
<p>{答案}</p>
</div>
）；
}
上面的组件创建了一个界面，用户可以在其中输入问题，然后单击按钮将问题发送到服务器端API（/api/chat），并实时显示来自服务器的流式响应
第 3 步：创建后端路由以传输响应
从“openai”导入OpenAI；
// 将运行时设置为边缘以获得最佳性能
导出常量配置= {
运行时：“边缘”，
};
导出默认异步函数处理程序（请求，响应）{
const { 问题 } = 等待 request.json();
// 从 OpenAI API 获取响应
const openai = 新 OpenAI({
apiKey: process.env.NEXT_PUBLIC_OPENAI_KEY,
});
const responseFromOpenAI = 等待 openai.chat.completions.create({
型号：“gpt-3.5-turbo”，
温度：0，
顶部_p：1，
消息：[{角色：“用户”，内容：问题}]，
流：真实，
})
尝试 {
// 将响应转换为友好的文本流
const 流 = OpenAIStream(responseFromOpenAI);
// 用流响应
返回新的 StreamingTextResponse(流);
} 捕获（错误）{
返回response.send(400).send(错误);
}
}
上面的代码定义了一个无服务器函数，该函数接收来自 HTTP 请求的问题，将其发送到 OpenAI API 进行处理，并将响应流回客户端。
第 4 步：运行应用程序
npm 运行开发
输出
视频.webm
演示视频
驱动器.google.com
如果您看过该视频，您可能对演示的工作原理有很好的了解。 对于那些有兴趣探索完整代码的人，您可以通过以下链接在 GitHub 上找到它：Next.js OpenAI Streaming。
参考：
https://vercel.com/blog/introducing-the-vercel-ai-sdk
https://sdk.vercel.ai/docs https://platform.openai.com/docs/introduction
https://platform.openai.com/docs/introduction
要了解 AI 领域的最新发展，建议关注 Vercel 的 AI 文档。 随着 Vercel 继续推进其在 AI 领域的产品，请务必继续关注更新和增强功能。