generate-mcp-app-ui

generate-mcp-app-ui is a skill for Claude Code from microsoft/power-platform-skills. It costs 53 tokens per session (2,869 once invoked), scanned A, original, MIT.

A generator for self-contained HTML widgets that display the results of MCP tools. MCP, or Model Context Protocol, is a standard for connecting AI assistants to external tools.

In plain words
What is it for?
Use it to create charts, comparison tables, maps, or other visual displays for an MCP tool's returned data.
Why use it?
It helps turn tool data into a focused visual component without guessing how the data is structured. The tool output or its schema is required before generation.

Skill for Claude Code ✓ vendor

Written for Claude Code: allowed-tools in frontmatter. Also seen: names the AskUserQuestion tool.

Part of the mcp-apps plugin — 1 skill shipped together

Good fit Use it to create charts, comparison tables, maps, or other visual displays for an MCP tool's returned data.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/microsoft/power-platform-skills/generate-mcp-app-ui
About the project

microsoft/power-platform-skills is a plugin marketplace containing reusable skills, agents, and commands for developing with Microsoft Power Platform. Developers use it to build and deploy Power Pages sites, model-driven Power Apps, and related solutions through Claude Code or GitHub Copilot. The catalogue entries are the marketplace's included skills, agents, plugins, and other agent components.

microsoft/power-platform-skills · 862 stars · on GitHub · aka.ms

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add microsoft/power-platform-skills --skill generate-mcp-app-ui
Clone the repo
git clone --depth 1 https://github.com/microsoft/power-platform-skills

Made for: Claude Code.

Or install mcp-apps, the plugin that ships this one along with the rest of its 1 skill.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for generate-mcp-app-ui

README.md
[![agentmods](https://agentmods.dev/badge/skills/microsoft/power-platform-skills/generate-mcp-app-ui/github.svg)](https://agentmods.dev/skills/microsoft/power-platform-skills/generate-mcp-app-ui)
Your own site
<a href="https://agentmods.dev/skills/microsoft/power-platform-skills/generate-mcp-app-ui"><img src="https://agentmods.dev/badge/skills/microsoft/power-platform-skills/generate-mcp-app-ui/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for generate-mcp-app-ui

Your own site · 80×15
<a href="https://agentmods.dev/skills/microsoft/power-platform-skills/generate-mcp-app-ui"><img src="https://agentmods.dev/badge/skills/microsoft/power-platform-skills/generate-mcp-app-ui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 53 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,869 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector warn 7 Sept 2026
SkillSpector: 1 finding, up to high

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

  • high System Prompt Leakage · line 153
    Skill contains instructions that could directly expose system prompts, internal rules, or hidden instructions to users or external parties.
    Fix: Remove any instructions that reveal, print, or output system prompts or internal rules. System instructions should never be exposed to end users.
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00053 $0.02869
Opus 5 $0.00026 $0.01435
Sonnet 5 $0.00011 $0.00574
Haiku 4.5 $0.00005 $0.00287

Measured today against content hash 79ac41013a6e, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

generate-mcp-app-ui scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/mcp-apps/skills/generate-mcp-app-ui/SKILL.md · 263 lines

How it starts

The opening of the file, as written. The whole thing — 263 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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.

What you need from the user

  1. A description of the visual they want ("display as a chart", "show a comparison table", "show these on a map")

  2. The tool's test output - the actual JSON from testing their tool. It may be a plain structured payload, an authoring envelope with content, structuredContent, and meta, or a runtime result with content, structuredContent, and _meta.

  3. Whether public CDN URLs are allowed. If the user has not already stated the policy, ask:

    Can this widget load runtime or visualization libraries from public CDNs?

    Present these choices in this order:

    1. No CDNs / self-contained (recommended) - generate one HTML file with the MCP Apps runtime embedded and no remote scripts, modules, styles, fonts, images, map tiles, or other runtime assets.
    2. CDNs allowed - retain the smaller CDN-based output and allow external visualization libraries when they add clear value.

    Do not silently choose CDN mode. If the user does not specify a preference, use the self-contained mode.

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. Normalize it before designing:

  • A plain object with none of the reserved result keys represents structuredContent.
  • An object containing content, structuredContent, or meta is an authoring result envelope. Rename meta to runtime _meta.
  • An object containing _meta is already in runtime MCP result form.

content and structuredContent are model-visible. _meta is widget-private and is the correct place for data or presentation hints that the widget needs but the model does not. The widget may use any combination of these channels. Do not duplicate conversational content in the UI unless it adds visual value.

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.

Read the full file on GitHub · 263 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. today Changed · +103 lines · +1 tokens per session 79ac41013a6e
  2. 12d ago First seen · 160 lines · 52 tokens per session scan A b0ec4b387fb2

Subscribe to this mod's changes

generate-mcp-app-ui is a skill published in the GitHub repository microsoft/power-platform-skills (862 stars, last pushed today), licensed MIT. It adds 53 tokens to every session and 2,869 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

canvas-apps-ui-gen

Generates paste-ready Power Apps Canvas App YAML. Invoke when the user wants to replicate a UI mockup, improve an existing Canvas app screen, or build a new screen from a text description. Also invoke when the user asks to "improve", "redesign", or "generate YAML" for a Canvas app screen.

ToluVictor/canvas-apps-tools · 71 tokens

top-design

Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard…

wondelai/skills · 113 tokens

traction-eos

Implement the Entrepreneurial Operating System (EOS) to align vision and execution across a company. Use when the user mentions "EOS", "Entrepreneurial Operating System", "V/TO", "quarterly rocks", "Level 10 meetings", "accountability chart", "IDS process", "my company feels chaotic", "we keep having the same…

wondelai/skills · 147 tokens

clean-code

Write readable, maintainable code through disciplined naming, small functions, and clean error handling. Use when the user mentions "clean up this code", "this function is too long", "code smells", "naming conventions", "boy scout rule", "single responsibility", or "unit test quality". Also trigger when reviewing a…

wondelai/skills · 126 tokens

ux-heuristics

Evaluate and improve interface usability using heuristic analysis. Use when the user mentions "usability audit", "users are confused", "form usability", "navigation problems", "Nielsen heuristics", "cognitive walkthrough", or "is this easy to use". Also trigger when reviewing a design for usability issues, improving…

wondelai/skills · 122 tokens

blue-ocean-strategy

Create uncontested market space using value innovation instead of competing head-to-head. Use when the user mentions "blue ocean", "red ocean", "strategy canvas", "ERRC framework", "value innovation", "non-customers", "buyer utility map", "the market is too crowded", "how do we stand out", or "escape the price war".…

wondelai/skills · 152 tokens