ラボ E5 - Adaptive Card の追加
このラボでは、Microsoft 365 Copilot のテキスト応答をリッチ カードに拡張するために Adaptive Card を使用します。
このラボで学習する内容:
- Adaptive Card とは
- Adaptive Card を作成してテストする方法
- リッチ コンテンツとして Adaptive Card を使用するように Microsoft 365 Copilot の応答を更新する方法
Microsoft 365 が AI モデルとオーケストレーションを提供する宣言型エージェントを構築したい場合は、これらのラボを実施してください。
- 🏁 はじめに
- 🔧 セットアップ
- 🧰 宣言型エージェントの基礎
- 🛠️ API をゼロから構築して統合する
- 🔐 認証
- 🔌 統合
はじめに
Adaptive Card とは？
Adaptive Card は、JSON で記述されたプラットフォーム非依存の UI スニペットです。アプリやサービス間でやり取りでき、アプリに配信されると環境に合わせて自動的にネイティブ UI に変換されます。これにより、主要なプラットフォームやフレームワーク全体で軽量な UI を設計・統合できます。演習 1: シンプルな Adaptive Card を作成してテストする
では早速、Adaptive Card の作成の楽しさを体験してみましょう。
ステップ 1: Adaptive Card を JSON で定義する
以下は JSON で記述された Adaptive Card です。まずはコピーしてください。
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Hello, Adaptive Cards!",
"size": "large",
"weight": "bolder"
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Click me",
"url":"https://www.contoso.com"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3"
}
この JSON は、テキスト ブロックとボタンを持つシンプルな Adaptive Card を定義しています。
ステップ 2: Adaptive Card をテストする
Adaptive Card をテストするには、Adaptive Cards Designer を使用できます。
- Adaptive Cards Designer を開きます。
- デザイナー下部の「Card Payload Editor」セクションに JSON を貼り付けます。
- デザイナー上部に Adaptive Card のライブ プレビューが表示されます。
これで Adaptive Card の開発スキルを習得できました！
演習 2: エージェントの応答をリッチ化する
ステップ 1: Adaptive Card ファイルを追加する
getConsultants、getUserInformation、postBillhours の各関数に視覚的に魅力的なカードを追加します。
appPackage/adaptiveCards フォルダーに getConsultants.json、postBillhours.json、getUserInformation.json の 3 つのファイルを作成します。
以下の生ファイルの内容をコピーし、適切なファイルに貼り付けてください。
これらの JSON ファイルを開くと、カードの構造と、API 応答と接続するデータ バインディングの方法が確認できます。カード内のテンプレート式は API からの実際のデータで自動的に埋め込まれ、プレーン テキストではなく洗練されたビジュアル形式で情報を提示できます。
ステップ 2: プラグイン マニフェストを更新して Adaptive Card を含める
- appPackage/trey-plugin.json を開きます。
getConsultants関数を探します。response_semantics内でpropertiesフィールドの後に次を追加します（スニペットのカンマも含めてください）。
,
"static_template": {
"file": "adaptiveCards/getConsultants.json"
}
変更後の getConsultants 関数は次のようになります。
{
"name": "getConsultants",
"description": "Returns detailed information about consultants identified from filters like name of the consultant, name of project, certifications, skills, roles and hours available. Multiple filters can be used in combination to refine the list of consultants returned",
"capabilities": {
"response_semantics": {
"data_path": "$.results",
"properties": {
"title": "$.name",
"subtitle": "$.id",
"url": "$.consultantPhotoUrl"
},
"static_template": {
"file": "adaptiveCards/getConsultants.json"
}
}
}
}
同様に getUserInformation 関数を以下で更新します。
,
"static_template": {
"file": "adaptiveCards/getUserInformation.json"
}
最後に postBillhours 関数を以下で更新します。
,
"static_template": {
"file": "adaptiveCards/postBillhours.json"
}
演習 3: Copilot でプラグインをテストする
アプリケーションをテストする前に、appPackage\manifest.json ファイルでアプリ パッケージのマニフェスト バージョンを更新します。手順は次のとおりです。
-
プロジェクトの
appPackageフォルダーにあるmanifest.jsonファイルを開きます。 -
JSON 内の
versionフィールドを探します。例:
json "version": "1.0.1" -
バージョン番号を小さくインクリメントします。例:
json "version": "1.0.2" -
保存します。
ステップ 1: プラグインをインストールする
プロジェクトを停止して再起動し、アプリケーション パッケージを再デプロイさせます。
Copilot でエージェントとの直接チャット ウィンドウが表示されます。
ステップ 2: Adaptive Card を表示する
次のようなプロンプトを試してください。
Find consultants with TypeScript skills
テキスト応答だけでなく、プロジェクト情報を含むリッチ カードも返されます。
次に、POST 操作のプロンプトを試します。
please charge 1 hour to woodgrove bank in trey research
この要求では Copilot が API プラグインに POST でデータを送信する必要があるため、Confirm ボタンを選択して許可を確認します。
確認後、テキスト応答だけでなくプロジェクト情報を含むリッチ カードが表示されます。
ほかのプロンプトも試して、Microsoft 365 Copilot の向上した応答を確認してみてください。
おめでとうございます！
Adaptive Card 応答を最初の API プラグインに追加できました。次のラボでは、API に認証を追加します。