1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | generate-mcp-app-ui-microsoft-power-platform-skills |
| 作者/维护者 | Microsoft Corporation（官方仓库 microsoft/power-platform-skills） |
| 来源链接 | https://github.com/microsoft/power-platform-skills/tree/main/plugins/mcp-apps/skills/generate-mcp-app-ui |
| 许可证 | MIT（数据来自 GitHub API 与仓库根 LICENSE 文件） |
| GitHub Stars | 所属合集仓库整体 660（数据来自 GitHub API，2026-08-11）；该数字属整个 power-platform-skills 仓库，不代表本技能自身热度 |
| Forks | 合集仓库整体 132（数据来自 GitHub API） |
| 最新版本 | SKILL.md 声明 1.0.0 |
| 安装方式 | Claude Code 插件市场一条命令，或本地克隆后 --plugin-dir 加载 |
2. 功能介绍与亮点
generate-mcp-app-ui 把“给 MCP 工具的 JSON 输出做一个可交互界面”这件事收敛成一句话请求：描述想要的可视化效果，粘贴工具的真实 JSON 输出，技能就生成一个自包含的 HTML 文件——地图、图表、卡片、表格或时间线，由数据形状自动决定。产出的 widget 遵循官方 MCP Apps 协议（@modelcontextprotocol/ext-apps，Model Context Protocol 于 2025 年 11 月发布的首个官方扩展），可在任何支持该协议的宿主中渲染，官方文档点名的宿主包括 Claude、Claude Desktop、VS Code GitHub Copilot、Microsoft 365 Copilot 等。
亮点：① 零构建零依赖——widget 所有依赖（MCP Apps App 类、Fluent UI 主题与组件）均从 CDN 按需加载，不需要本地安装任何 npm 包或跑构建步骤；② 官方 Microsoft Learn 文档收录——作为 Power Apps 官方“生成式页面”系列文档的一部分正式发布，附完整前置条件、限制说明与故障排查；③ 自动明暗主题适配——通过 Fluent UI 设计 token 响应宿主的主题切换，不需手写颜色值；④ 可选交互能力——提供工具名称时会自动接好 callServerTool，让 widget 具备“刷新”等回调宿主工具的能力；⑤ 附带 53 组评测用例（覆盖地图、图表、看板、表格等不同 widget 类型与异常数据的健壮性测试），工程质量有据可查。
⚠️ 官方文档明确标注该功能仍处预览阶段（Power Apps 侧集成为 Public Preview，接口形态可能变化），使用前建议先在非生产场景验证。
3. 适用场景
所属分类：前端与设计
- 已经有一个能返回 JSON 的 MCP 工具、想让它在对话中以可视化卡片/图表/地图呈现（而非纯文字列表）的 MCP 工具开发者
- 使用 Claude Code、VS Code Copilot 等宿主开发 MCP 服务器、需要快速产出配套可视化界面原型的开发者
- 不想引入前端构建链（React/打包工具）、只想要一个能直接预览的自包含 HTML widget 的场景
- 已部署 MCP 工具、想为 Microsoft 365 Copilot Chat 或其他 MCP Apps 兼容宿主补充富交互展示层的团队
4. 跨 Agent 兼容性
- Claude Code：原生支持——官方文档给出
/plugin marketplace add microsoft/power-platform-skills与/plugin install mcp-apps@power-platform-skills的一条命令安装路径，并将 Claude 列为受支持的 MCP Apps 渲染宿主之一 - Codex：未验证——官方材料提及 “GitHub Copilot CLI” 而非 Codex，未找到针对 Codex 的专门适配说明
- OpenClaw：未验证——README 与 Microsoft Learn 文档均未提及
- Hermes Agent：未验证——同上，未见相关说明
5. 推荐理由
它解决的是一个具体又常见的落差：MCP 工具能返回结构化数据，但默认只能在对话里被念成一段文字。generate-mcp-app-ui 把“写一个符合 MCP Apps 协议的可视化 widget”这件本来需要读协议文档、挑 UI 库、处理明暗主题的工作，收成一句自然语言描述 + 一段真实 JSON 输出即可完成，产出零依赖、开箱可预览的单文件 HTML。对已经在做 MCP 工具、又不想为一个小 widget 单独起一套前端工程的开发者，这是目前少见的、专门针对“MCP Apps 展示层”的官方一键生成工具。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | Microsoft 为公认一线厂商官方出品；该功能被 Microsoft Learn 官方文档正式收录为 Power Apps 产品文档的一部分（而非仅是仓库自述），但尚未找到独立于 Microsoft 之外的第三方讨论或采用数据 |
| 可用性 | 8 | 一条命令安装、官方文档含完整前置条件/示例/故障排查，仓库近期仍有提交、维护活跃，使用本身零付费依赖（只需一个可联网环境）；因官方标注该功能仍是 Public Preview、接口可能变化，未给满分 |
| 安全性 | 8 | 代码执行范围明确（读写本地 HTML 文件），widget 运行时从 unpkg.com/jsdelivr.net 两个知名公共 CDN 加载 Fluent UI 与 MCP Apps 库，用途透明且在官方文档中逐条列出；MIT 开源可审计；Microsoft 官方仓库、无造假迹象 |
安全检查清单：
| 检查项 | 结果 |
|---|---|
| ①shell 命令及权限范围 | allowed-tools 含 Bash，但技能内容仅用于生成与写入 HTML 文件，无破坏性操作迹象 |
| ②运行时外发数据 | widget 运行时从 CDN 拉取公开的前端库文件（非用户数据外发），该行为在官方文档“限制”章节明确披露 |
| ③API Key/凭据存储 | 本技能不涉及 API Key；鉴权（OAuth/Entra SSO）由 MCP 宿主环境处理，不在 widget HTML 内 |
| ④可疑指令 | SKILL.md 与模板代码未发现 prompt injection 或混淆代码迹象 |
| ⑤作者信誉 | Microsoft Corporation 官方仓库，公开可查、无造假迹象 |
| ⑥License | MIT，明确 |
| ⑦最近维护 | 最近一次提交为 2026-08-11，维护活跃 |
综合评分：7.67（三项均值）
7. 跟同类 Skills 相比的优势
| 维度 | generate-mcp-app-ui（本技能） | ui-widget-developer（microsoft/skills） | canvas-app（同仓库 canvas-apps 插件） |
|---|---|---|---|
| 解决的阶段 | 已有可用的 MCP 工具，生成客户端展示 widget | 从零搭建能返回 Widget 的 MCP Server 本身（服务端协议实现） | 用自然语言生成/编辑完整的 Power Apps 低代码应用 |
| 是否需要写服务端代码 | 不需要，纯前端单文件产出 | 需要，涉及 Streamable HTTP、CORS、资源注册等协议细节 | 不直接写代码，但需要 Power Apps 环境与 Canvas Authoring MCP |
| 技术栈 | 原生 HTML + CDN 加载的 Fluent UI，零构建 | React + Fluent UI 组件规范，需构建与联调环境（devtunnel） | Power Apps .pa.yaml + Canvas Authoring 协作会话 |
| 是否依赖付费平台 | 否 | 否（M365 Copilot 场景下需相应租户） | 是，需要 Power Apps 环境/许可证 |
| 文档深度 | SKILL.md + 2 篇参考文档 + 53 组评测用例 | 6 篇专项参考文档，合计约 6.4 万字符 | 版本 2.0.0，含多屏并行生成的完整工作流文档 |
三者定位互补而非竞争：generate-mcp-app-ui 专注“给已有工具的输出套上展示外衣”，是最轻量、门槛最低的一环；ui-widget-developer 面向“从零实现一个能渲染 Widget 的 MCP Server”，工作量与技术深度都更重；canvas-app 则是完全不同尺度的问题——生成一整个低代码业务应用，而非对话内的一张展示卡片。
8. 用户评价
该技能目前在第三方平台尚无具名用户评价。已作为 Power Apps 官方产品文档的一部分发布在 Microsoft Learn（独立于仓库 README 的正式产品文档页面），但尚未找到独立于 Microsoft 之外的第三方评价来源。
9. 安装使用方式
- 插件市场（推荐）：
/plugin marketplace add microsoft/power-platform-skills，随后/plugin install mcp-apps@power-platform-skills仅安装本技能所在插件 - 本地克隆：
git clone仓库后执行claude --plugin-dir /path/to/power-platform-skills/plugins/mcp-apps - 安装后无需重启，直接输入
/generate-mcp-app-ui <想要的可视化描述>并粘贴工具的真实 JSON 测试输出即可触发；也可用自然语言触发，如 “create a widget”、“build a widget for my tool” - 生成的 HTML 文件默认写入当前工作目录（如
mcp-app-widget.html），可直接用浏览器打开预览
10. 注意事项
- 官方标注该功能目前是 Preview / Public Preview 阶段，接口与生成行为后续可能调整
- 必须提供工具的真实 JSON 测试输出而非示例/模拟数据，否则生成的 widget 接入真实工具后可能表现异常（官方文档明确提示）
- widget 运行时依赖 unpkg.com 与 jsdelivr.net 两个 CDN，需联网环境；两者均为业界广泛使用的公共前端 CDN
- 本技能不负责 MCP 服务器本身的搭建、注册或向 Microsoft 365 管理中心的部署，这些步骤需按官方文档另行完成
- 本技能是合集仓库内的独立子技能，同仓库内另有 power-automate、power-pages、canvas-apps、code-apps 等面向不同 Power Platform 场景、各自独立的插件，按需单独安装