Copilot MCP 小组件开发助手
为 Microsoft 365 Copilot 构建可交互的 MCP 服务器与 React 小组件。
文档强调来源数据由调用方提供、CORS 白名单、路径遍历防护、React 转义和非破坏性工具注解，且明确披露 DevTunnel 与 CSP 数据流；但示例使用 RemoteMCPServer 的 auth None、匿名 DevTunnel 和自动安装/启动/部署流程，未充分规定认证、敏感数据处理、用户确认、权限隔离或可靠回滚，因此扣分。
文档覆盖 MCP 会话、资源注册、结构化输出、部分数据归一化和异常工具名处理，快乐路径较完整；但核心服务器示例将资产路由作为后续片段而非完整实现，JSON 解析、依赖安装、认证失败、网络异常和进程清理的诊断反馈较薄弱，且部分流程依赖环境状态。静态审查上限下扣分。
触发词、目标受众、适用场景、OAI Apps 与 MCP Apps 分流以及不适用于一般 Agent 开发的边界较清楚；但对不同语言、不同 Copilot/ChatGPT 客户端、离线环境和中国大陆网络可达性的验证不足，核心 DevTunnel、npm、远程 Copilot 服务依赖外部环境，扣分。
文档结构分层良好，包含路径选择、架构、协议、示例、故障排查、依赖、版本递增、许可证和官方仓库出处；但维护责任、变更日志、兼容性矩阵、依赖版本策略和安全升级路径不充分，且部分要求分散在多个参考文件中，扣分。
技能对构建 MCP 服务、React/Fluent UI 小组件、资源与工具绑定及本地隧道流程提供了可直接复用的模板，核心任务价值明确；但没有提交的实际项目输出或执行证据，部分 TypeScript 示例仍需整合和修正，最终结果可能需要较多环境适配，因此按静态上限保守扣分。
文件提供了具体协议 JSON、命令、检查清单、参考实现和仓库 CI/测试徽章等可审计线索；但没有针对该技能关键路径的已执行结果、提交测试套件或独立复现记录，CI 证据也未证明覆盖本技能，因此不超过静态审查上限并扣分。
- 在真实项目中不要默认使用 auth None 或匿名 DevTunnel；应明确认证、最小权限、敏感数据边界、用户确认和撤销/回滚方案。
- 主服务器示例与后续资产路由片段需要合并验证；文档未提供该技能关键路径的实际执行证据。
- OAI Apps 声称支持 ChatGPT，但协议示例的 CORS 白名单主要覆盖 m365.cloud.microsoft；需要按目标客户端补充并验证允许来源。
- 核心流程依赖 npm、DevTunnel、远程 Copilot 服务和外部插件安装；大陆网络、代理和离线环境适配未被证实。
它能做什么 & 适用场景
该技能专门指导 Microsoft 365 Copilot Chat 的 MCP 服务器和小组件开发，支持 OpenAI Apps SDK 与 MCP Apps Extension。它覆盖 Streamable HTTP、结构化内容、MCP 资源、CSP、Fluent UI 小组件、devtunnel 以及 mcpPlugin.json 配置。小组件必须使用 React 和 Fluent UI，并通过 MCP 资源注册与工具输出绑定。它不负责通用代理开发、代理脚手架、清单生命周期或部署设计。
指导创建或改造任意语言实现的 MCP 服务器；实现 /mcp、/health、/widgets 和 /assets 等相关端点；返回 content、structuredContent 和小组件元数据；注册 ui://widget/<name>.html 资源；使用 React、Fluent UI、FluentProvider 和 window.openai.toolOutput 构建界面；配置 RemoteMCPServer；使用 MCP Inspector 获取完整工具定义并进行端到端验证；配置 devtunnel 暴露本地服务器。
- 为已有 Microsoft 365 Copilot 声明式代理新增 MCP 服务器和交互式小组件。
- 将已有 MCP 服务器改造成支持 Copilot Chat 小组件渲染的服务器。
- 使用 React 和 Fluent UI 创建展示结构化数据的 Copilot 小组件。
- 需要通过 devtunnel 将本地 MCP 服务器暴露给 Microsoft 365 Copilot 进行测试。
- 需要让 MCP 工具定义与 mcpPlugin.json 通过 MCP Inspector 保持同步。
优缺点一览
- 覆盖 MCP 服务器、资源注册、工具元数据、React 小组件和 Copilot 集成的完整开发链路。
- 明确要求 Fluent UI、structuredContent、MCP Inspector 和端到端验证。
- 支持 TypeScript、Python、C# 等能实现 MCP 协议的语言。
- 包含本地 devtunnel 测试和代理重新配置条件。
- 只适用于 MCP 服务器与 Copilot 小组件开发，不适用于通用代理脚手架或部署。
- 默认强制 React、React DOM 和 Fluent UI，不适合纯 HTML 小组件。
- 依赖 shell、Node.js 生态、devtunnel、MCP Inspector 和网络环境。
- 仓库 README 标明项目仍在积极开发中；源材料没有提供该单独技能的测试覆盖数据。
如何安装
在 Copilot CLI 中运行：
npx skills add microsoft/skills- 在安装向导中选择
ui-widget-developer技能。
该仓库也支持通过插件市场安装整个技能集合：/plugin marketplace add microsoft/skills，然后安装相应插件。源材料未说明单独安装此技能的专用命令。
如何使用
使用明确触发语句，例如：Build an MCP server for Copilot with a React widget、Add a Copilot widget to my MCP server 或 Configure structuredContent for widget rendering。开始实现前需要在 OAI Apps 和 MCP Apps Extension 之间选择：OAI Apps 面向 ChatGPT 与 Microsoft 365 Copilot；MCP Apps Extension 是面向多客户端的 MCP 标准。若选择 MCP Apps，源材料给出的安装命令是 /plugin marketplace add modelcontextprotocol/ext-apps 和 /plugin install mcp-apps@mcp-apps。
对比同类
技能明确比较 OAI Apps 与 MCP Apps Extension：OAI Apps 是 OpenAI 专有方案，成熟度较高，适用于 ChatGPT 和 Microsoft 365 Copilot；MCP Apps Extension 是新的官方 MCP 标准，目标是支持 Microsoft 365 Copilot、ChatGPT、VS Code 等更多客户端。