次の方法で共有

LangChain.js を使用した RAG によるサーバーレス AI チャットの概要

  • [アーティクル]

AI アプリの作成は複雑になる場合があります。 LangChain.js、Azure Functions、およびサーバーレス テクノロジを使用すると、このプロセスを簡素化できます。 これらのツールを使用すると、インフラストラクチャの管理とスケーリングが自動的に行われるため、開発者はチャットボットの機能に専念できます。 チャットボットはエンタープライズ ドキュメントを使用して AI 応答を生成します。

このコードには、架空の会社 Contoso Real Estate のサンプル データが含まれています。 この会社では、製品についてサポート関連の質問をお客様から受けることがあります。 データには、会社のサービス使用条件、プライバシー ポリシー、サポート ガイドに関するドキュメントが含まれています。

ブラウザーのチャット アプリのスクリーンショット。チャット入力に関するいくつかの提案と、質問を入力するためのチャット テキスト ボックスが表示されています。

Note

この記事では、記事内の例とガイダンスの土台として、1 つ以上の AI アプリ テンプレートを使用しています。 AI アプリ テンプレートは、適切にメンテナンスされ、デプロイが容易なリファレンス実装を提供します。これは、高品質な AI アプリの作成を開始するために役立ちます。

アーキテクチャの概要

チャット アプリ

ユーザーがアプリケーションと対話します。

  • クライアント Web アプリのチャット インターフェイスを使用します。
  • クライアント Web アプリは、HTTP 呼び出しを介してユーザーからの質問をサーバーレス API に送信します。
  • サーバーレス API は、Azure AI と Azure AI 検索の間の対話を調整するチェーンを作成して、回答を生成します。
  • ドキュメントを参照する必要がある場合は、Azure Blob Storage を使用して PDF ドキュメントの取得が行われます。
  • 生成された応答は、Web アプリに返送され、ユーザーに表示されます。

チャット アプリの単純なアーキテクチャを次の図に示します:

クライアントからバックエンド アプリへのアーキテクチャを示す図。

LangChainjs がサービス間の複雑さを簡素化

対話を抽象化して API フローを確認すると、このシナリオで LangChainJS がどのように役立つかを理解するために役立ちます。 サーバーレス API エンドポイントの動作は次のとおりです。

  • ユーザーから質問を受け取ります。
  • 以下のクライアント オブジェクトを作成します。
    • Azure OpenAI (埋め込みおよびチャット用)
    • Azure AI 検索 (ベクトル ストア用)
  • LLM モデル、チャット メッセージ (システムおよびユーザー プロンプト)、およびドキュメント ソースを使用してドキュメント チェーンを作成します。
  • ドキュメント チェーンとベクトル ストアから取得チェーンを作成します。
  • 取得チェーンからの応答をストリーミングします。

開発者の仕事は、Azure OpenAI や Azure AI 検索などの依存関係サービスを正しく構成し、チェーンを正しく構築することです。 質問に対する解決方法は、基になるチェーン ロジックが理解しています。 このため、LangChain の要件に適合する限り、さまざまなサービスや構成からチェーンを構築できます。

このアーキテクチャにおける Azure の使用箇所

このアプリケーションは、次のような複数のコンポーネントで構成されています。

  • 単一のチャット Web コンポーネントから成る Web アプリ。Lit で構築され、Azure Static Web Apps でホストされます。 コードは packages/webapp フォルダーにあります。

  • Azure Functions で構築され、LangChain.js を使用してドキュメントを取り込み、ユーザー チャットでの質問に対する応答を生成するサーバーレス API。 コードは packages/api フォルダーにあります。

  • 埋め込みを作成し、回答を生成するための Azure OpenAI サービス。

  • Azure AI 検索 を使用して、ドキュメントから抽出されたテキストと LangChain.js によって生成されたベクトルを保存するデータベース。

  • Azure Blob Storage を使用して、ソース ドキュメントを保存するファイル ストレージ。

前提条件

開発コンテナー環境は、この記事を完了するために必要なすべての依存関係と共に使用できます。 開発コンテナーは、(ブラウザーで) GitHub Codespaces で実行することも、Visual Studio Code を使用してローカルで実行することもできます。

この記事の手順を使用するには、次の前提条件が必要になります。

  • Azure サブスクリプション - 無料アカウントを作成します
  • Azure アカウントのアクセス許可 - Azure アカウントには、ユーザー アクセス管理者や所有者などの Microsoft.Authorization/roleAssignments/write アクセス許可が必要です。
  • 目的の Azure サブスクリプション内の Azure OpenAI に付与されたアクセス権。 現時点では、このサービスへのアクセスは申請によってのみ許可されます。 Azure OpenAI へのアクセスを申請するには、https://aka.ms/oai/access のフォームに入力してください。 問題がある場合は、このリポジトリで問題をオープンしてお問い合わせください。
  • GitHub アカウント

開発環境を開く

