Add generate-mcp-app skill for MCP Apps widget generation#55
Merged
akshay-viz merged 9 commits intomicrosoft:mainfrom Apr 17, 2026
Merged
Add generate-mcp-app skill for MCP Apps widget generation#55akshay-viz merged 9 commits intomicrosoft:mainfrom
akshay-viz merged 9 commits intomicrosoft:mainfrom
Conversation
New plugin that generates self-contained MCP App widgets (HTML) from tool output. Includes skill template, API reference, design guidelines, and a sample widget.
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new mcp-apps plugin that defines a /generate-mcp-app skill for generating self-contained MCP App widget HTML from MCP tool outputs, along with supporting references, guidelines, a sample widget, and marketplace registration.
Changes:
- Introduces the
generate-mcp-appskill with an HTML template and generation/refinement rules. - Adds MCP Apps technical reference + widget design guidelines + a sample widget HTML.
- Registers the new plugin in
.claude-plugin/marketplace.jsonand adds plugin metadata/README.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| plugins/mcp-apps/skills/generate-mcp-app/SKILL.md | New skill definition and generation template for MCP App widgets. |
| plugins/mcp-apps/references/mcp-apps-reference.md | New technical reference for MCP Apps API, theming, CDN/library patterns, and type-safety guidance. |
| plugins/mcp-apps/references/design-guidelines.md | New visual/design guidelines for widgets (loading/data/error states, tokens, interactions). |
| plugins/mcp-apps/samples/flight-status-widget.html | New sample widget implementation demonstrating theming and rendering. |
| plugins/mcp-apps/README.md | New plugin README describing usage and structure. |
| plugins/mcp-apps/.claude-plugin/plugin.json | New plugin metadata for Claude marketplace/plugin discovery. |
| .claude-plugin/marketplace.json | Registers mcp-apps plugin in the marketplace list. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
akshay-viz
reviewed
Mar 24, 2026
akshay-viz
reviewed
Mar 24, 2026
akshay-viz
reviewed
Mar 24, 2026
HemantGaur
reviewed
Apr 6, 2026
HemantGaur
reviewed
Apr 6, 2026
HemantGaur
reviewed
Apr 6, 2026
HemantGaur
reviewed
Apr 6, 2026
HemantGaur
reviewed
Apr 6, 2026
HemantGaur
reviewed
Apr 6, 2026
HemantGaur
reviewed
Apr 6, 2026
HemantGaur
reviewed
Apr 6, 2026
HemantGaur
reviewed
Apr 6, 2026
HemantGaur
reviewed
Apr 6, 2026
HemantGaur
reviewed
Apr 6, 2026
HemantGaur
reviewed
Apr 6, 2026
Text on brand backgrounds must use colorNeutralForegroundOnBrand (white), not colorNeutralForeground1 (dark). Prevents unreadable dark-on-blue text.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 10 changed files in this pull request and generated 7 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
priyanshu92
approved these changes
Apr 7, 2026
…idelines Body padding changed from 16px to 24px per official Copilot UX guidelines. Generalized CDN library references in mcp-apps-reference.md and eval assertions. The UMD global collision pattern is preserved with generic placeholder names. Eval results confirm no regression (9.92/10 avg, 53/53 pass all layers).
…on/License Renamed skill from generate-mcp-app to generate-mcp-app-ui to avoid confusion with create-mcp-app in the ext-apps repo. Added else branch in ontoolresult template to call renderError when structuredContent is missing (prevents infinite loading spinner). Added Installation and License sections to README. Reordered examples in SKILL.md. Added weather sample to eval runbook related files. Eval results: 9.75/10 avg (no regression from 9.77 baseline).
akshay-viz
approved these changes
Apr 10, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 10 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
akshay-viz
approved these changes
Apr 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
mcp-appsplugin with thegenerate-mcp-app-uiskillWhat's included
plugins/mcp-apps/skills/generate-mcp-app-ui/SKILL.md- Skill definitionplugins/mcp-apps/references/mcp-apps-reference.md- MCP Apps API, CDN patterns, data type safetyplugins/mcp-apps/references/design-guidelines.md- Visual design defaults and theme tokensplugins/mcp-apps/samples/flight-status-widget.html- Sample widget (ext-apps + Fluent only)plugins/mcp-apps/.claude-plugin/plugin.json- Plugin metadataplugins/mcp-apps/README.md- Install and usage docsTesting
Evaluated across 53 widget types (maps, charts, dashboards, cards, tables, timelines, and more). 53/53 pass all 13 assertion checks, 53/53 render with content in Playwright tests, 0 JS errors, 9.8/10 average UX score.