基本的な AI チャットボットを構築する

AI チャットボット テンプレートには、ユーザーの質問に応答し、ユーザーが Microsoft Teams で AI ボットと対話できるようにする、ChatGPTと同様のボット アプリが紹介されています。 Teams AI ライブラリ を使用してアプリ テンプレートを構築し、AI ベースの Teams アプリケーションを作成する機能を提供します。

前提条件

インストール 使用するには...
Visual Studio Code JavaScript、TypeScript、または Python ビルド環境。 最新バージョンを使用します。
Teams ツールキット アプリのプロジェクト スキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。 最新バージョンを使用します。
Node.js バックエンド JavaScript ランタイム環境。 詳細については、「 プロジェクトの種類Node.js バージョン互換性テーブル」を参照してください
Microsoft Teams Microsoft Teams は、チャット、会議、通話のアプリを通じて作業するすべてのユーザーと 1 か所で共同作業を行います。
Azure OpenAI 最初に OpenAI API キーを作成して、OpenAI の生成済み事前トレーニングトランスフォーマー (GPT) を使用します。 アプリをホストする場合、または Azure でリソースにアクセスする場合は、Azure OpenAI サービスを作成する必要があります。

新しい基本的な AI チャットボット プロジェクトをCreateする

  1. Visual Studio Code を開きます。

  2. Visual Studio Code アクティビティ バーの [Teams Toolkit] アイコンを選択します

  3. [新しいアプリCreate] を選択します

    スクリーンショットは、Teams Toolkit サイドバーの [新しいプロジェクト] リンクCreateの場所を示しています。

  4. [ カスタム Copilot] を選択します。

    作成する新しいプロジェクトとしてカスタム Copilot を選択するオプションを示すスクリーンショット。

  5. [ Basic AI Chatbot] を選択します。

    AI ライブラリ リストを使用してアプリ機能を選択するオプションを示すスクリーンショット。

  6. [ JavaScript] を選択します

    プログラミング言語を選択するオプションを示すスクリーンショット。

  7. [ Azure OpenAI] を選択します。

    LLM を選択するオプションを示すスクリーンショット。

  8. 選択したサービスに基づいて 、OpenAI または Azure OpenAI の資格情報を入力します。 Enter キーを押します。

    Azure Open API キーを入力する場所を示すスクリーンショット。

  9. [ 既定のフォルダー] を選択します

    保存する場所アプリ フォルダーを示すスクリーンショット。

    既定の場所を変更するには、次の手順に従います。

    1. [ 参照] を選択します
    2. プロジェクト ワークスペースの場所を選択します。
    3. [ フォルダーの選択] を選択します
  10. アプリのアプリケーション名を入力し、 Enter キーを選択します。

    適切な名前を入力するオプションを示すスクリーンショット。

    AI チャット ボット プロジェクト ワークスペースが正常に作成されました。

    AI チャットボットが作成され、readme ファイルが使用可能であることを示すスクリーンショット。

  11. [エクスプローラー] でenv.env.testtool.user> ファイルに移動します。

  12. 次の詳細を更新します。

    • SECRET_AZURE_OPENAI_API_KEY=<your-key>
    • AZURE_OPENAI_ENDPOINT=<your-endpoint>
    • AZURE_OPENAI_DEPLOYMENT_NAME=<your-deployment>

    env ファイルで更新された詳細を示すスクリーンショット。

  13. アプリをデバッグするには、 F5 キーを選択するか、左側のウィンドウで [ 実行とデバッグ] (Ctrl + Shift + D) を選択し、ドロップダウン リストから [ テスト ツール (プレビュー)] で [デバッグ ] を選択します。

    オプションの一覧からのデバッグ オプションの選択を示すスクリーンショット。

テスト ツールは、Web ページでボットを開きます。

基本的な AI チャットボットを使用したボットの応答を示すスクリーンショット。

ボット アプリのソース コードのツアーを開始する

