使用 LangChain.js 開始使用無伺服器 AI 聊天與 RAG

建立 AI 應用程式可能相當複雜。 透過LangChain.js、Azure Functions 和無伺服器技術，您可以簡化此程式。 這些工具可管理基礎結構並自動調整，讓您專注於聊天機器人功能。 聊天機器人會使用企業檔來產生 AI 回應。

此程式代碼包含虛構公司 Contoso Real Estate 的範例數據。 客戶可以詢問公司產品的相關支持問題。 數據報含公司服務條款、隱私策略和支援指南的檔。

注意

本文使用一或多個 AI 應用程式範本 作為本文範例和指引的基礎。 AI 應用程式範本提供您妥善維護且易於部署的參考實作，以協助確保 AI 應用程式的高品質起點。

架構概觀

聊天應用程式

使用者與應用程式互動：

• 在用戶端應用程式中使用聊天介面。
• 用戶端應用程式會透過 HTTP 呼叫，將使用者的查詢傳送至無伺服器 API。
• 無伺服器 API 會建立一個鏈結，以協調 Azure AI 與 Azure AI 搜尋之間的互動，以產生答案。
• 如果需要參考檔，則會使用 Azure Blob 儲存體 來擷取 PDF 檔。
• 產生的回應接著會傳回至 Web 應用程式，並向用戶顯示。

下圖顯示聊天應用程式的簡單結構：

LangChainjs 可簡化服務之間的複雜度

API 流程有助於瞭解 LangChainJS 在此案例中如何藉由擷取互動來有所説明。 無伺服器 API 端點：

• 從使用者收到問題。
• 建立客戶端物件：
  • 適用於內嵌和聊天的 Azure OpenAI
  • 向量存放區的 Azure AI 搜尋
• 使用 LLM 模型、聊天訊息（系統和使用者提示）和文檔來源建立文件鏈結。
• 從文件鏈結和向量存放區建立擷取鏈結。
• 從擷取鏈結串流回應。

開發人員的工作是正確設定相依性服務，例如 Azure OpenAI 和 Azure AI 搜尋，並正確建構鏈結。 基礎鏈結邏輯知道如何解析查詢。 這可讓您建構許多不同的服務和組態的鏈結，只要它們符合 LangChain 需求即可。

此架構中的 Azure 在哪裡？

此應用程式是由多個元件所組成：

• 使用以 Lit 建置並裝載在 Azure Static Web Apps 上的單一聊天 Web 元件所建立的 Web 應用程式。 程式代碼位於 packages/webapp 資料夾中。

• 使用 Azure Functions 建置的無伺服器 API，並使用 LangChain.js 來內嵌檔，並產生使用者聊天查詢的回應。 程式代碼位於 packages/api 資料夾中。

• 用來 建立內嵌併產生答案的 Azure OpenAI 服務。

• 資料庫，用來儲存從檔擷取的文字，以及使用 Azure AI 搜尋LangChain.js所產生的向量。

• 使用 Azure Blob 儲存體 儲存源檔的檔案記憶體。

必要條件

開發容器環境可提供完成本文所需的所有相依性。 您可以在 GitHub Codespaces (瀏覽器中) 或使用 Visual Studio Code 在本機執行開發容器。

若要使用本文，您需要下列必要條件：

Codespaces (建議)

• Azure 訂用帳戶 - 免費建立一個訂用帳戶
• Azure 帳戶權限 - 您的 Azure 帳戶必須具有 Microsoft.Authorization/roleAssignments/write 權限，例如，使用者存取系統管理員或擁有者。
• 在所需的 Azure 訂用帳戶中授與 Azure OpenAI 的存取權。 目前只有應用程式會授予此服務的存取權。 您可以填妥 https://aka.ms/oai/access 的表單，以申請 Azure OpenAI 的存取權。 如果您遇到問題，請在此存放庫上提出問題，以與我們連絡。
• GitHub 帳戶

Visual Studio Code

• Azure 訂用帳戶 - 免費建立一個訂用帳戶
• Azure 帳戶權限 - 您的 Azure 帳戶必須具有 Microsoft.Authorization/roleAssignments/write 權限，例如，使用者存取系統管理員或擁有者。
• 在所需的 Azure 訂用帳戶中授與 Azure OpenAI 的存取權。 目前只有應用程式會授予此服務的存取權。 您可以填妥 https://aka.ms/oai/access 的表單，以申請 Azure OpenAI 的存取權。 如果您遇到問題，請在此存放庫上提出問題，以與我們連絡。
• Azure Developer CLI
• Docker Desktop - 如果 Docker Desktop 尚未執行，請加以啟動
• Visual Studio Code
• 開發容器延伸模組

開啟開發環境

立即使用已安裝所有相依性的開發環境開始，以完成本文。

GitHub Codespaces (建議)

GitHub Codespaces 會使用網頁版 Visual Studio Code 作爲使用者介面，執行由 GitHub 管理的開發容器。 如需最直接的開發環境，請使用 GitHub Codespaces，使得您有已預先安裝的正確開發人員工具和相依性，以便完成本文。

重要

所有 GitHub 帳戶每個月最多可以使用 Codespaces 60 小時，且有 2 個核心執行個體。 如需詳細資訊，請參閱 GitHub Codespaces 每月包含的儲存體和核心時數。

