Generate Mcp App Ui
Generate a self-contained HTML MCP App widget that visualizes a specific MCP tool’s real JSON output in chat.
Overview
generate-mcp-app-ui is an agent skill for the Build phase that produces MCP App HTML widgets from your tool’s real test JSON and a short visual description.
Install
npx skills add https://github.com/microsoft/power-platform-skills --skill generate-mcp-app-uiWhat is this skill?
- Refuses to guess schema—requires actual tool test JSON or schema before generating
- Single-purpose HTML widgets aligned with MCP Apps API and Fluent/design reference docs
- Triggers on mcp app, widget, and tool visualization requests; aliases /generate-mcp-app-ui and /mcp-app
- Uses Read, Write, Edit, Bash, Glob, Grep, and AskUserQuestion to scaffold widget files
- Maps user visual intent (charts, tables, maps) to data shape from pasted test output
- Requires tool test output or schema before generation—no guessed data shape
Adoption & trust: 63 installs on skills.sh; 349 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a working MCP tool but chat only shows raw JSON, and you do not want to guess field names while building a compliant widget.
Who is it for?
Solo builders who already tested an MCP tool and need a chart, table, or map widget inside the MCP Apps ext-apps model.
Skip if: Teams that have not run the tool yet or want a generic dashboard without tying visuals to one tool’s schema.
When should I use this skill?
User asks to create an MCP App, widget, or visual for a tool and can describe the UI plus provide test output.
What do I get? / Deliverables
You get a single-purpose, theme-aware MCP App widget file grounded in your actual output shape, ready to wire to the tool in your MCP server.
- Self-contained MCP App widget HTML aligned to tool output
Recommended Skills
Journey fit
How it compares
Use for MCP App HTML widgets tied to one tool’s JSON, not for full React chat shells like AI Elements.
Common Questions / FAQ
Who is generate-mcp-app-ui for?
Indie and solo developers building MCP servers on Power Platform or similar stacks who need in-chat visuals for a specific tool’s output.
When should I use generate-mcp-app-ui?
During Build agent-tooling when you ask for an MCP App, widget, or visual for a tool and can paste real test JSON or a schema.
Is generate-mcp-app-ui safe to install?
Review the Security Audits panel on this Prism page and treat Write/Edit/Bash access like any code-generating skill in your repo.
SKILL.md
READMESKILL.md - Generate Mcp App Ui
**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](../../references/mcp-apps-reference.md) - Visual design defaults and theme tokens: [design-guidelines.md](../../references/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 1. **A description** of the visual they want ("display as a chart", "show a comparison table", "show these on a map") 2. **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 1. Read [mcp-apps-reference.md](../../references/mcp-apps-reference.md) for the MCP Apps API, CDN libraries, and technical patterns. 2. Read [design-guidelines.md](../../references/design-guidelines.md) for visual design defaults. 3. Look at the tool's test output to understand the data shape. 4. 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. 5. Choose the visual that best represents the data. 6. Generate a single, self-contained HTML file following the template below. 7. Write the file to `./mcp-app-widget.html` (or a descriptive name like `./travel-map.html`). 8. Tell the user where the file is and how to open it in a browser to preview. ## HTML template ALL widget logic