skills.rest
microsoft
microsoftOFFICIAL
Explore all skills by this author →
Website𝕏@OpenAtMicrosoftGitHub

generate-mcp-app-ui

Generate self-contained HTML widgets that visualize MCP tool output in chat conversations.

808|167|Updated Jan 21, 2026
Search Tags:#HTML#generate#Widget#fluent ui#ext-apps#MCP Apps#tool visualization
One-click install
npx skills add https://github.com/microsoft/power-platform-skills --skill generate-mcp-app-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-mcp-app-ui
Source: https://github.com/microsoft/power-platform-skills/tree/main/plugins/mcp-apps/skills/generate-mcp-app-ui
Command: npx skills add https://github.com/microsoft/power-platform-skills --skill generate-mcp-app-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @modelcontextprotocol/ext-apps, @fluentui/web-components, @fluentui/tokens, and includes references (resource) components.

What problem does it solve?

Building interactive visual representations of MCP tool results requires manually wiring the MCP Apps protocol, theming, and data rendering into a single HTML file, which is repetitive and error-prone.

Core Features & Use Cases

  • Widget Generation: Produces a single self-contained HTML file using the MCP Apps App class, Fluent UI web components, and CDN imports.
  • Data-Driven Visuals: Chooses the right visual (maps, charts, cards, tables, timelines) based on the tool's actual JSON test output.
  • Theme Support: Applies light/dark Fluent UI tokens based on host context changes.
  • Use Case: Paste the JSON output from testing your weather MCP tool and ask for a map widget; the Skill generates a ready-to-preview HTML file wired to result.structuredContent, optionally with callServerTool refresh support.

Quick Start

Ask the assistant to generate an MCP App widget for your tool, describing the visual you want and pasting the tool's JSON test output.

Frequently Asked Questions about generate-mcp-app-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an MCP App widget for my tool?▼

Describe the visual you want and paste your tool's JSON test output. The generator produces a self-contained HTML file using the MCP Apps App class that renders the data from result.structuredContent, which you can open in a browser to preview.

What is the MCP Apps protocol for tool visualization?▼

MCP Apps is a protocol where a widget connects via the App class from the ext-apps package, receives tool results through the ontoolresult handler, and reads data from result.structuredContent. It also supports host context events like theme changes.

Can the widget call my MCP tool interactively?▼

Yes, if you provide the tool name, the widget wires up callServerTool so it can invoke the tool interactively, such as for refresh buttons. Without a tool name, the widget renders the provided data read-only.

Why does my MCP widget show undefined data?▼

Tool data is always in result.structuredContent, not result.data or result.content. Also verify the App import uses the named export syntax import { App }, since a default import leaves App undefined.

Does the widget support dark mode theming?▼

Yes, the template applies Fluent UI webLightTheme or webDarkTheme tokens based on the host context theme, updating automatically through the onhostcontextchanged handler.

Related Skills

Explore More Software Engineering Skills→
SkastVnTSkastVnT
7

mcp-tool-authoring

Guide creation and documentation of MCP tools, resources, and prompts.

Community
Advanced
hgonzalezstahl-bliphgonzalezstahl-blip

build-mcp-app

Build interactive MCP apps with UI widgets for inline chat experiences.

Community
Advanced
mdmagnuson-creatormdmagnuson-creator

screenshot

Capture Playwright screenshots of web pages in light and dark themes.

Community
Intermediate
panaversitypanaversity

building-chatgpt-apps

Build ChatGPT apps with interactive widgets and FastMCP-backed tools.

Official
Advanced