# Generate MCP App UI

Generate a single-file MCP App widget for an MCP tool, with either bundled runtime code...

- Repository: https://github.com/microsoft/power-platform-skills (1098 stars)
- Category: AI and agents
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add microsoft/power-platform-skills --skill generate-mcp-app-ui -g -a claude-code -y`
Codex: `npx skills add microsoft/power-platform-skills --skill generate-mcp-app-ui -g -a codex -y`
Cursor: `npx skills add microsoft/power-platform-skills --skill generate-mcp-app-ui -g -a cursor -y`
Gemini CLI: `npx skills add microsoft/power-platform-skills --skill generate-mcp-app-ui -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add microsoft/power-platform-skills`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

**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](../../references/mcp-apps-reference.md)
- Visual design defaults and theme tokens: [design-guidelines.md](../../references/design-guidelines.md)
- Self-contained source template: [self-contained-widget.template.html](../../samples/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

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.

The rest: https://github.com/microsoft/power-platform-skills/blob/HEAD/plugins/mcp-apps/skills/generate-mcp-app-ui/SKILL.md