AI コード生成ツールを使用して MCP アプリ ウィジェットを生成する

[このトピックは、プレリリース ドキュメントであり、変更される場合があります。]

この記事では、GitHub Copilot CLI や Claude Code などの AI コード生成ツールを使用して、モデル駆動型 Power Apps MCP ツール用の対話型モデル コンテキスト プロトコル (MCP) アプリを生成する方法について説明します。 MCP アプリは、ツールの JSON 出力を、Microsoft 365 Copilot、Claude、Visual Studio Code など、MCP アプリと互換性のあるホスト内のカード、グラフ、ダッシュボード、またはマップとして視覚的にレンダリングする自己完結型 HTML ファイルです。

JSON データを返す MCP ツールがある場合、 generate-mcp-app-ui スキルは、チャット会話内で直接、そのデータをコンパクトなビジュアル形式で表示する洗練されたテーマ対応ウィジェットを生成できます。

generate-mcp-app-ui スキルでできること

• 必要なものを記述し、ツールの JSON 出力を貼り付けることで、任意の MCP ツールのビジュアル ウィジェットを作成します。
• 数値傾向のグラフ、構造化レコードのカード、比較用のテーブル、座標のマップなど、データに適したビジュアルを選択します。
• Fluent UI デザイン トークンを使用して、明るいテーマと濃色のテーマを自動的にサポートします。
• ウィジェットが実行時にもう一度ツールを呼び出すことができるように、対話機能を追加します (たとえば、更新ボタン)。
• 自然言語での変更を記述して、UX を繰り返し調整します。 たとえば、「ギャラリーをコンパクトにする」、「グラフを追加する」、「カード レイアウトを使用する」などです。

前提条件

ソフトウェア要件

追加条件

• JSON 出力を返す MCP ツール。 ツールの出力の種類を JSON に設定する必要があります。
• 動作中のインターネット接続。 ウィジェットは、実行時に Content Delivery Network (CDN) から Fluent UI やその他のライブラリを読み込みます。

プラグインをインストールする

GitHub Copilot CLI または Claude Code から次のインストーラー コマンドを実行します。 インストーラーは、使用可能なツールを自動的に検出し、 generate-mcp-app-uiを含むすべての Power Platform プラグインをインストールします。

/plugin marketplace add microsoft/power-platform-skills

MCP アプリ ウィジェット スキルのみをインストールするには:

/plugin install mcp-apps@power-platform-skills

スキルの概要

スキルは、"ウィジェットの作成"、"ツールのウィジェットの作成"、"MCP アプリの作成" などの自然言語フレーズによってもトリガーされます。

ウィジェットを生成する

MCP ツール用の新しいウィジェットを作成するには、次の手順に従います。

1. モデル駆動型アプリ デザイナーからカスタム ツールを作成してテストし、完全な JSON 出力をコピーします。 ツールの出力の種類が JSON に設定されていることを確認します。 詳細: カスタム ツールの作成

2. スキルを呼び出 し、表示する内容を記述し、JSON 出力を会話に貼り付けます。

   /generate-mcp-app-ui Visualizes flights using an animated arc map for routes and a synchronized Gantt timeline for departure and arrival schedules, enabling quick understanding of flight coverage, timing, and overlaps. Here's an example of the tool's output: {"flight_records":[{"Departure Time":"2024-07-02T05:00:00Z","Arrival Time":"2024-07-02T07:30:00Z","Flight Name":"Zava 1001","Status":"Active","Airport":"Seattle-Tacoma","Airport1":"Los Angeles Intl"},{"Departure Time":"2024-07-02T03:00:00Z","Arrival Time":"2024-07-02T10:00:00Z","Flight Name":"Zava 103","Status":"Active","Airport":"Seattle-Tacoma","Airport1":"Hartsfield-Jackson"}]}
   

3. 生成された HTML ファイルを確認します。 スキルは、 flight-map.htmlなどの自己完結型 HTML ファイルを作業ディレクトリに書き込みます。

4. ブラウザーでプレビューします。 ウィジェットにテスト用のフォールバック オプションが含まれているので、HTML ファイルをローカルで開きます。 存在しない場合は、チャット エージェントにスタンドアロン HTML プレビューの追加を依頼できます。

5. 繰り返します。 チャット内の変更を直接説明します。

   • "マップを大きくする"
   • "グラフにツール ヒントを追加する"
   • "応答性の高いレイアウトとスクロール バーなしで、高さを下げ、250 ピクセルで収まる"

ウィジェットをデプロイする

ウィジェットの準備ができたら、対応するツールの UX 入力に HTML ファイルをコピーすると、ツールの UI 応答として返されます。 詳細については、 カスタム ツールの作成に 関するドキュメントを参照してください。

callServerTool で対話機能を追加する

スキルの呼び出し時にツールの名前も指定した場合、生成されたウィジェットに対話型のツール呼び出し統合を含めることができます。 これにより、ウィジェットは実行時にツールを再度呼び出すことができます。 たとえば、ツールのユーザーインターフェースにあるリフレッシュボタンが自身を呼び出すことができます。

