C✳CODEZ.WIN
🌐 繁體中文

Skill 多語言閱讀指南

ui-widget-developer用途、用法與原始來源

使用 OpenAI Apps SDK 或 MCP Apps SDK 小工具渲染支援（任何語言）為 Copilot Chat 建置 MCP 伺服器。此技能適用於以下情況：- 建立與 M 整合的 MCP 伺服器365Copilot聲明式代理 - 建立可在Copilot Chat中渲染的豐富互動元件（React + Fluent UI） - 實作傳回用於元件渲染的結構化內容的工具 - 適配現有MCP伺服器以支援Copilot元件渲染 - 設定用於本地主機MCP伺服器暴露的開發隧道 - 配置現有MCP伺服器以支援Copilot元件渲染 - 設定用於本地主機MCP伺服器暴露的開發隧道 - 配置mcpPlugin.js使用 RemoteMCPServer 運行時，請勿將此技能用於通用代理開發（鷹架、清單、部署）—請改用 declarative-agent-developer。此技能僅適用於 MCP 伺服器 + 小工具開發。觸發器：「Copilot 的 MCP 伺服器」、「OpenAI 應用程式 SDK」、「Copilot 小工具」、「structuredContent」、「MCP 外掛程式」、「devtunnels MCP」、「OAI 應用」、「小部件渲染」、「UI 小部件」。

原文擷取時間:

來源儲存庫
microsoft/skills
SKILL.md
.github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer/SKILL.md
儲存庫 Star
3,157
儲存庫最近更新
2026-10-31
能力分類
Agent 工作流程
最近採集時間

授權：MIT

原始 SKILL.md

流程片段用來協助閱讀上游說明。本頁沒有執行第三方 Skill，不屬於實測評測。

下面的用途與操作片段來自上游文件，由本站整理並翻譯，和另行標示的 Codez 編輯分析分開呈現。

這個 Skill 能做什麼

使用 OpenAI Apps SDK 或 MCP Apps SDK 小工具渲染支援（任何語言）為 Copilot Chat 建置 MCP 伺服器。此技能適用於以下情況：- 建立與 M 整合的 MCP 伺服器365Copilot聲明式代理 - 建立可在Copilot Chat中渲染的豐富互動元件（React + Fluent UI） - 實作傳回用於元件渲染的結構化內容的工具 - 適配現有MCP伺服器以支援Copilot元件渲染 - 設定用於本地主機MCP伺服器暴露的開發隧道 - 配置現有MCP伺服器以支援Copilot元件渲染 - 設定用於本地主機MCP伺服器暴露的開發隧道 - 配置mcpPlugin.js使用 RemoteMCPServer 運行時，請勿將此技能用於通用代理開發（鷹架、清單、部署）—請改用 declarative-agent-developer。此技能僅適用於 MCP 伺服器 + 小工具開發。觸發器：「Copilot 的 MCP 伺服器」、「OpenAI 應用程式 SDK」、「Copilot 小工具」、「structuredContent」、「MCP 外掛程式」、「devtunnels MCP」、「OAI 應用」、「小部件渲染」、「UI 小部件」。

如何使用：上游操作流程

快速入門

終端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 應用程式服務、Azure 靜態 Web 應用程式或其他託管提供者），並相應地更新代理程式清單 URL。 DevTunnels 會將您的本機 MCP 伺服器暴露給 M365Copilot 使用命名隧道來提供穩定的 URL。參見references/devtunnels.md用於安裝腳本、命令參考和故障排除。

原文片段 · L372 ↗

限制與結果檢查

本次未從該檔案選出獨立的限制片段，不代表適用於所有輸入或環境。請閱讀完整原文，並自行驗證實際結果。

開始使用前

  1. 先核對支援的 Agent 宿主和儲存庫安裝說明。保留完整 Skill 目錄及其引用的腳本、資源和文件，只複製 SKILL.md 可能遺漏相依需求。
  2. 向 Agent 提供實際輸入、預期輸出和驗收標準。呼叫方式與可用工具取決於宿主環境，本站不假定存在通用的安裝指令。
  3. 先在暫存專案或輸入副本上試用。涉及修改檔案、遠端服務或計費資源的操作，應逐項核對後再授權。
  4. 依照原文檢查項目和自己的需求驗證輸出。成功觸發或儲存庫 Star 較高，都不能證明結果正確。

Skill 檔案與目錄格式規範 ↗

繼續閱讀原始文件

翻譯與介紹範圍

本頁從固定版本的上游 SKILL.md 整理用途與操作片段，譯文使用輔助翻譯。它不是完整手冊，也不代表經過相容性實測；使用前請核對原文及其引用檔案。

介紹依據下方列出的固定版本；目前儲存庫動態和目錄擷取時間分開呈現。

固定版本來源
閱讀原文 ↗
原文擷取時間
來源提交版本
00d66a64919edca5bca2c673373444e36a4b5461
原文 SHA-256
b24d0babae9e85054d30765abca0043a2c310ba7dc980d1da258c39b87f8cd12
返回完整 Skill 目錄