New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

Generate MCP App UI

by microsoft in microsoft/power-platform-skills

Generate a single-file MCP App widget for an MCP tool, with either bundled runtime code or user-approved public CDN imports.

OfficialMITAuto-check: notesAgent Workflows

Install Generate MCP App UI

skills CLI
$ npx skills add microsoft/power-platform-skills --skill generate-mcp-app-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install microsoft/power-platform-skills generate-mcp-app-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/microsoft/power-platform-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/mcp-apps/skills/generate-mcp-app-ui .claude/skills/generate-mcp-app-ui && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
generate-mcp-app-ui
GitHub stars
979
Token cost
~3.1k tokens
SKILL.md length
1,191 words
Files
1
Skills in repo
92
Repo updated
First seen
Licence
MIT

At a glance

Generate a single-file MCP App widget for an MCP tool, with either bundled runtime code or user-approved public CDN imports.

  • Works in 3 steps: A description of the visual they want… → The tool's test output - the actual JSON… → Whether public CDN URLs are allowed. If…
  • Tasks that involve MCP servers
  • SKILL.md covers What you need from the user, How to think about widgets, How to generate and CDN mode template, plus 3 more sections
  • Calls node; reaches cdn.jsdelivr.net and unpkg.com

What it does

Generate MCP App UI is an agent skill from microsoft/power-platform-skills, published by the product's own GitHub organization. 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.

Its SKILL.md is about 3.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Agent Workflows, covering MCP servers. It works with Model Context Protocol. The repository describes itself as: A plugin marketplace for GitHub Copilot and other AI agents that provides Power Platform development plugins, including reusable skills, agents, and commands for building and… The licence is MIT.

When your agent uses it

  • Tasks that involve MCP servers

Example prompts

  • “/generate-mcp-app-ui”

Requirements

  • Pre-approved tools (allowed-tools): Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  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
  3. Whether public CDN URLs are allowed. If the user has not already stated the

What it can do on your machine

Read from SKILL.md and the folder at commit 8c4b447. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Bash
    • Glob
    • Grep
    • AskUserQuestion

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • cdn.jsdelivr.net
    • unpkg.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Generate MCP App UI loads about 3.1k tokens when it runs. Until then it costs about 67 tokens; SKILL.md has 1,191 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~67
When it runs · the whole SKILL.md, loaded when a task matches
~3.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from microsoft/power-platform-skills at commit 8c4b447, republished under its MIT licence (© microsoft). 1,191 words, ~3,094 tokens.

