Generate MCP App UI
Generate a single-file MCP App widget for an MCP tool, with either bundled runtime code...
Install
npx skills add microsoft/power-platform-skills --skill generate-mcp-app-ui -g -a claude-code -y- Repository
- microsoft/power-platform-skills1.1k
- Category
- AI and agents
- Updated
- 4d ago
- License
- MIT
- Context cost
- Mediumabout 2,970 tokens
- Runs scripts
- No, instructions only
What it does
Generate a single-file MCP App widget for an MCP tool, with either bundled runtime code or user-approved public CDN imports. Describe the visual and provide a plain structured payload or a full tool result with content, structuredContent, and meta.
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
- Self-contained source template: self-contained-widget.template.html
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. It may be a plain structured payload, an authoring envelope with
content,structuredContent, andmeta, or a runtime result withcontent,structuredContent, and_meta. -
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:
- 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.
- 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.
