使用 Vercel AI SDK 實現多個平行 AI 串流

Vercel AI SDK 可以輕鬆與 OpenAI、Anthropic 等 LLM API 進行交互，並傳輸數據，以便在加載時快速顯示在您的 Web 應用程式中。在本文中，我們將學習如何同時執行多個提示並並行查看它們的結果。

TL;DR：GitHub 儲存庫在這裡。

我為什麼要這樣做？

在 Web 應用程式中同時執行多個資料取得請求的情況並不罕見。例如，在假設的部落格系統中，當儀表板介面載入時，我們可能希望同時獲取使用者的個人資料資料、他們創建的貼文以及他們喜歡的其他使用者的貼文。

如果同一個儀表板同時向 OpenAI 發出請求，我們可能希望同時向 OpenAI 詢問有關改善用戶個人資料的提示，並同時分析他們的最新帖子。理論上，如果我們願意的話，我們可以並行使用數十個人工智慧請求（即使來自完全不同的平台和模型），並分析資訊、生成內容並同時執行所有類型的其他任務。

安裝與設定

您可以在此處複製包含最終結果的 GitHub 儲存庫。

從頭開始設定：

1. 遵循Next.js App Router 快速入門。 只是基礎知識；產生應用程式、安裝依賴項並添加您的 OpenAI API 金鑰。
2. 安裝並設定 shadcn/ui。

設定基本 UI

完成所有工作的主要元件將包含一個表單和一些用於輸出的容器。使用一些基本的 shadcn-ui 元件，表單將如下所示：

你可以看到我們這裡有一些東西：

• 表格
• 載入動畫（以及用於顯示/隱藏它的 isGenerate 標誌）
• 用於渲染天氣內容的容器
• 用於渲染新聞內容的容器

現在您可以對這些值進行硬編碼；它們都會從我們的資訊流中刪除。

設定 React 伺服器元件 (RSC)

streamAnswer 伺服器操作將完成建立和更新我們的流程的工作。

動作的結構是這樣的：

編寫客戶端程式碼

表單的 onSubmit 處理程序將完成這裡的所有工作。以下是其工作原理的詳細說明：

其他有趣的事情可以嘗試

• 使用streamObject()串流結構化JSON資料而不是文字
• 並行傳輸更多內容
• 同時從不同的 API 進行串流
• 使用相同的提示串流不同模型進行比較（例如，Cohere、Anthropic、Gemini 等）
• 從伺服器串流 UI（使用 createStreamableUI() ）

進一步閱讀和鏈接

• 伺服器操作和突變
• Vercel AI SDK
• StreamText() API 文件
• Next.js 應用路由器快速入門

以上是使用 Vercel AI SDK 實現多個平行 AI 串流的詳細內容。更多資訊請關注PHP中文網其他相關文章！