フォルダー コンテンツ
.vscode デバッグ用の Visual Studio Code ファイル。
appPackage Teams アプリケーション マニフェストのテンプレート。
env 環境ファイル。
infra Azure リソースをプロビジョニングするためのテンプレート。
src アプリケーションのソース コード。
teamsapp.yml これは、Teams Toolkit プロジェクト ファイルメインです。 プロジェクト ファイルには、プロパティと構成ステージ定義という 2 つの主要な要素が定義されています。
teamsapp.local.yml これは、ローカル実行 teamsapp.yml とデバッグを有効にするアクションでオーバーライドされます。
teamsapp.testtool.yml これは、 teamsapp.yml Teams アプリ テスト ツールでローカル実行とデバッグを有効にするアクションでオーバーライドされます。
src/index.js ボット アプリ サーバーを設定します。
src/adapter.js ボット アダプターを設定します。
src/config.js 環境変数を定義します。
src/prompts/chat/skprompt.txt プロンプトを定義します。
src/prompts/chat/config.json プロンプトを構成します。
src/app/app.js 基本的な AI チャットボットのビジネス ロジックを処理します。

Teams AI チャットボットのしくみ

Teams AI ライブラリには、次のように AI 機能を備えたインテリジェント なチャットボットを構築するためのフローが用意されています。

AI チャットボットの一般的なフローを示すスクリーンショット。

  • TurnContext: ターン コンテキスト オブジェクトは、送信者と受信者、チャネル、アクティビティの処理に必要なその他のデータなど、アクティビティに関する情報を提供します。

  • TurnState: ターン状態オブジェクトは、Cookie と同様に、現在のターンのデータを格納します。 このオブジェクトは、ターン コンテキストとして、アクティビティ ハンドラーや AI システムなど、アプリケーション ロジック全体を介して実行されます。

  • 認証: ユーザー認証が構成されている場合、Teams AI はユーザーのサインインを試みます。 ユーザーが既にサインインしている場合、SDK はアクセス トークンを取得して続行します。 それ以外の場合、SDK はサインイン フローを開始し、現在のターンを終了します。

  • アクティビティ ハンドラー: Teams AI ライブラリは、登録されたアクティビティ ハンドラーのセットを実行し、複数の種類のアクティビティを処理できるようにします。 アクティビティ ハンドラー システムは、ボットまたはメッセージ拡張アプリ ロジックを実装するための主要な方法です。 これは、着信アクティビティに基づいてトリガーされる、ルート ハンドラーと呼ばれるコールバックを登録できる一連のメソッドと構成です。 受信アクティビティは、メッセージ、メッセージのリアクション、または Teams アプリ内のほぼすべての操作の形式にすることができます。

  • AI システム: Teams AI ライブラリの AI システムは、入力と出力のモデレート、プランの生成、実行を担当します。 これは、スタンドアロンとして使用することも、アプリ オブジェクトによって にルーティングすることもできます。 重要な概念は次のとおりです。

    1. プロンプト マネージャー: プロンプトは、大規模言語モデル (LLM) AI の動作を伝え、指示する上で重要な役割を果たします。
    2. Planner: プランナーは、プロンプトまたはプロンプト テンプレートの形式でユーザーの要求を受け取り、それを満たす計画を返します。 これは、AI を使用して、AI システムに登録されているアクションと呼ばれるアトミック関数を混在させて照合することで実現されます。 これらのアクションは、目標を完了する一連の手順に組み込まれます。
    3. アクション: アクションは、AI システムに登録されるアトミック関数です。
  • AfterTurn ハンドラー: アクティビティ ハンドラーまたは AI システムが実行されると、Teams AI ライブラリによってハンドラーが afterTurn 実行されます。 ハンドラーを使用すると、ターン後にアクションを実行できます。 が として true返された場合、SDK はターン状態をストレージに保存します。

  • ユーザーに応答する: Teams AI ライブラリは状態を保存し、ボットは応答をユーザーに送信できます。

基本的な AI チャットボットをカスタマイズする

