ラボ BTA3 - ユーザーエクスペリエンスの向上

このラボでは Teams AI ライブラリが提供する一連の機能 Powered by AI について学び、それらをカスタムエンジンエージェントに組み込み、ユーザーエクスペリエンスを向上させます。

このラボで行うこと:

Powered by AI 機能とは何かを学ぶ
フィードバックループを有効化してユーザーからのフィードバックを収集
Adaptive Card を使用して引用をカスタマイズ
Generated by AI ラベルを有効化
Sensitivity ラベルを有効化

このビデオでラボの概要を簡単に把握できます。

Azure OpenAI と Teams AI library を使用してカスタム AI モデルとオーケストレーションを備えた Custom エンジンエージェントを構築したい場合は、これらのラボを実施してください

はじめに

Powered by AI とは?

Powered by AI は、カスタムエンジンエージェントとの対話をより魅力的でユーザーフレンドリーにする、Teams AI ライブラリが提供する一連の機能です。主な機能は次のとおりです。

フィードバックループ: ユーザーは AI の応答に対して親指の上げ下げで評価できます。このフィードバックは AI の精度と有用性を継続的に改善します。
引用 (Citations): AI が情報源への参照を提示し、透明性と信頼性を確保します。
Generated by AI: AI システムが生成したメッセージに「AI generated」というラベルを付け、AI と人間の応答を区別できるようにします。
Sensitivity 情報: 共有内容が機密性を帯びている場合、感度ラベルが表示され、組織外への共有可否を示します。

前の演習では Retrieval-Augmented Generation (RAG) とそれをカスタムエンジンエージェントへ統合する方法を学びました。本演習では Powered by AI 機能を活用してユーザーエクスペリエンスをさらに高めます。手順は次のとおりです。

フィードバックループの実装
引用のカスタマイズ
AI 生成メッセージのラベル付け
Sensitivity 情報の表示

Powered by AI 機能を組み込むことで、カスタムエンジンエージェントはより透明性が高く信頼でき、ユーザーフレンドリーになり、全体的なエクスペリエンスが向上します。

エクササイズ 1: フィードバックループを有効化

この演習では、前のラボで作成したソースコードをそのまま使用できます。

手順 1: アプリにフィードバックループを統合

プロジェクトの src/app/app.ts を開き、アプリケーションインスタンスを見つけて ai プロパティの括弧内に enable_feedback_loop: true を追加します。更新後のアプリケーションインスタンスは次のとおりです。

const app = new Application({
  storage,
  ai: {
    planner,
    //feedback loop is enabled
    enable_feedback_loop: true
  },
});

フィードバック応答を処理するため、src/app/app.ts に次のコードスニペットを追加します。

app.feedbackLoop(async (_context, _state, feedbackLoopData) => {
  if (feedbackLoopData.actionValue.reaction === 'like') {
      console.log('👍' + ' ' + feedbackLoopData.actionValue.feedback!);
  } else {
      console.log('👎' + ' ' + feedbackLoopData.actionValue.feedback!);
  }
});

手順 2: フィードバックループ機能をテスト

Career Genie をフィードバックループ機能付きでテストしてみましょう。Visual Studio Code の Run and Debug タブから Debug in Teams (Edge) または Debug in Teams (Chrome) を選択してデバッグを開始します。ブラウザーで Microsoft Teams が開き、アプリの詳細が表示されたら Add を選択してチャットを開始します。

ヒント: この演習をローカルでテストする

これまで実装した Teams AI ライブラリの一部機能は Teams App Test Tool では正常に動作しない場合があります。必ず Teams 上でローカルテストとデバッグを行ってください。

フィードバックループを試す前に「Hi」や「Suggest me .NET developers who can speak Spanish.」のような質問を入力します。カスタムエンジンエージェントの応答の左下に親指の上げ下げボタンが表示されることに気付きます。

フィードバックループを有効化したチャット UI。応答の下部左に親指の上げ下げボタンがあり、ユーザーがフィードバックを提供できる。

