Generate MCP App UI

by microsoft

Generate MCP App UI is an AI Engineering skill for Claude Code, published by microsoft in power-platform-skills.

757 stars158 forkson microsoft/power-platform-skillsAdded 2026/08/23+3% in starsRepository updated 2026/08/22

View source on GitHub Download repo ZIP

claude-code-pluginclaude-code-skillscode-appsgithub-copilot-pluginpower-appspower-pagespower-platform

Install in seconds

Install Generate MCP App UI

Copy Generate MCP App UI into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/microsoft/power-platform-skills/tree/main/plugins/mcp-apps/skills/generate-mcp-app-ui ~/.claude/skills/generate-mcp-app-ui

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/microsoft/power-platform-skills.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: plugins/mcp-apps/skills/generate-mcp-app-ui/SKILL.md in microsoft/power-platform-skills
Installs to: ~/.claude/skills/generate-mcp-app-ui
Collection: One of 25 skills cataloged from this repository
Category: AI Engineering — 2451 skills

What Generate MCP App UI does

Generate MCP App UI creates self-contained HTML widgets for MCP tools from a visual description and test JSON output. Use it when you need a conversation card that renders tool results as a chart, table, map, or other focused view.

Generate MCP App UI is cataloged under AI Engineering on DirSkills. Generate MCP App UI comes from a repository tagged claude-code-plugin, claude-code-skills, code-apps, github-copilot-plugin and power-apps.

Documentation

README

Excerpt

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

This is the opening of the README. Read the full README on GitHub.

Commands Generate MCP App UI provides

Slash commands named in this skill’s SKILL.md, listed in the order they first appear.

/generate-mcp-app-ui
/mcp-app
/widget

Frequently asked about Generate MCP App UI

What else does microsoft publish alongside Generate MCP App UI?
Generate MCP App UI is one of 25 skills that DirSkills catalogs from microsoft/power-platform-skills, the repository it ships in. Its siblings there include Add Connector, Add Connector and Add Data Source. Each one is a separate skill with its own page in this directory, installs the same way Generate MCP App UI does, and is maintained by microsoft in that same repository. The rest of the collection is listed on the microsoft/power-platform-skills page.
How does Generate MCP App UI compare to other AI Engineering skills?
Generate MCP App UI ranks #1674 by stars among the 2451 AI Engineering skills in this catalog. The most-starred ones next to it are Architecture Decision Records, AI-First Engineering and Agentic OS. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Generate MCP App UI against them. Open each page to compare what they document and how they install.