Download SKILL.mdSave it as .claude/skills/generate-mcp-app-ui/SKILL.md (or your agent's skills folder).
name
generate-mcp-app-ui
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.
allowed-tools
Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion
version
1.1.0
author
Microsoft Corporation
argument-hint
<description of what the widget should display>
user-invocable
true

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.

How to think about widgets

A widget is a card in a conversation, not a standalone app. Keep these principles in mind:

  • The conversation is the input. The user already typed their request in chat. The tool processed it. The widget shows the result visually. Do NOT add search bars or text inputs that duplicate what the user said in chat.
  • The LLM text response is the explanation. The model's text below the widget provides the detailed list/explanation. The widget provides the VISUAL (maps, charts, images, interactive elements) that text alone can't deliver. Don't re-list what the LLM text already covers.
  • Compact by default. Focus on visual value. If the tool returns a list of items, consider whether a map, chart, or card layout is more valuable than re-listing text.
  • One view. No tabs, page navigation, or back buttons. If the user wants something different, they ask in the chat.
  • Pick the right visual for the data. Maps for coordinates. Charts for numeric/trend data. Cards for structured records. Tables for comparisons. Timelines for events. Don't default to any one visual type.

How to generate

  1. Read mcp-apps-reference.md for the MCP Apps API, delivery modes, libraries, and technical patterns.

  2. Read design-guidelines.md for visual design defaults.

  3. Normalize the test output into the runtime { content, structuredContent, _meta } shape and inspect every channel relevant to the requested visual.

  4. When reading numeric, boolean, or optional fields, use type-safe checks. See "Data type safety" in mcp-apps-reference.md. Do not assume runtime types match the sample.

  5. Choose the visual that best represents the data.

  6. Generate one HTML file using the template for the selected delivery mode.

  7. Write the file to ./mcp-app-widget.html (or a descriptive name like ./travel-map.html).

  8. In self-contained mode, run the deterministic inliner before reporting completion:

    powershell
    node "${PLUGIN_ROOT}/scripts/inline-self-contained-runtime.js" --input "./mcp-app-widget.html"

    The script replaces the runtime marker in place and fails if the draft still contains external runtime/resource URLs.

  9. Tell the user where the file is and how to open it in a browser to preview.

Show full SKILL.md (416 more words)Show less

CDN mode template

Use this template only after the user allows public CDNs. ALL widget logic goes in a single <script type="module"> block. Use the MCP Apps App class from the CDN.

html
<!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;
      padding: 24px;
      font-family: var(--fontFamilyBase, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
      font-size: 14px;
      line-height: 1.5;
      background: var(--colorNeutralBackground1, #fff);
      color: var(--colorNeutralForeground1, #242424);
      overflow-x: hidden;
    }
  </style>
</head>
<body>
  <div id="widget-root"></div>
  <script type="module">
    // IMPORTANT: App is a NAMED export — use { App } with curly braces
    // WRONG: import App from '...'  (default import — App will be undefined)
    // RIGHT: import { App } from '...'
    import { App } from 'https://cdn.jsdelivr.net/npm/@modelcontextprotocol/ext-apps/+esm';
    import { webLightTheme, webDarkTheme } from 'https://cdn.jsdelivr.net/npm/@fluentui/tokens/+esm';

    // --- Theme ---
    function applyTheme(theme) {
      const tokens = theme === 'dark' ? webDarkTheme : webLightTheme;
      const root = document.documentElement;
      for (const [token, value] of Object.entries(tokens)) {
        root.style.setProperty('--' + token, value);
      }
      document.body.style.background = theme === 'dark'
        ? 'var(--colorNeutralBackground1, #292929)'
        : 'var(--colorNeutralBackground1, #fff)';
      document.body.style.color = theme === 'dark'
        ? 'var(--colorNeutralForeground1, #e0e0e0)'
        : 'var(--colorNeutralForeground1, #242424)';
    }

    // Keep all result channels so the widget can intentionally use model-visible
    // content/structuredContent and widget-private _meta.
    function normalizeToolResult(result) {
      return {
        content: result?.content ?? [],
        structuredContent: result?.structuredContent ?? {},
        _meta: result?._meta ?? {}
      };
    }

    function hasToolResultData(result) {
      return result.content.length > 0
        || Object.keys(result.structuredContent).length > 0
        || Object.keys(result._meta).length > 0;
    }

    // --- Your render functions go here ---
    function renderLoading() { /* ... */ }
    function renderData(toolResult) {
      // Read toolResult.content, toolResult.structuredContent, and/or toolResult._meta.
    }
    function renderError(message) { /* ... */ }

    // --- Show loading immediately ---
    renderLoading();

    // --- MCP Apps setup ---
    const app = new App({ name: "widget", version: "1.0.0" });

    app.ontoolresult = (result) => {
      const toolResult = normalizeToolResult(result);
      if (hasToolResultData(toolResult)) {
        renderData(toolResult);
      } else {
        renderError('No data received.');
      }
    };

    app.onhostcontextchanged = (ctx) => {
      if (ctx.theme) { applyTheme(ctx.theme); }
    };

    app.onteardown = () => ({});

    await app.connect();

    // Apply initial theme from host
    const hostCtx = app.getHostContext();
    if (hostCtx?.theme) { applyTheme(hostCtx.theme); }
  </script>
</body>
</html>

Self-contained mode template

Start from self-contained-widget.template.html. Keep this exact marker in <head> until the final inlining step:

html
<!-- MCP_APPS_SELF_CONTAINED_RUNTIME -->

The application module obtains its dependencies from the embedded runtime:

javascript
const { App, webLightTheme, webDarkTheme } = globalThis.McpAppsRuntime;

In this mode:

  • Do not add import declarations, remote <script src>, stylesheets, fonts, images, iframes, media, map tiles, workers, or literal network fetch calls.
  • Use semantic HTML controls styled with inline CSS. Do not emit <fluent-*> elements; Fluent Web Components are intentionally not bundled.
  • Use the bundled Fluent theme tokens for light/dark colors.
  • Implement charts, timelines, diagrams, and maps with inline SVG, Canvas, or CSS. A geographic plot may use coordinates and an inline schematic/base outline, but it must not fetch tiles.
  • Keep exactly one <script type="module"> application block. The inliner adds the runtime as a classic inline script before it.
  • Run the inliner after all widget edits. Never copy the minified runtime into the file manually and never leave the marker in the final output.

Refinement

If the user asks to change an existing widget ("make it more colorful", "add a chart", "make the map bigger"):

  1. Read the existing HTML file

  2. Make ONLY the requested change

  3. Do not restructure the widget, add new features, or remove functionality unless asked

  4. Preserve its existing CDN policy. For a self-contained widget, edit a temporary copy prepared with the command below, then re-run the inliner after editing. Do not hand-edit the minified runtime.

    powershell
    node "${PLUGIN_ROOT}/scripts/inline-self-contained-runtime.js" --prepare --input "./widget.html" --output "./widget.draft.html"

  5. Write the updated file

Output rules

  • Output a complete, single-file HTML page starting with <!DOCTYPE html>
  • Write the HTML to a file, don't just print it in the chat
  • In self-contained mode, the final file must contain the embedded runtime, must not contain MCP_APPS_SELF_CONTAINED_RUNTIME, and must not load any remote runtime asset.
  • In CDN mode, only use public CDN resources after the user has explicitly allowed them.
  • Preserve all result channels in the ontoolresult and callServerTool paths. Read widget-private metadata from runtime result._meta, never result.meta.
  • Tell the user where the file is
  • Let the user know they can ask for changes: "If you'd like changes, just describe them in the chat (e.g. 'make the map bigger', 'add a chart', 'use a card layout')."
  • Keep all authored CSS and widget logic inline. The only external resources permitted are those allowed by the selected delivery mode.

© microsoft, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in plugins/mcp-apps/skills/generate-mcp-app-ui of microsoft/power-platform-skills.

Open the folder on GitHubat commit 8c4b447

Compare with similar skills

Generate MCP App UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Generate MCP App UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Generate MCP App UI this skillmicrosoft/power-platform-skills979—~3.1kAutomated safety check: NotesMIT
MCP Server Builderanthropics/skills180k63 repos~2.3kAutomated safety check: PassApache-2.0
MCP Server BuildershareAI-lab/learn-claude-code78k5 repos~1.2kAutomated safety check: PassMIT
MCP Integration for Pluginsanthropics/claude-plugins-official38k11 repos~3.1kAutomated safety check: PassApache-2.0
Crush Configurationcharmbracelet/crush29k—~3.7kAutomated safety check: PassCustom licence
Context Mode Output Sandboxmksglu/context-mode26k—~4.1kAutomated safety check: PassCustom licence

Similar skills

  • MCP Server Builder

    anthropics/skills

    Official

    Guides the design and implementation of Model Context Protocol servers in TypeScript or Python, from tool naming and error messages to evaluation.

    180k GitHub starsUsed in 63 repos~2.3k tokens
    Agent WorkflowsAuto-check passed

  • MCP Server Builder

    shareAI-lab/learn-claude-code

    Walks through building MCP servers in Python or TypeScript that expose tools, resources and prompts to Claude, with templates, registration and testing.

    78k GitHub starsUsed in 5 repos~1.2k tokens
    Agent WorkflowsAuto-check passed

  • MCP Integration for Plugins

    anthropics/claude-plugins-official

    Official

    Explains how to bundle Model Context Protocol servers in a Claude Code plugin, covering config files, stdio, SSE, HTTP and WebSocket server types, and authentication.

    38k GitHub starsUsed in 11 repos~3.1k tokens
    Agent WorkflowsAuto-check passed

  • Crush Configuration

    charmbracelet/crush

    Explains how to configure the Crush coding agent with crushrc or crush.json, covering providers, models, LSPs, MCP servers, hooks, permissions and config precedence.

    29k GitHub stars~3.7k tokensUpdated today
    Agent WorkflowsAuto-check passed

  • Context Mode Output Sandbox

    mksglu/context-mode

    Routes large command, file, API and browser output through context-mode tools so only the needed result enters the agent's context, instead of dumping it via Bash.

    26k GitHub stars~4.1k tokensUpdated today
    Agent WorkflowsAuto-check passed

  • Warp GUI to Agent CLI Migration

    warpdotdev/warp

    Migrates the compatible subset of settings and global file-based MCP servers from the Warp desktop app into Warp Agent CLI without exposing credentials or state.

    65k GitHub starsUsed in 1 repo~2.1k tokens
    Agent WorkflowsAuto-check passed

More from microsoft/power-platform-skills

All 92 skills in this repo

  • Manage Firewall

    microsoft/power-platform-skills

    Official

    Inspects and configures the web application firewall (WAF) in front of a Power Pages production site.

    979 GitHub stars~4.5k tokensUpdated today
    Auto-check: notes

  • Manage Headers

    microsoft/power-platform-skills

    Official

    Inspects and configures the security headers a Power Pages site sends to browsers — Content Security Policy, frame and clickjacking protection, cross-origin sharing, cookie behavior, and related…

    979 GitHub stars~3k tokensUpdated today
    Auto-check: notes

  • Scan Code

    microsoft/power-platform-skills

    Official

    Scans a Power Pages site project for security issues in source code and dependencies.

    979 GitHub stars~3.4k tokensUpdated today
    Auto-check: notes

  • Scan Site

    microsoft/power-platform-skills

    Official

    Runs a security scan on a deployed Power Pages site, fetches the latest scan report, and produces a plain-language summary.

    979 GitHub stars~3.2k tokensUpdated today
    Auto-check: notes

  • Setup Datamodel

    microsoft/power-platform-skills

    Official

    Creates Dataverse tables, columns, and relationships for a Power Pages site based on a data model proposal.

    979 GitHub stars~4k tokensUpdated today
    Auto-check: notes

  • Add Server Logic

    microsoft/power-platform-skills

    Official

    Creates, edits, and manages Power Pages Server Logic files — server-side JavaScript that runs securely on the Power Pages runtime.

    979 GitHub stars~18k tokensUpdated today
    Auto-check: notes

Works with

Categories

Questions about Generate MCP App UI

What does Generate MCP App UI do?

Generate a single-file MCP App widget for an MCP tool, with either bundled runtime code or user-approved public CDN imports. Generate MCP App UI is an agent skill from microsoft/power-platform-skills, published by the product's own GitHub organization. Generate a single-file MCP App widget for an MCP tool, with either bundled runtime code or user-approved public CDN imports.

When should I use Generate MCP App UI?

Generate MCP App UI fits situations like: tasks that involve MCP servers.

How do I install Generate MCP App UI in Claude Code?

Run `npx skills add microsoft/power-platform-skills --skill generate-mcp-app-ui -a claude-code`. Or copy the skill folder (plugins/mcp-apps/skills/generate-mcp-app-ui in microsoft/power-platform-skills) into .claude/skills/generate-mcp-app-ui in your project. Claude Code loads it when a task matches its description.

How do I install Generate MCP App UI in Codex?

Run `npx skills add microsoft/power-platform-skills --skill generate-mcp-app-ui -a codex`. Or copy the skill folder (plugins/mcp-apps/skills/generate-mcp-app-ui in microsoft/power-platform-skills) into .agents/skills/generate-mcp-app-ui in your project. Codex loads it when a task matches its description.

Can I use Generate MCP App UI in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add microsoft/power-platform-skills --skill generate-mcp-app-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/generate-mcp-app-ui, .gemini/skills/generate-mcp-app-ui, .github/skills/generate-mcp-app-ui and .opencode/skills/generate-mcp-app-ui in your project.

What does Generate MCP App UI need to run?

Going by SKILL.md and its folder, Generate MCP App UI needs the command-line tools its instructions call (node). Its frontmatter pre-approves these tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion.

Does Generate MCP App UI access the network?

SKILL.md names 2 domains. In commands or code: cdn.jsdelivr.net and unpkg.com; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.

Is Generate MCP App UI safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Generate MCP App UI use?

Generate MCP App UI is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Generate MCP App UI use?

About 3.1k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Generate MCP App UI?

Skills that share tags, products or a category with Generate MCP App UI: MCP Server Builder (anthropics/skills, 180k stars), MCP Server Builder (shareAI-lab/learn-claude-code, 78k stars), MCP Integration for Plugins (anthropics/claude-plugins-official, 38k stars) and Crush Configuration (charmbracelet/crush, 29k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Generate MCP App UI?

microsoft (a GitHub organization, an official publisher) maintains it in microsoft/power-platform-skills, which has 979 GitHub stars. The repository holds 92 skills in this directory. The repository was last updated on October 9, 2026.

Source: microsoft/power-platform-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.