この記事を完了するため、すべての依存関係がインストールされている開発環境から始めます。

GitHub Codespaces は、 Visual Studio Code for the Web をユーザー インターフェイスとして使用して、GitHub によって管理される開発コンテナーを実行します。 最も簡単な開発環境では、GitHub Codespaces を使用して、この記事を完了するために正しい開発者ツールと依存関係がプレインストールされるようにします。

重要

すべての GitHub アカウントでは、2 つのコア インスタンスで毎月最大 60 時間無料で Codespaces を使用できます。 詳細については、「 GitHub Codespaces に月単位で含まれるストレージとコア時間」を参照してください。

  1. Codespace で開きます。

    GitHub codespaces で開く

  2. Codespace が起動するまで待ちます。 この起動プロセスには数分かかることがあります。

  3. 画面の下部にあるターミナルで、Azure Developer CLI を使用して Azure にサインインします。

    azd auth login

    認証プロセスを完了します。

  4. この記事の残りのタスクは、この開発コンテナーのコンテキストで行われます。

デプロイして実行する

サンプル リポジトリには、サーバーレス チャット アプリを Azure にデプロイするために必要なすべてのコードと構成ファイルが含まれています。 次の手順では、サンプルを Azure にデプロイするプロセスについて説明します。

チャット アプリを Azure にデプロイする

重要

このセクションで作成した Azure リソースでは、主に Azure AI Search リソースからのコストが直ちに発生します。 これらのリソースは、コマンドが完全に実行される前に中断した場合でも、コストが発生する可能性があります。

  1. 次の Azure Developer CLI コマンドを実行して、Azure リソースをプロビジョニングし、ソース コードをデプロイします:

    azd up

  2. プロンプトに応答するには、次の表を使用します。

    Prompt 回答
    環境名 常に短くし、小文字を使用します。 自分の名前またはエイリアスを追加します。 たとえば、john-chat のようにします。 リソース グループ名の一部として使用されます。
    サブスクリプション リソースの作成先となるサブスクリプションを選択します。
    場所 (ホスティング用) リストから、自分に近い場所を選択します。
    場所 (OpenAI モデル用) リストから、自分に近い場所を選択します。 最初の場所と同じ場所を使用できる場合は、その場所を選択します。

  3. アプリがデプロイされるまで待ちます。 デプロイが完了するまでに、5 分から 10 分程度かかる場合があります。

  4. アプリケーションが正常にデプロイされると、ターミナルに 2 つの URL が表示されます。

  5. Deploying service webapp とラベルの付いたその URL を選択して、ブラウザーでチャット アプリケーションを開きます。

チャット アプリを使用して PDF ファイルから回答を取得する

チャット アプリには、賃貸情報が PDF ファイルのカタログから事前に読み込まれています。 このチャット アプリでは、賃貸のプロセスについて質問できます。 次の手順では、チャット アプリを使用するプロセスについて説明します。

  1. ブラウザーで、「What is the refund policy?」(払い戻し条件は?) を選択または入力します。

    チャット アプリの最初の質問と回答のスクリーンショット。

  2. フォローアップの質問を選択します。

    チャット アプリの推奨されるフォローアップ プロンプトと回答のスクリーンショット。

  3. 応答から引用情報を選択すると、回答の生成に使用されたドキュメントが表示されます。 このとき、Azure Storage からクライアントにドキュメントが送られています。 新しいブラウザー タブの使用が完了したら、タブを閉じてサーバーレス チャット アプリに戻ります。

    引用内容を含む元のドキュメントのスクリーンショット。

リソースをクリーンアップする

Azure リソースをクリーンアップする

この記事で作成した Azure リソースは、Azure サブスクリプションに課金されます。 今後これらのリソースが必要になるとは思わない場合は、削除して、より多くの料金が発生しないようにします。

次の Azure Developer CLI コマンドを実行して、Azure リソースを削除し、ソース コードを削除します:

azd down --purge

GitHub Codespaces をクリーンアップする

GitHub Codespaces 環境を削除すると、アカウントに対して取得するコアごとの無料時間エンタイトルメントの量を最大化できることが保証されます。

重要

GitHub アカウントのエンタイトルメントの詳細については、「 GitHub Codespaces に月単位で含まれるストレージとコア時間」を参照してください。

  1. GitHub Codespaces ダッシュボード (https://github.com/codespaces) にサインインします。

  2. Azure-Samples/serverless-chat-langchainjs GitHub リポジトリをソースとして現在実行中の Codespaces を見つけます。

    それぞれの状態およびテンプレートを含む実行中のすべての codespace のスクリーンショット。

  3. codespace のコンテキスト メニュー ... を開き、[削除] を選択します。

ヘルプを参照する

このサンプル リポジトリでは、トラブルシューティング情報が提供されます。

問題が解決しない場合は、リポジトリの [問題] にその問題を記録します。

関連するコンテンツ