Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

microsoft/generate-mcp-app-ui

Name: generate-mcp-app-ui
Author: microsoft

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

npx skillsauth add microsoft/power-platform-skills generate-mcp-app-ui

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

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

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. They can paste it directly.

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. 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

Read mcp-apps-reference.md for the MCP Apps API, CDN libraries, and technical patterns.
Read design-guidelines.md for visual design defaults.
Look at the tool's test output to understand the data shape.
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.
Choose the visual that best represents the data.
Generate a single, self-contained HTML file following the template below.
Write the file to ./mcp-app-widget.html (or a descriptive name like ./travel-map.html).
Tell the user where the file is and how to open it in a browser to preview.

HTML template

ALL widget logic goes in a single <script type="module"> block. Use the MCP Apps App class from the CDN.

<!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)';
    }

    // --- Your render functions go here ---
    function renderLoading() { /* ... */ }
    function renderData(data) { /* ... */ }
    function renderError(message) { /* ... */ }

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

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

    app.ontoolresult = (result) => {
      // IMPORTANT: The tool data is ALWAYS in result.structuredContent
      // NOT result.data, NOT result itself, NOT result.content
      const data = result.structuredContent;
      if (data) {
        renderData(data);
      } 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>

Refinement

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

Read the existing HTML file
Make ONLY the requested change
Do not restructure the widget, add new features, or remove functionality unless asked
Write the updated file

Output rules

Output a complete, self-contained HTML page starting with <!DOCTYPE html>
Write the HTML to a file, don't just print it in the chat
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 the file self-contained (all CSS inline, all JS in the module block, CDN imports for libraries)

microsoft/generate-mcp-app-ui

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

Generate an MCP App widget (self-contained HTML) for an MCP tool. Describe the visual you want and paste your tool's test output. Use when user asks to create an MCP App, widget, or visual for a tool.

170 stars

tools

Updated Apr 18, 2026

$ install --global

skillsauth

npx skillsauth add microsoft/power-platform-skills generate-mcp-app-ui

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 18, 2026, 6:40 AM34.1s1 file scanned

SKILL.md

name:: generate-mcp-app-ui
version:: 1.0.0
description:: Generate an MCP App widget (self-contained HTML) for an MCP tool. Describe the visual you want and paste your tool's test output. Use when user asks to create an MCP App, widget, or visual for a tool.
author:: Microsoft Corporation
argument-hint:: <description of what the widget should display>
user-invocable:: true
allowed-tools:: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion

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

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. They can paste it directly.

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.

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

Read mcp-apps-reference.md for the MCP Apps API, CDN libraries, and technical patterns.
Read design-guidelines.md for visual design defaults.
Look at the tool's test output to understand the data shape.
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.
Choose the visual that best represents the data.
Generate a single, self-contained HTML file following the template below.
Write the file to ./mcp-app-widget.html (or a descriptive name like ./travel-map.html).
Tell the user where the file is and how to open it in a browser to preview.

HTML template

ALL widget logic goes in a single <script type="module"> block. Use the MCP Apps App class from the CDN.

<!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)';
    }

    // --- Your render functions go here ---
    function renderLoading() { /* ... */ }
    function renderData(data) { /* ... */ }
    function renderError(message) { /* ... */ }

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

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

    app.ontoolresult = (result) => {
      // IMPORTANT: The tool data is ALWAYS in result.structuredContent
      // NOT result.data, NOT result itself, NOT result.content
      const data = result.structuredContent;
      if (data) {
        renderData(data);
      } 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>

Refinement

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

Read the existing HTML file
Make ONLY the requested change
Do not restructure the widget, add new features, or remove functionality unless asked
Write the updated file

Output rules

Output a complete, self-contained HTML page starting with <!DOCTYPE html>
Write the HTML to a file, don't just print it in the chat
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 the file self-contained (all CSS inline, all JS in the module block, CDN imports for libraries)

Related Skills

microsoft/add-workiq

tools

VerifiedTrustedCommunity

Adds Work IQ (M365 Copilot Search) to a Power Apps code app via the Work IQ Copilot MCP connector (shared_a365copilotchatmcp), then wires up a production-ready McpSession wrapper for AI-powered, knowledge-grounded search and chat. Use when integrating Microsoft 365 Copilot search/chat. The CopilotChat tool searches internal Microsoft 365 content (documents, emails, chats, sites, files) across your organization — prefer workload-specific tools (SharePoint, OneDrive, Teams, Mail) when the workload is explicit; do not use it for general knowledge, news, public web, or external information.

564SKILL.mdUpdated Jul 26, 2026

microsoft/preview-screens

tools

VerifiedTrustedCommunity

Use when the user wants to preview generated screens in a browser without starting Metro / a simulator — for example after /create-mobile-app finishes or after /edit-app regenerates a screen.

564SKILL.mdUpdated Jul 1, 2026

microsoft/preview-screens

microsoft/edit-app

development

VerifiedTrustedCommunity

Use when the user wants to iterate on an existing generated Power Apps mobile app after /create-mobile-app: update the plan, data model, native capabilities, design, screens, generated app code, and preview without restarting the full project flow.

564SKILL.mdUpdated Jul 1, 2026

microsoft/design-system

development

VerifiedTrustedCommunity

Creates and manages the brand design system for a Power Apps mobile app. Generates brand/design-system.md (source of truth), brand/tokens.ts (importable Tamagui tokens), and brand/design-system.html (visual gallery). Triggered at Step 6.5 of /create-mobile-app, or standalone via /design-system.

564SKILL.mdUpdated Jul 1, 2026

microsoft/design-system

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/microsoft/power-platform-skills.git

# Copy into Claude Code skills folder (global)
cp -r power-platform-skills/plugins/mcp-apps/skills/generate-mcp-app-ui ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

microsoft/power-platform-skills

170 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT