次の方法で共有

JavaScript でのアシスタントおよび関数呼び出しによる Azure OpenAI の概要

  • [アーティクル]

この記事では、サーバーレス Azure OpenAI アシスタント クイック スタートをデプロイして実行する方法について説明します。 このサンプルでは、JavaScript、関数呼び出しを使用した Azure OpenAI Service アシスタント、および Azure Functions を使用してアシスタント アプリを実装します。

アーキテクチャの概要

Azure OpenAI アシスタント使用すると、カスタム指示によってニーズに合わせた AI アシスタントを作成し、コード インタープリターやカスタム関数などの高度なツールによって拡張することができます。 この記事では、アシスタント API の使用を開始するための詳細なチュートリアルが用意されています。

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

このアプリケーションは、次の 2 つのメイン コンポーネントを中心に構築されています。

  • Vanilla CSS ファイルと JavaScript ファイルを含み、Azure Static Web Apps でホストされているシンプルな HTML ページ。

  • Azure Functions と OpenAI JavaScript SDK を使用して構築されたサーバーレス API。 サーバーレス アプリは、関数呼び出しを含むアシスタント定義を OpenAI エンドポイントに送信します。 エンドポイントは、フォローアップ関数呼び出しと、その呼び出しを完了するのに必要なパラメーターで応答します。

    • サンプルの関数呼び出しでは、Azure Function に送信されたストック シンボルに基づいてランダムなストック ティッカー値を生成することで、API 呼び出しをシミュレートします。 このシミュレーションは、ソリューション内のリモート API に置き換えることができます。

    Azure Functions と Azure OpenAI の統合を示す図。Azure OpenAI は、Azure Functions が呼び出す必要がある後続の関数名を返すことができます。

前提条件

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

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

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

開発環境を開く

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

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

重要

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

  1. main GitHub リポジトリの Azure-Samples/azure-openai-assistant-javascript ブランチに新しい GitHub Codespace を作成するプロセスを開始します。

  2. 次のボタンを右クリックし、[新しいウィンドウでリンクを開く] を選択して、開発環境とドキュメントの両方を同時に使用できるようにします。

    GitHub codespaces で開く

  3. [codespace の作成] ページで、codespace の構成設定を確認した後に、[新しい codespace の作成] を選択します

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

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

    azd auth login

  6. ターミナルからコードをコピーし、ブラウザーに貼り付けます。 手順に従って、Azure アカウントで認証します。

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

デプロイして実行する

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

Azure へのアシスタント アプリのデプロイ

重要

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

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

    azd up

  2. 環境名の入力を求められたら、短く小文字のままにします。 たとえば、myenv のようにします。 リソース グループ名の一部として使用されます。

  3. メッセージが表示されたら、リソースを作成するサブスクリプションを選択します。

  4. 最初に場所を選択するように求められたら、近くの場所を選択します。 この場所は、ホスティングを含むほとんどのリソースに使用されます。

  5. OpenAI モデルの場所の入力を求められたら、近くの場所を選択します。 最初の場所と同じ場所を使用できる場合は、その場所を選択します。

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

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

  8. Deploying service web というラベルの付いたその URL を選択して、ブラウザーでアシスタント アプリケーションを開きます。

アシスタント アプリの使用

アシスタント アプリを使用して、MSFT の株式相場を取得することができます。 次の手順では、アシスタント アプリを使用するプロセスについて説明します。 アシスタントは、回答をメールで送信できます。 まだ構成されていないため、その指示を使用しないようプロンプトを変更します。

  1. ブラウザーで、次のプロンプトをコピーして貼り付けます。

    Based on the latest financial data and current stock market trends, can you provide a detailed analysis of Microsoft's current state? Please include insights into their recent performance, market position, and future outlook. Additionally, retrieve and include the latest closing price of Microsoft's stock using its ticker symbol (MSFT).

  2. [実行] ボタンを選択します。 結果は、次の応答と同様になります。

    アシスタント アプリの最初の回答のスクリーンショット。

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

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/azure-openai-assistant-javascript GitHub リポジトリをソースとして現在実行中の Codespaces を見つけます。

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

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

ヘルプを参照する

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

問題が解決していない場合は、リポジトリの [問題] に問題のログを記録してください。

関連するコンテンツ