それではフィードバックループを試しましょう。親指の上げ下げボタンのいずれかをクリックすると、すぐにフィードバックカードが表示されます。カードのテキストフィールドにフィードバックを入力し Submit をクリックします。

親指ボタンをクリックすると表示されるフィードバック用ポップアップダイアログ。テキストフィードバック入力欄と 'Submit' ボタンがある。

フィードバックが記録されたか確認するには Visual Studio Code に戻り、ターミナルをチェックします。親指の反応とコメントを含むフィードバック内容が表示されます。

Visual Studio Code のターミナル。ユーザーのフィードバックとして Thumb Up と 'Copilot Camp rocks!' が出力されている。

デバッグでフィードバックループをさらに深掘り

コードをデバッグすると動作を詳しく理解できます。app.feedbackLoop にブレークポイントを設定し、親指ボタンをクリックしてフィードバックループをテストしてください。feedbackLoopData.actionValue.reaction がリアクションを、feedbackLoopData.actionValue.feedback がテキストフィードバックを取得している様子が確認できます。

エクササイズ 2: Adaptive Card で引用をカスタマイズ

カスタムエンジンエージェントでデータソースを定義すると、Teams AI ライブラリは関連ドキュメントを参照するために自動で引用を有効化します。現在のエクスペリエンスを確認するため「Suggest me .NET developers who can speak Spanish.」のような質問をしてみてください。引用にカーソルを合わせるとドキュメントの冒頭が表示されることがわかります。

引用を有効化したチャット UI。応答内に引用マークがあり、ホバーで参照ドキュメント冒頭が表示される。

この演習では引用のエクスペリエンスをさらにパーソナライズし、Adaptive Card を使用して引用の表示方法をカスタマイズします。

手順 1: 引用用の Adaptive Card を作成

src/app/ フォルダーへ移動し card.ts という新しいファイルを作成します。card.ts に次のコードスニペットを追加します。

import { AdaptiveCard, Message, Utilities } from '@microsoft/teams-ai';
/**
 * Create an adaptive card from a prompt response.
 * @param {Message<string>} response The prompt response to create the card from.
 * @returns {AdaptiveCard} The response card.
 */

//Adaptive card to display the response and citations
export function createResponseCard(response: Message<string>): AdaptiveCard {
    const citationCards = response.context?.citations.map((citation, i) => ({
            type: 'Action.ShowCard',
            title: `${i+1}`,
            card: {
                type: 'AdaptiveCard',
                body: [
                    {
                        type: 'TextBlock',
                        text: citation.title,
                        fontType: 'Default',
                        weight: 'Bolder'
                    },
                    {
                        type: 'TextBlock',
                        text: citation.content,
                        wrap: true
                    }
                ]
            }
        }));

    const text = Utilities.formatCitationsResponse(response.content!);
    return {
        type: 'AdaptiveCard',
        body: [
            {
                type: 'TextBlock',
                text: text,
                wrap: true
            },
            {
                type: 'TextBlock',
                text: 'Citations',
                wrap: true,
                fontType: 'Default',
                weight: 'Bolder'
            },
            {
                type: 'ActionSet',
                actions: citationCards
            }
        ],
        $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
        version: '1.5'
    };
}

この Adaptive Card は引用を Action.ShowCard ボタンとしてリスト表示し、クリックすると詳細が表示されます。また、応答のメインコンテンツと引用ボタンを同時に表示します。ユーザーが引用の詳細を確認したい場合はボタンをクリックして全文を閲覧できます。

手順 2: PredictedSayCommand を使用して引用エクスペリエンスをカスタマイズ

PredictedSayCommand は何をするのか?

PredictedSayCommand は AI システムが実行する応答ディレクティブです。PredictedSayCommand をカスタマイズすることで、引用やフィードバックループなど Powered by AI 機能をカスタムエンジンエージェントのアクティビティにきめ細かく統合できます。これによりアプリケーションのニーズに合わせて AI 応答を正確に調整できます。

src/app/app.ts を開き、Adaptive Card をインポートするためにコード冒頭へ次のスニペットを追加します。

