Generate Mcp App Ui (Grade A)经过安全检测的 Claude AI 开发技能，A级。为 MCP 工具生成 MCP App 小部件（独立 HTML）。描述所需的可视化并粘贴工具的测试输出。适用于相应场景。

— (0)

审阅者 Daniel Nikulshyn·更新 2026年7月

概览

为 MCP 工具生成 MCP App 小部件（独立 HTML）。描述所需的可视化并粘贴工具的测试输出。此技能生成专注的单一用途小部件，在聊天对话中以可视化方式展示工具的输出。它需要提供可视化描述和 JSON 格式的工具测试输出。若提供工具名称，生成的小部件可以交互式调用工具并刷新数据。

主要功能

生成独立的 HTML 小部件
支持带有 callServerTool 功能的交互式小部件
对各种数据类型进行类型安全检查
鼓励使用 Fluent UI 和设计指南以保持视觉一致性

价格

模型: Free
分类: 育言活动
评分: 暂无评价

使用场景

工具输出可视化

用户希望在聊天对话中将工具的输出以图表或表格形式可视化。他们提供所需可视化的描述以及工具的 JSON 格式测试输出。

交互式仪表盘

用户请求一个交互式小部件，展示工具数据并允许刷新数据。用户提供工具名称和测试输出。

优点 & 缺点

优点

为聊天对话生成视觉上吸引人的小部件
支持具备刷新功能的交互式小部件
鼓励对数据进行紧凑且专注的可视化展示

缺点

需要用户提供特定输入（可视化描述和工具的测试输出）
仅能基于提供的数据生成小部件，无法对数据结构做假设

评测

登录以留下评测。

暂无评测。来当第一个吧!

问答

Can the widget refresh data automatically?

If you provide a tool name, the generated HTML can include a `callServerTool` function that lets the widget call the tool and refresh its data. Without a tool name, the widget displays the data read‑only.

Asked by Bilal Choudhury · Jan 11, 2026

Is there a learning curve to using this skill?

The main steps are describing the desired visual (e.g., chart, table) and supplying the tool’s JSON output. Once those are provided, the skill outputs the HTML; no additional coding is needed, though familiarity with Fluent UI guidelines can help customize the look.

Asked by Sarai Cohen · Jan 11, 2026

Do I need to provide my tool’s data before creating a widget?

Yes. The tool requires a test output in JSON format from the tool you want to visualize. Without this JSON, it will prompt you to paste it; it will not guess the data shape.

Asked by Yara Mansour · Nov 20, 2025

What kind of visual outputs can this tool generate?

It creates self‑contained HTML widgets such as charts, comparison tables or maps that display a tool’s JSON output. The widget is styled with Fluent UI for consistency and can be interactive if a tool name is supplied.

Asked by Tobias Hartmann · Oct 18, 2025