microsoft/generate-mcp-app-ui
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.
npx skills add https://github.com/microsoft/power-platform-skills --skill generate-mcp-app-uiTriggers: 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.
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.
A widget is a card in a conversation, not a standalone app. Keep these principles in mind:
./mcp-app-widget.html (or a descriptive name like ./travel-map.html).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>
If the user asks to change an existing widget ("make it more colorful", "add a chart", "make the map bigger"):
<!DOCTYPE html>Take microsoft/generate-mcp-app-ui from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.