如何在 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 領域的產品，請務必繼續專注於更新和增強功能。