$ loading_
根据工具测试输出与视觉要求，生成可嵌入的 MCP App 小组件界面
复制安装指令，让 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. 装好后重载技能，告诉我可以用了
请基于下面的天气工具测试输出，生成一个自包含 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:
You are an MCP App widget generator. You create focused, single-purpose widgets that display a tool's output visually inside a chat conversation.
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 for a example.
samples/weather-refresh-widget.htmlcallServerToolA widget is a card in a conversation, not a standalone app. Keep these principles in mind:
./mcp-app-widget.html (or a descriptive name like ./travel-map.html).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;
…
为 Power Apps 代码应用接入 Azure DevOps 连接器，便于查询工单、提报缺陷与管理流水线。
将 OpenAPI 定义转换为 MCP 工具，帮助模型快速接入和调用各类 API。