AI アプリの作成は複雑になる場合があります。 LangChain.js、Azure Functions、およびサーバーレス テクノロジを使用すると、このプロセスを簡略化できます。 これらのツールは、インフラストラクチャを管理し、チャットボットの機能に集中できるように自動的にスケーリングします。 チャットボットはエンタープライズ ドキュメントを使用して AI 応答を生成します。
このコードには、架空の会社のサンプル データが含まれています。 お客様は、会社の製品に関するサポートの質問をすることができます。 データには、会社のサービス利用規約、プライバシー ポリシー、サポート ガイドに関するドキュメントが含まれます。
注
この記事では、記事内の例とガイダンスの土台として、1 つ以上の AI アプリ テンプレートを使用しています。 AI アプリ テンプレートを使用すると、AI アプリの高品質な開始点を確保するのに役立つ、保守性が高く、簡単にデプロイできる参照実装が提供されます。
アーキテクチャの概要
チャット アプリ
ユーザーはアプリケーションと対話します。
- 会話用のクライアント Web アプリのチャット インターフェイス。
- クライアント Web アプリは、HTTP 呼び出しを介してユーザーのクエリをサーバーレス API に送信します。
- サーバーレス API は、Azure AI と Azure AI Search の間の相互作用を調整して回答を生成するチェーンを作成します。
- Azure Blob Storage を使用した PDF ドキュメントの取得。
- 生成された応答は、Web アプリに返送され、ユーザーに表示されます。
チャット アプリの単純なアーキテクチャを次の図に示します。
LangChain.js により、サービス間の複雑さが簡略化されます
API フローは、相互作用を抽象化することで、このシナリオで LangChain.js がどのように役立つのかを理解するのに役立ちます。 サーバーレス API エンドポイント:
- ユーザーから質問を受け取ります。
- クライアント オブジェクトを作成します。
- 埋め込みとチャットのための Azure OpenAI
- ベクター ストアの Azure AI Search
- LLM モデル、チャット メッセージ (システムおよびユーザー プロンプト)、およびドキュメント ソースを使用してドキュメント チェーンを作成します。
- ドキュメント チェーンとベクター ストアから取得チェーンを作成します。
- 取得チェーンからの応答をストリーミングします。
開発者の作業は、Azure OpenAI や Azure AI Search などの依存関係サービスを正しく構成し、チェーンを正しく構築することです。 基になるチェーン ロジックは、クエリを解決する方法を認識します。 これにより、LangChain.js 要件で動作する限り、さまざまなサービスと構成からチェーンを構築できます。
このアーキテクチャの Azure はどこにありますか?
このアプリケーションは、複数のコンポーネントから作成されます。
Lit で構築され、Azure Static Web Appsでホストされる 1 つのチャット Web コンポーネントで作成された Web アプリ。 コードは、
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 アクセス許可 (ユーザー アクセス管理者 や所有者 など) が必要です。
- GitHub アカウント。
オープン開発環境
この記事を完了するために必要なすべての依存関係を含む、構成済みの開発環境をデプロイするには、次の手順に従います。
GitHub Codespaces は、 Visual Studio Code for the Web をユーザー インターフェイスとして使用して、GitHub によって管理される開発コンテナーを実行します。 最も簡単な開発環境では、GitHub Codespaces を使用して、この記事を完了するために正しい開発者ツールと依存関係がプレインストールされるようにします。
重要
すべての GitHub アカウントでは、コア インスタンスが 2 つあり、毎月最大 60 時間無料で Codespaces を使用できます。 詳細については、GitHub Codespaces の毎月含まれるストレージとコア時間を参照してください。
codespace で開きます。
で開くコードスペースが起動するまで待ちます。 このスタートアップ プロセスには数分かかる場合があります。
画面の下部にあるターミナルで、Azure Developer CLI を使用して Azure にサインインします。
azd auth login認証プロセスを完了します。
この記事の残りのタスクは、この開発コンテナーのコンテキストで行われます。
デプロイと実行
サンプル リポジトリには、サーバーレス チャット アプリを Azure にデプロイするために必要なすべてのコードと構成ファイルが含まれています。 次の手順では、サンプルを Azure にデプロイするプロセスについて説明します。
チャット アプリを Azure にデプロイする
重要
このセクションで作成された Azure リソースでは、主に Azure AI Search リソースから即時のコストが発生します。 これらのリソースは、コマンドが完全に実行される前に中断した場合でも、コストが発生する可能性があります。
次の Azure Developer CLI コマンドを使用して、Azure リソースをプロビジョニングし、ソース コードをデプロイします。
azd up次の表を使用して、プロンプトに応答します。
Prompt 答え 環境名 短く、小文字にしてください。 名前またはエイリアスを追加します。 たとえば、 john-chatのようにします。 リソース グループ名の一部として使用されます。サブスクリプション リソースを作成するためのサブスクリプションを選択します。 場所 (ホスティング用) 一覧から近くの場所を選択します。 OpenAI モデルの場所 一覧から近くの場所を選択します。 最初の場所と同じ場所を使用できる場合は、その場所を選択します。 アプリがデプロイされるまで待ちます。 デプロイが完了するまでに 5 ~ 10 分かかる場合があります。
アプリケーションが正常にデプロイされると、ターミナルに 2 つの URL が表示されます。
ブラウザーでチャット アプリケーションを開くには、
Deploying service webappというラベルが付いた URL を選択します。
チャット アプリを使用して PDF ファイルから回答を取得する
チャット アプリには、PDF ファイル カタログからのレンタル情報が事前に読み込まれています。 チャット アプリを使用して、レンタル プロセスに関する質問をすることができます。 次の手順では、チャット アプリを使用するプロセスについて説明します。
ブラウザーで、「What is the refund policy?」(払い戻し条件は?) を選択または入力します。
フォローアップの質問を選択します。
回答から引用文献を選択すると、回答の生成に使用されたドキュメントが表示されます。 これにより、Azure Storage からクライアントにドキュメントが配信されます。 新しいブラウザー タブが完了したら、それを閉じてサーバーレス チャット アプリに戻ります。
リソースをクリーンアップする
Azure リソースをクリーンアップする
この記事で作成した Azure リソースは、Azure サブスクリプションに課金されます。 今後これらのリソースが必要になるとは思わない場合は、削除して、より多くの料金が発生しないようにします。
次の Azure Developer CLI コマンドを使用して、Azure リソースを削除し、ソース コードを削除します。
azd down --purge
GitHub Codespaces をクリーンアップする
GitHub Codespaces 環境を削除すると、アカウントに対して取得するコア時間単位の無料エンタイトルメントの量を最大化できます。
GitHub Codespaces ダッシュボードにサインインします。
Azure-Samples/serverless-chat-langchainjsGitHub リポジトリをソースとして現在実行中の Codespaces を見つけます。
コードスペースのコンテキスト メニュー
...を開き、[ 削除] を選択します。
ヘルプを受ける
このサンプル リポジトリでは、トラブルシューティング情報を提供します。
問題が解決しない場合は、リポジトリの [問題] にその問題を記録します。
関連コンテンツ
- JavaScript のチャット アプリで回答の評価を開始する
- このテンプレートでの AZD の使用方法の詳細については、以下を参照してください。