次のように、基本的なアプリの上にカスタマイズを追加して、複雑なシナリオを構築できます。

  1. プロンプトのカスタマイズ: プロンプトは、LLMs AI の動作を伝え、指示する上で重要な役割を果たします。 これらは、ユーザーがモデルから特定の応答を引き出すために提供できる入力またはクエリとして機能します。 LLM に名前の提案を求めるプロンプトを次に示します。

    要求

    Give me 3 name suggestions for my pet golden retriever.
    

    Response

    Some possible name suggestions for a pet golden retriever are:
    - Bailey
    - Sunny
    - Cooper
    

    Teams Toolkit で生成されたプロジェクトを使用するには、ファイル内でプロンプトを src/prompts/chat/skprompt.txt 作成します。 このファイルに書き込まれたプロンプトは、LLM に指示するために使用されるプロンプトに挿入されます。 Teams AI ライブラリでは、プロンプト テキストで使用できる次の構文が定義されています。

    1. {{ $[scope].property }}: Teams AI ライブラリは、ターン状態内でスコープが設定され、定義されているプロパティの値をレンダリングします。 一時、ユーザー、会話の 3 つのスコープを定義します。 スコープが指定されていない場合、ライブラリは既定で一時スコープを使用します。

    2. {{$[scope].property}} 、次の方法で使用されます。

      1. ファイルで src/app/turnState.ts 、一時状態、ユーザー状態、会話状態、アプリのターン状態を定義します。 ファイルが turnState.ts プロジェクトに存在しない場合は、 の下に作成します src/app

        import { DefaultConversationState, DefaultTempState, DefaultUserState, TurnState } from "@microsoft/teams-ai";
        
        export interface TempState extends DefaultTempState {  }
        export interface UserState extends DefaultUserState {  }
        export interface ConversationState extends DefaultConversationState {
            tasks: Record<string, Task>;
        }
        
        export interface Task {
            title: string;
            description: string;
        }
        
        export type ApplicationTurnState = TurnState<ConversationState, UserState, TempState>;
        
      2. ファイルで、アプリの src/app/app.ts ターン状態を使用してアプリを初期化します。

        const storage = new MemoryStorage();
        const app = new Application<ApplicationTurnState>({
          storage,
          ai: {
            planner,
          },
        });
        
      3. ファイルで src/prompts/chat/skprompt.txt 、 などの {{$conversation.tasks}}スコープ付き状態プロパティを使用します。

  2. ユーザー入力をカスタマイズする: Teams AI ライブラリを使用すると、ユーザー入力を含めることで LLM に送信されるプロンプトを拡張できます。 ユーザー入力を含める場合は、 で を に設定completion.include_inputして、プロンプト構成ファイルでsrc/prompts/chat/config.json指定するtrue必要があります。 を変更completion.max_input_tokensして、 のsrc/prompts/chat/config.jsonユーザー入力トークンの最大数を必要に応じて構成することもできます。 これは、トークンの制限を超えないようにユーザー入力の長さを制限する場合に便利です。

  3. 会話履歴のカスタマイズ: SDK によって会話履歴が自動的に管理され、次のようにカスタマイズできます。

    • src/prompts/chat/config.jsonを構成します completion.include_history。 の場合 true、LLM が会話コンテキストを認識できるように、履歴がプロンプトに挿入されます。

    • 履歴メッセージの最大数。 を初期化するときにを構成 max_history_messages します PromptManager

      
      const prompts = new PromptManager({
      promptsFolder: path.join(__dirname, "../prompts"),
      max_history_messages: 3,
      });
      
    • 履歴トークンの最大数。 を初期化するときに ens を構成 max_conversation_history_tokします PromptManager

      
      const prompts = new PromptManager({
          promptsFolder: path.join(__dirname, "../prompts"),
          max_conversation_history_tokens: 1000,
      });
      
      
  4. モデルの種類をカスタマイズする: プロンプトに特定のモデルを使用できます。 ファイルで を src/prompts/chat/config.json 構成します completion.model。 プロンプトに対してモデルが構成されていない場合は、 で構成された既定の OpenAIModel モデルが使用されます。

    SDK をサポートするモデルは次のとおりです。

    モデル サポート
    gpt-3.5-turbo サポート
    gpt-3.5-turbo-16k サポート
    gpt-3.5-turbo-instruct 1.1.0 からサポートされていません
    gpt-4 サポートされている
    gpt-4-32k サポート
    gpt-4-vision サポートされている
    gpt-4-turbo サポート
    DALL·E 非サポート
    ささやく 非サポート
    Tss 非サポート
  5. モデル パラメーターをカスタマイズする:

    ファイルで src/prompts/chat/config.json 、完了時に次のようにモデル パラメーターを構成します。

    • Max_tokens: 生成するトークンの最大数。
    • 温度: 温度を 0 ~ 2 の数値としてモデルします。
    • Top_p: 0 ~ 2 の数値としてのモデル top_p
    • Presence_penalty: 0 から 1 までの数値としてのモデル presence_penalty
    • Frequency_penalty: 0 から 1 までの数値としてのモデル frequency_penalty
    • Stop_sequences: ヒット時に生成を停止する停止シーケンスの配列。

関連項目

Teams AI ライブラリ