ローカライズされた読書ガイド

ui-widget-developer目的、用途、および情報源

OpenAI Apps SDKまたはMCP Apps SDKウィジェットレンダリングサポート（任意の言語）を使用して、Copilot Chat用のMCPサーバーを構築します。このスキルは、次のような場合に使用します。- Mと統合するMCPサーバーを作成する365Copilot宣言型エージェント - Copilotチャットでレンダリングされるリッチなインタラクティブウィジェット（React + Fluent UI）の構築 - ウィジェットレンダリング用の構造化コンテンツを返すツールの実装 - 既存のMCPサーバーをCopilotウィジェットレンダリングに対応させるための調整 - localhost MCPサーバー公開のためのdevtunnelの設定 - 設定mcpPlugin.jsRemoteMCPServer ランタイムを使用したマニフェストで、このスキルを一般的なエージェント開発 (スキャフォールディング、マニフェスト、デプロイメント) には使用しないでください。代わりに declarative-agent-developer を使用してください。このスキルは、MCP サーバーとウィジェットの開発専用です。トリガー: "Copilot 用 MCP サーバー", "OpenAI Apps SDK", "Copilot ウィジェット", "structuredContent", "MCP プラグイン", "devtunnels MCP", "OAI アプリ", "ウィジェットレンダリング", "UI ウィジェット"

ソースを取得しました: 2026-10-29

出典リポジトリ: microsoft/skills
SKILL.md: .github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer/SKILL.md
リポジトリの Star: 3,157
リポジトリの最終更新: 2026-10-31
能力分類: エージェントのワークフロー
最終収集時刻: 2026-10-31 10:38 UTC+08:00

ライセンス: MIT

オリジナルのSKILL.md

ワークフローの抜粋は、Codezによる実行可能な指示ではなく、あくまでも参考資料です。このページを作成するために、サードパーティ製のスキルは実行されていません。

以下の目的とワークフローに関する記述は、上流工程に関する資料であり、読みやすいように整理・翻訳されています。これらは、別途ラベル付けされたCodez編集分析とは区別されます。

このスキルが何をするか

上流ワークフローの仕組み

クイックスタート

ターミナル1- MCPサーバーを起動します：ターミナル2- DevTunnel の起動: 初回実行時には、トンネルが確立されたらエージェントをプロビジョニングします (エージェントプロビジョニングルールを参照)。以降の実行では、トンネル URL は安定しており、エージェントマニフェストが変更されない限り、再プロビジョニングは不要です。

上流への航路 · L384 ↗

開発ワークフロー

MCPサーバーを起動します（ホットリロード付き開発モード）：TypeScript：cd mcp-server && npm install && npm run devPython:cd mcp-server && pip install -r requirements.txt && python server.pyC#:cd mcp-server && dotnet run

上流への航路 · L402 ↗

🚨重要な実行ルール🚨

Fluent UI の適用（必須）：ウィジェットの実装には、React + Fluent UI コンポーネントを使用する必要があります。ウィジェットのコードを記述する前に、エージェントは以下を読み、従う必要があります。references/best-practices.mdFluent UI パッケージ要件 (必須): ウィジェットプロジェクトは、実装前に Fluent UI の依存関係を含める必要があります。最低限、ウィジェットパッケージの依存関係に以下をインストールして保持してください。これらのパッケージのいずれかが不足している場合は、ウィジェットコードの生成を続行する前に自動的にインストールします。生成されたウィジェットに React エントリファイルが含まれていない場合 (例:widgets/src//main.tsxおよび React コンポーネントファイル）と Fluent のインポート@fluentui/react-componentsタスクが完了していないため、結果を返す前に修正する必要があります。

上流への航路 · L95 ↗

上流への航路 · bash ↗

export ATK_CLI_SKILL=true

要件とセットアップ

DevTunnels のセットアップ

ローカルテストのみ。DevTunnels は、マシン上での開発とテスト用です。エージェントをより広く共有する前に、MCP サーバーとウィジェットアセットの両方をホスト環境 (Azure App Service、Azure Static Web Apps、またはその他のホスティングプロバイダーなど) にデプロイし、エージェントマニフェスト URL を適切に更新してください。DevTunnels は、ローカルホストの MCP サーバーを M に公開します。365安定した URL に名前付きトンネルを使用する Copilot。参照references/devtunnels.mdセットアップスクリプト、コマンドリファレンス、トラブルシューティングについてはこちらをご覧ください。

上流への航路 · L372 ↗

制限事項と品質チェック

このファイルからは、個別の制限に関する記述は選択されていません。これは、このスキルがあらゆる入力や環境において安全であることを意味するものではありません。ソースコード全体を確認し、ご自身で結果を検証してください。

まずは安全なトライアルから始めましょう

サポートされているホストとリポジトリのインストール手順を確認してください。スキルディレクトリと、それに関連付けられているスクリプト、アセット、ドキュメントはまとめて保管してください。SKILL.md単独では依存関係を省略できる場合があります。
エージェントに実際の入力、希望する出力、および受け入れ基準を指定してください。呼び出し構文と利用可能なツールはホストによって異なります。このサイトは、汎用的なインストールコマンドを前提としていません。
使い捨てプロジェクトまたはコピーで、元のワークフローを試してみてください。ファイル、リモートサービス、または課金対象リソースを変更する操作は、許可する前に必ず確認してください。
出力結果をソースの品質チェックおよび独自の要件と照らし合わせて検証してください。トリガーが成功したことやリポジトリのスター数が多いことだけでは、正しい結果とは言えません。

スキルフォーマットとディレクトリの仕様 ↗

詳細は出典元をご覧ください。

翻訳と範囲

この読書ガイドは、ピン留めされた上流からの抜粋を選りすぐっていますSKILL.md翻訳は補助的なものです。完全なマニュアルではなく、互換性テスト済みであることを保証するものでもありません。ご使用前に原文および参照ファイルをお読みください。

この紹介文は、下記に固定表示されているバージョンに関するものです。現在のリポジトリのアクティビティと収集時間は別途表示されます。

ピン留めされたソース: 原文を読む ↗
ソースを取得しました: 2026-10-29T09:32:23Z
ソースコミット: 00d66a64919edca5bca2c673373444e36a4b5461
ソースSHA-256: b24d0babae9e85054d30765abca0043a2c310ba7dc980d1da258c39b87f8cd12

スキルカタログ全体に戻る