1. 在 Codespace 中開啟。

   

2. 等候 Codespace 開始。 此啟動程序可能需要幾分鐘的時間。

3. 在畫面底部的終端機中，使用 Azure Developer CLI 登入 Azure。

   azd auth login
   

   完成驗證程式。

4. 本文中的其餘工作會在此開發容器的內容中進行。

Visual Studio Code

適用於 Visual Studio Code 的開發容器延伸模組 需要將 Docker安裝在本機電腦上。 延伸模組會使用具有預先安裝的正確開發人員工具和相依性的 Docker 主機在本機裝載開發容器，來完成本文。

1. 在您的電腦上為專案建立新的本機目錄。

   mkdir my-intelligent-app && cd my-intelligent-app
   

2. 在該目錄中開啟 Visual Studio Code:

   code .
   

3. 在 Visual Studio Code 中開啟新的終端機。

4. 執行下列 AZD 命令，將 GitHub 存放庫帶入本機電腦。

   azd init -t serverless-chat-langchainj
   

5. 開啟命令選擇區，搜尋並選取 [開發容器：在容器 中開啟資料夾]，以在開發容器中開啟專案。 等到開發容器開啟，再繼續進行。

6. 使用 Azure Developer CLI 登入 Azure。

   azd auth login
   

   從終端機複製程式碼，然後將它貼到瀏覽器中。 遵循指示使用 Azure 帳戶進行驗證。

7. 此專案中的其餘練習會在此開發容器的內容中進行。

部署和執行

範例存放庫包含您將無伺服器聊天應用程式部署至 Azure 所需的所有程式代碼和組態檔。 下列步驟會逐步引導您完成將範例部署至 Azure 的程序。

部署聊天應用程式至 Azure

重要

在本節中建立的 Azure 資源會產生立即成本，主要是來自 Azure AI 搜尋服務資源。 即使您在命令完整執行之前中斷命令，這些資源仍可能會產生成本。

1. 執行下列 Azure Developer CLI 命令來佈建 Azure 資源並部署原始程式碼：

   azd up
   

2. 使用下表回答提示：

   提示	回答
   環境名稱	保持簡短和小寫。 新增您的名稱或別名。 例如： john-chat 。 它用來作為資源組名的一部分。
   訂用帳戶	選取要在其中建立資源的訂用帳戶。
   位置 （用於載入）	從清單中選取您附近的位置。
   OpenAI 模型的位置	從清單中選取您附近的位置。 如果有與您的第一個位置相同的位置，請選取該位置。

3. 等候應用程式部署。 部署可能需要 5-10 分鐘才能完成。

4. 成功部署應用程式之後，您會看到終端機中顯示的兩個URL。

5. 選取標示為 Deploying service webapp 的 URL，以在瀏覽器中開啟聊天應用程式。

使用聊天應用程式從 PDF 檔案取得答案

聊天應用程式會預先載入 PDF 檔案目錄中的租用資訊。 您可以使用聊天應用程式來詢問租用程式相關問題。 下列步驟會逐步引導您完成使用聊天應用程式的程序。

1. 在瀏覽器中，選取或輸入 什麼是退款原則。

   

2. 選取後續問題。

   

3. 從回應中，選取引文以查看用來產生答案的檔。 這會將檔從 Azure 儲存體 傳遞至用戶端。 當您完成新的瀏覽器索引標籤時，請關閉它以返回無伺服器聊天應用程式。

   

清除資源

清除 Azure 資源

在本文中建立的 Azure 資源會向您的 Azure 訂用帳戶計費。 如果您預計未來不需要這些資源，請將其刪除，以避免產生更多費用。

執行下列 Azure Developer CLI 命令來刪除 Azure 資源並移除原始程式碼：

azd down --purge

清除 GitHub Codespaces

GitHub Codespaces

刪除 GitHub Codespaces 環境，可確保您可將您為帳戶取得的每個核心免費時數權利數量最大化。

重要

如需 GitHub 帳戶權利的詳細資訊，請參閱 GitHub Codespaces 每月包含的儲存體和核心時數。

1. 登入 GitHub Codespaces 儀表板 (https://github.com/codespaces)。

2. 找出您目前執行中的 Codespaces，而其來源為 Azure-Samples/serverless-chat-langchainjs GitHub 存放庫。

   

3. 開啟操作功能表 ， ...針對codespace，然後選取 [ 刪除]。

Visual Studio Code

您不一定需要清除本機環境，但您可以停止執行中的開發容器，並在本機工作區的內容中返回執行中的 Visual Studio Code。

1. 開啟 [命令選擇區]，搜尋 [開發容器] 命令，然後選取 [開發容器: 在本機重新開啟資料夾]。

   

提示

Visual Studio Code 會停止執行中的開發容器，但容器仍以停止狀態存在於 Docker 中。 您一律可選擇從 Docker 刪除容器執行個體、容器映像和磁碟區，以在本機電腦上釋放更多空間。

取得協助

此範例存放庫可提供疑難排解資訊。

如果您的問題未獲得解決，請將問題記錄至存放庫的 [問題]。

相關內容

• 開始在 JavaScript 的聊天應用程式中評估答案