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服务器暴露的开发隧道 - 配置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服务器暴露的开发隧道 - 配置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 目录