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

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

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

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 Copilot Chat: Copilot Chatの MCP アプリを参照して、テスト用のサイドローディング、組織で使用するMicrosoft 365 管理センター経由での展開、Microsoft 365 エージェント ストアへの発行などの展開パスを確認します。
• 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 リポジトリ