/generate-mcp-app-ui Show the current weather conditions with a refresh button. Tool name: get_weather. Tool output: {"city":"Seattle","temp_f":54,"condition":"Overcast","humidity":78,"forecast":[...]}

ウィジェットの中でapp.callServerToolを設定し、ユーザーが更新を選択すると、ウィジェットがツールから直接更新されたデータを取得できるようにします。 ツール名を指定しない場合、ウィジェットは読み取り専用であり、 ontoolresult コールバックを介して配信されたデータのみをレンダリングします。

• Microsoft 365 Copilot チャット: テスト用のサイドローディング、組織で使用する Microsoft 365 管理センター経由での展開、Microsoft 365 エージェント ストアへの公開など、展開パスについては 、Copilot Chat の MCP アプリ を参照してください。
• Power Apps 宣言型エージェント: モデル駆動型アプリと MCP ツールを接続する方法については、 Power Apps MCP 宣言型エージェントのドキュメント を参照してください。
• その他の MCP ホスト: MCP アプリ ウィジェットの登録プロセスについては、ホストのドキュメントを参照してください。

ウィジェットの技術的な詳細

MCP アプリ プロトコル

ウィジェットは、App パッケージの @modelcontextprotocol/ext-apps クラスを使用してチャット ホストと通信します。 プロトコルは、これらのコールバックとメソッドを管理します。

CDN インポート

ウィジェットは CDN からすべての依存関係を読み込みます。 ビルド手順やローカル インストールは必要ありません。 依存関係には、次の 2 つの形式があります。

• ECMAScript モジュール (ESM) は、<script type="module"> 内で /+esm で終わる URL を使用してインポートされます

• 汎用モジュール定義 (UMD) - プレーンな <script src> タグを介して読み込まれ、副作用としてグローバルに登録されます

  ライブラリ	Format	URL	Purpose
  @modelcontextprotocol/ext-apps	ESM	cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps/+esm	MCP アプリ App クラス
  @fluentui/tokens	ESM	cdn.jsdelivr.net/npm/@fluentui/tokens/+esm	webLightTheme / webDarkTheme トークン セット
  @fluentui/web-components@beta	UMD	unpkg.com/@fluentui/web-components@beta/dist/web-components.min.js	Fluent UI カスタム要素

視覚状態

すべてのウィジェットは、次の 3 つの状態を処理します。

Fluent UI コンポーネント

ウィジェットでは、次の Fluent UI Web コンポーネントを使用できます。

<fluent-card>、 <fluent-button>、 <fluent-text-input>、 <fluent-textarea>、 <fluent-dropdown>、 <fluent-listbox>、 <fluent-option>、 <fluent-checkbox>、 <fluent-spinner>、 <fluent-divider>、 <fluent-badge>、 <fluent-switch>、 <fluent-tooltip>

テーマのサポート

ウィジェットは、Fluent UI デザイン トークンを使用して明るいテーマと濃色のテーマをサポートします。 ホストのテーマが onhostcontextchangedを介して変更されたときに、ウィジェットによって正しいトークン値が適用されます。 両方のテーマで正しいレンダリングを行うには、ハードコーディングされた色の値ではなく、常にトークン変数 ( var(--colorNeutralForeground1)など) を使用します。

カラー トークン

ハードコーディングされた 16 進数または RGB 値は使用しないでください。 ここに記載されていないトークン名を作成しないでください。

ベスト プラクティス

• 実際のテスト データを提供します。 スキルは、実際の JSON 構造を分析して、適切なビジュアルを選択します。 モック データは、実際のツールに接続すると中断するウィジェットを生成します。
• ビジュアルについて具体的に指定します。 マップ、グラフ、テーブル、カード レイアウトなど、目的の形式について説明します。 あいまいな説明は、一般的な結果につながります。
• 一つのビューから開始する。 ウィジェットはコンパクトな会話カードであり、完全なアプリケーションではありません。 チャット入力を複製するタブ、ページ ナビゲーション、または検索バーはありません。
• 両方のテーマでテストします。 明るいモードと暗いモードでプレビューし、コントラストと読みやすさを確認します。
• ビジュアルをデータと一致させます。 座標のマップ、数値または傾向データのグラフ、構造化レコードのカード、比較用のテーブル。

制限事項

• ウィジェットは、CDN からすべての外部ライブラリを読み込む必要があります。 実行時にはインターネット接続が必要です。
• 全画面表示モード では、スキルが生成するもの以外の追加の実装が必要です。
• このスキルでは、MCP サーバーの登録や Microsoft 365 管理センターへの展開は処理されません。 これらの手順は個別に完了する必要があります。
• 認証 (OAuth 2.1、Microsoft Entra SSO) は、ウィジェット HTML 自体ではなく、MCP ホスト環境によって処理されます。

関連ドキュメント

Microsoft 365 開発者向けドキュメント

• MCP アプリが Copilot チャットで利用できるようになりました
• Microsoft 365 Agents Toolkit

Power Platform のドキュメント

• AI コード生成ツールを使用して生成ページを作成および編集する
• Power Platform CLI リファレンス

外部参照

• モデル コンテキスト プロトコル (MCP) の仕様
• Fluent UI Web コンポーネント
• Power Platform Skills リポジトリ