$ ~/registry/skill/microsoft-plugins-mcp-apps-skills-generate-mcp-app-ui

SKILL

generate-mcp-app-ui

根据工具测试输出与视觉要求，生成可嵌入的 MCP App 小组件界面

星标

★ 440

来源

GitHub

更新于

2026-07-11

// 安全评估需留意

仅提示词，不执行代码
开源可审计

总评

该技能材料显示其本质是用于生成 MCP 小组件界面的提示型能力，不要求密钥、未声明远程端点，也未描述本地执行或数据访问行为。结合其开源且来自 Microsoft GitHub 仓库，整体为低风险；仅供应链层面因许可证未声明、社区采用低和维护状态未知而需轻微留意。

凭证密钥低风险

材料明确标注“无”密钥/环境变量要求，README 也未见 API token、OAuth 或其他凭证配置说明；基于现有材料，未发现凭证收集、存储或滥用风险。

网络外发低风险

客观检查项与元数据均显示无远程端点 host；文档内容主要是让用户粘贴工具测试输出并生成自包含 HTML，未见将数据发送到第三方服务的描述。

代码执行低风险

系统已标注为 prompt-only，当前材料未描述本机起进程、执行脚本、调用 shell 或使用系统级能力；从审计材料看，它更像是生成界面代码/文本的技能而非执行型工具。

数据访问低风险

文档仅说明需要用户提供视觉描述和工具测试 JSON，用于生成组件；未声明读取本地文件、数据库、会话外资源或写入持久存储，也未见过度授权迹象。

来源供应链需留意

正面因素是开源且来源于 Microsoft GitHub 仓库，源码原则上可审计；但许可证未声明、社区采用为 0 star、维护状态未知，说明可持续维护与依赖治理信息不足，建议在纳入生产前补充核验。

安全建议

在使用前核验仓库实际内容、最近提交记录与 issue 活跃度，确认该技能仍被维护。
补充确认许可证与依赖清单，避免后续出现合规或供应链管理问题。
若生成的 HTML 组件会被嵌入生产环境，建议增加静态代码审查与前端安全检查。
仅向该技能提供完成任务所需的最小测试 JSON，避免粘贴不必要的敏感数据。

审计模型: gpt-5.4 · 2026-06-16

// 安装

复制安装指令，让 AI 自动完成配置 · 推荐新手

请帮我安装 askskill 上的 "generate-mcp-app-ui" 技能：
1. 下载 https://raw.githubusercontent.com/microsoft/power-platform-skills/main/plugins/mcp-apps/skills/generate-mcp-app-ui/SKILL.md
2. 保存为 ~/.claude/skills/generate-mcp-app-ui/SKILL.md
3. 装好后重载技能，告诉我可以用了

// 下载

下载 SKILL.md机读安装清单 ↗

// 用法示例

为天气工具生成卡片界面

输入

请基于下面的天气工具测试输出，生成一个自包含 HTML 的 MCP App 小组件。风格要求：现代、浅色、卡片式布局，突出当前温度、天气图标、未来三天预报，并适配移动端。测试输出：{"location":"Shanghai","current":{"temp":28,"condition":"Sunny"},"forecast":[{"day":"Mon","high":30,"low":24},{"day":"Tue","high":29,"low":23},{"day":"Wed","high":27,"low":22}]}

预期产出

一个可直接使用的 HTML 小组件，展示当前天气与短期预报，界面美观且响应式

为分析工具生成图表面板

输入

请为这个销售分析 MCP 工具生成一个自包含 HTML 小组件。要求：深色仪表盘风格，包含关键指标、趋势图占位区、筛选栏和表格区域。测试输出：{"revenue":125000,"orders":842,"conversionRate":"3.8%","topChannels":["Ads","SEO","Email"]}

预期产出

一个销售仪表盘样式的小组件 HTML，可清晰展示核心指标与分析区域

为任务工具生成看板视图

输入

请根据以下任务工具输出，生成一个自包含 HTML 的 MCP App 界面。要求：看板布局，分为待办、进行中、已完成三列，支持任务优先级颜色标签，整体简洁专业。测试输出：{"todo":[{"title":"设计首页","priority":"high"}],"doing":[{"title":"编写接口文档","priority":"medium"}],"done":[{"title":"创建项目仓库","priority":"low"}]}

预期产出

一个任务看板式 HTML 小组件，按状态分栏展示任务并突出优先级

// 文档

Triggers: mcp app, mcp widget, generate widget, create widget, build widget, widget for tool, visual for tool

Keywords: mcp apps, widget, html widget, tool visualization, fluent ui, ext-apps

Aliases: /generate-mcp-app-ui, /mcp-app, /widget

References:

MCP Apps API and technical patterns: mcp-apps-reference.md
Visual design defaults and theme tokens: design-guidelines.md

You are an MCP App widget generator. You create focused, single-purpose widgets that display a tool's output visually inside a chat conversation.

What you need from the user

A description of the visual they want ("display as a chart", "show a comparison table", "show these on a map")
The tool's test output - the actual JSON from testing their tool. They can paste it directly.

If the user hasn't provided the tool's test output or a schema, you MUST ask before generating. Do NOT guess the data shape. A guessed schema will produce a widget that breaks when connected to the real tool.

Ask them:

To generate a widget that works with your tool, I need to see the data it returns. Could you test your tool and paste the JSON output here? Your tool's output must be set to JSON.

The tool's test JSON is always required. If the user also provides a tool name, wire up callServerTool so the widget can call the tool interactively (e.g., refresh buttons). If no tool name is given, the widget renders the data read-only. See samples/weather-refresh-widget.html for a callServerTool example.

How to think about widgets

A widget is a card in a conversation, not a standalone app. Keep these principles in mind:

The conversation is the input. The user already typed their request in chat. The tool processed it. The widget shows the result visually. Do NOT add search bars or text inputs that duplicate what the user said in chat.
The LLM text response is the explanation. The model's text below the widget provides the detailed list/explanation. The widget provides the VISUAL (maps, charts, images, interactive elements) that text alone can't deliver. Don't re-list what the LLM text already covers.
Compact by default. Focus on visual value. If the tool returns a list of items, consider whether a map, chart, or card layout is more valuable than re-listing text.
One view. No tabs, page navigation, or back buttons. If the user wants something different, they ask in the chat.
Pick the right visual for the data. Maps for coordinates. Charts for numeric/trend data. Cards for structured records. Tables for comparisons. Timelines for events. Don't default to any one visual type.

How to generate

Read mcp-apps-reference.md for the MCP Apps API, CDN libraries, and technical patterns.
Read design-guidelines.md for visual design defaults.
Look at the tool's test output to understand the data shape.
When reading numeric, boolean, or optional fields, use type-safe checks. See "Data type safety" in mcp-apps-reference.md. Do not assume runtime types match the sample.
Choose the visual that best represents the data.
Generate a single, self-contained HTML file following the template below.
Write the file to ./mcp-app-widget.html (or a descriptive name like ./travel-map.html).
Tell the user where the file is and how to open it in a browser to preview.

HTML template

ALL widget logic goes in a single <script type="module"> block. Use the MCP Apps App class from the CDN.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/@fluentui/web-components@beta/dist/web-components.min.js"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body {
      margin: 0;

…

查看完整文档 ↗

microsoft装→

通过安全接口检查和编辑本地项目，支持文件、Git与命令操作

—装→

$ loading_