$ ~/registry/skill/microsoft-plugins-mcp-apps-skills-generate-mcp-app-ui

SKILL

generate-mcp-app-ui

Generate embeddable MCP App widgets from tool output and visual requirements.

Stars

★ 440

Source

GitHub

Updated

2026-07-11

// securityCaution

Prompt only, no code
Open source

Summary

The material indicates this is essentially a prompt-only capability for generating MCP widget UI, with no required secrets, no declared remote endpoints, and no described local execution or data-access behavior. Given that it is open source and hosted in a Microsoft GitHub repository, the overall risk is low; only the supply-chain dimension merits mild caution due to the unspecified license, low adoption, and unknown maintenance status.

CredentialsLow risk

The material explicitly states there are no required secrets or environment variables, and the README shows no API token, OAuth, or other credential setup. Based on the provided facts, there is no evident credential collection, storage, or abuse risk.

Network egressLow risk

Both the objective checks and metadata indicate no remote endpoint host. The documentation mainly describes pasting tool test output and generating self-contained HTML, with no stated behavior of sending data to third-party services.

Code executionLow risk

The system marks it as prompt-only, and the material does not describe spawning local processes, running scripts, invoking a shell, or using system-level capabilities. From the audit material, it appears to be a UI/code-generation skill rather than an execution-capable tool.

Data accessLow risk

The documentation only states that the user should provide a visual description and tool test JSON to generate a widget. It does not declare reading local files, databases, off-session resources, or writing persistent storage, and no overbroad access is evident.

Supply chainCaution

Positive factors include being open source and hosted in a Microsoft GitHub repository, making the source auditable in principle. However, the license is unspecified, community adoption is 0 stars, and maintenance status is unknown, so maintenance continuity and dependency governance remain insufficiently evidenced and should be verified before production use.

Recommendations

Verify the actual repository contents, recent commits, and issue activity to confirm the skill is still maintained.
Confirm the license and dependency list to avoid future compliance or supply-chain management issues.
If the generated HTML widget will be embedded in production, perform static code review and frontend security checks.
Provide only the minimum test JSON needed for the task, and avoid pasting unnecessary sensitive data.

Audited by: gpt-5.4 · 2026-06-16

// install

Copy the install command and let the AI configure it · recommended for beginners

Please install the "generate-mcp-app-ui" skill from askskill:
1. Download https://raw.githubusercontent.com/microsoft/power-platform-skills/main/plugins/mcp-apps/skills/generate-mcp-app-ui/SKILL.md
2. Save it as ~/.claude/skills/generate-mcp-app-ui/SKILL.md
3. Reload skills and tell me it's ready

// download

Download SKILL.mdInstall manifest ↗

// examples

Create a card UI for a weather tool

Prompt

Based on the weather tool test output below, generate a self-contained HTML MCP App widget. Style requirements: modern, light theme, card layout, emphasize current temperature, weather icon, and 3-day forecast, with mobile responsiveness. Test output: {"location":"Shanghai","current":{"temp":28,"condition":"Sunny"},"forecast":[{"day":"Mon","high":30,"low":24},{"day":"Tue","high":29,"low":23},{"day":"Wed","high":27,"low":22}]}

Expected

A ready-to-use HTML widget showing current weather and short forecast in a polished responsive layout.

Build a dashboard widget for an analytics tool

Prompt

Generate a self-contained HTML widget for this sales analytics MCP tool. Requirements: dark dashboard style with KPI cards, a trend chart placeholder area, filter bar, and table section. Test output: {"revenue":125000,"orders":842,"conversionRate":"3.8%","topChannels":["Ads","SEO","Email"]}

Expected

An HTML sales dashboard widget that clearly presents core metrics and analysis sections.

Create a kanban view for a task tool

Prompt

Using the task tool output below, generate a self-contained HTML MCP App interface. Requirements: kanban layout with Todo, In Progress, and Done columns, priority color tags, and a clean professional look. Test output: {"todo":[{"title":"Design homepage","priority":"high"}],"doing":[{"title":"Write API docs","priority":"medium"}],"done":[{"title":"Create project repo","priority":"low"}]}

Expected

A kanban-style HTML widget that organizes tasks by status and highlights priority.

// docs

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;

…

View full docs ↗

Demo MCP server for calculations, time checks, notes, and code review prompts.

—Get→

SKILL

★23k

chatgpt-apps

Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications.

OpenAIGet→

MCP

OpenAPI MCP Server

Turn any OpenAPI API into callable AI tools with authentication support.

—Get→

$ loading_