import { createResponseCard } from './card';

"botbuilder" のインポートに CardFactory を追加します。更新後は次のようになります。

import { CardFactory, MemoryStorage, MessageFactory, TurnContext } from "botbuilder";

"@microsoft/teams-ai" のインポートに AI と PredictedSayCommand を追加します。更新後は次のようになります。

import { Application, ActionPlanner, OpenAIModel, PromptManager, AI, PredictedSayCommand} from "@microsoft/teams-ai";

引用をカスタマイズするため、src/app/app.ts に次の PredictedSayCommand アクションを追加します。

app.ai.action<PredictedSayCommand>(AI.SayCommandActionName, async (context, state, data, action) => {
  let activity;
  if (data.response.context && data.response.context.citations.length > 0 ) {
      const attachment = CardFactory.adaptiveCard(createResponseCard(data.response));
      activity = MessageFactory.attachment(attachment);
  }
  else {
      activity = MessageFactory.text(data.response.content);
  }

  activity.entities = [
    {
        type: "https://schema.org/Message",
        "@type": "Message",
        "@context": "https://schema.org",
        "@id": ""
    }
  ];
  activity.channelData = {
    feedbackLoopEnabled: true
  };

  await context.sendActivity(activity);

  return "success";

});

手順 3: カスタマイズした引用エクスペリエンスをテスト

Career Genie をカスタマイズした引用エクスペリエンスでテストします。Visual Studio Code の Run and Debug タブから Debug in Teams (Edge) または Debug in Teams (Chrome) を選択してデバッグを開始します。ブラウザーで Microsoft Teams が開き、アプリの詳細が表示されたら Add を選択してチャットを開始します。

ヒント: この演習をローカルでテストする

これまで実装した Teams AI ライブラリの一部機能は Teams App Test Tool では正常に動作しない場合があります。必ず Teams 上でローカルテストとデバッグを行ってください。

テストするにはまず「Hi」や「Hello」で Career Genie に挨拶し、その後「Can you suggest any candidates for a senior developer position with 7+ year experience that requires Japanese speaking?」のような質問をしてみてください。

カスタムエンジンエージェントでの引用の動作を示すアニメーション。プロンプトと 3 件の引用付き応答があり、各引用ボタンで履歴書全文が表示される。

Adaptive Card によるカスタマイズされた引用エクスペリエンスでは、各引用にボタンが表示されます。ボタンをクリックしてドキュメントビューを展開し、各候補者の履歴書詳細を確認してみましょう。

エクササイズ 3: Generated by AI ラベルを有効化

この演習では PredictedSayCommand を引き続き使用してユーザーエクスペリエンスをカスタマイズします。AI と人間の応答を区別できるよう、AI システムが生成したメッセージに「AI generated」ラベルを表示します。

手順 1: PredictedSayCommand を使用して Generated by AI ラベルを有効化

src/app/app.ts を開き、PredictedSayCommand アクションを探します。activity.entities 内に次のコードスニペットを追加してください。

// Generated by AI label
additionalType: ["AIGeneratedContent"]

更新後の activity.entities は次のようになります。

activity.entities = [
    {
        type: "https://schema.org/Message",
        "@type": "Message",
        "@context": "https://schema.org",
        "@id": "",
        // Generated by AI label
        additionalType: ["AIGeneratedContent"],
    },

];

手順 2: Generated by AI ラベルをテスト

Generated by AI ラベル付きで Career Genie をテストします。Visual Studio Code の Run and Debug タブから Debug in Teams (Edge) または Debug in Teams (Chrome) を選択してデバッグを開始します。ブラウザーで Microsoft Teams が開き、アプリの詳細が表示されたら Add を選択してチャットを開始します。

ヒント: この演習をローカルでテストする

これまで実装した Teams AI ライブラリの一部機能は Teams App Test Tool では正常に動作しない場合があります。必ず Teams 上でローカルテストとデバッグを行ってください。

テストするには Career Genie に挨拶するだけで十分です。最初のメッセージの上部に小さく「AI generated」のラベルが表示されます。

Generated by AI ラベルが有効化されたチャット UI。回答の上部に 'AI generated' ラベルが表示されている。

エクササイズ 4: Sensitivity ラベルを有効化

最後の演習では PredictedSayCommand を利用して Sensitivity ラベルを有効化します。Career Genie は人事関連の専門家であり、機密情報を扱うことが多いシナリオです。こうした場合、AI が生成したメッセージに Sensitivity ラベルが表示され、組織外へ共有できるかどうかを示します。

手順 1: PredictedSayCommand を使用して Sensitivity ラベルを有効化

src/app/app.ts を開き、PredictedSayCommand アクションを探します。activity.entities 内に次のコードスニペットを追加してください。

// Sensitivity label
usageInfo: {
    "@type": "CreativeWork",
    name: "Confidential",
    description: "Sensitive information, do not share outside of your organization.",
}

更新後の activity.entities は次のようになります。

activity.entities = [
    {
        type: "https://schema.org/Message",
        "@type": "Message",
        "@context": "https://schema.org",
        "@id": "",
        // Generated by AI label
        additionalType: ["AIGeneratedContent"],
        // Sensitivity label
        usageInfo: {
          "@type": "CreativeWork",
          name: "Confidential",
          description: "Sensitive information, do not share outside of your organization.",
        }
    },

  ];

手順 2: Sensitivity ラベルをテスト

Sensitivity ラベル付きで Career Genie をテストします。Visual Studio Code の Run and Debug タブから Debug in Teams (Edge) または Debug in Teams (Chrome) を選択してデバッグを開始します。ブラウザーで Microsoft Teams が開き、アプリの詳細が表示されたら Add を選択してチャットを開始します。

ヒント: この演習をローカルでテストする

これまで実装した Teams AI ライブラリの一部機能は Teams App Test Tool では正常に動作しない場合があります。必ず Teams 上でローカルテストとデバッグを行ってください。

Sensitivity ラベルをテストするには Career Genie に挨拶するか、または「Can you suggest a candidate who is suitable for spanish speaking role that requires at least 2 years of .NET experience?」のような質問をしてみてください。

Sensitivity ラベルが有効化されたチャット UI。回答の上部 'AI generated' ラベルの横にシールドアイコン付き Sensitivity ラベルが表示され、ホバーでガイダンスカードが表示される。

Career Genie のメッセージに「AI generated」ラベルのすぐ隣に Sensitivity ラベルが表示されていることに注目してください。Sensitivity ラベルにカーソルを合わせると、組織固有のガイダンスが表示されます。

おめでとうございます！

Lab BTA3 - Powered by AI キットでユーザーエクスペリエンスを向上させるラボが完了しました！さらに探索したい場合は、このラボのソースコードを Copilot Developer Camp リポジトリで確認できます。

次は Lab BTA4 - 認証を使用してソリューションを保護に進みましょう。Next を選択してください。

ラボ BTA3 - ユーザー エクスペリエンスの向上

はじめに

エクササイズ 1: フィードバック ループを有効化

手順 1: アプリにフィードバック ループを統合

手順 2: フィードバック ループ機能をテスト

エクササイズ 2: Adaptive Card で引用をカスタマイズ

手順 1: 引用用の Adaptive Card を作成

手順 2: PredictedSayCommand を使用して引用エクスペリエンスをカスタマイズ

手順 3: カスタマイズした引用エクスペリエンスをテスト

エクササイズ 3: Generated by AI ラベルを有効化

手順 1: PredictedSayCommand を使用して Generated by AI ラベルを有効化

手順 2: Generated by AI ラベルをテスト

エクササイズ 4: Sensitivity ラベルを有効化

手順 1: PredictedSayCommand を使用して Sensitivity ラベルを有効化

手順 2: Sensitivity ラベルをテスト

ラボ BTA3 - ユーザーエクスペリエンスの向上

エクササイズ 1: フィードバックループを有効化

手順 1: アプリにフィードバックループを統合

手順 2: フィードバックループ機能をテスト