mcp-apps
Generate MCP App widgets for MCP tools. Produces self-contained HTML widgets using the MCP Apps protocol.
pinned to #eec8eceupdated 3 months ago
Ask your AI client: “install plugins/mcp-apps”.
Requires the metahub MCP server installed in your client. Set up MCP.
mh install plugins/mcp-appsmetahub onboarded this repo on the author's behalf.
If you own github.com/microsoft/power-platform-skills on GitHub, claim the listing to take over publishing. Your claim preserves the existing eval history and badges; only the curator label is replaced with verified-publisher on your next publish.
Stars
436
Last commit
3 months ago
Latest release
published
- #claude-code-plugin
- #claude-code-skills
- #code-apps
- #github-copilot-plugin
- #power-apps
- #power-pages
- #power-platform
Automated checks the publisher passed at publish time — structure, docs, safety, and whether the artifact behaves as claimed.eec8ece· 3 months ago
Kind-specific
3 passed1 warningPlugin: bundled artifacts presentwarn
Couldn't find a skills/ subdir or an MCP server config inside the plugin
A plugin is most useful when it bundles ≥ 1 skill or an MCP server.
Plugin: manifest fields complete
Plugin: bundle shape
empty bundle
Plugin: manifest location
manifest at plugin.json
Release history
1- releasecurrenteec8ecewarn3 months ago
Contents
Generate interactive MCP App widgets for MCP tools using Claude Code or Visual Studio Code.
Installation
From the marketplace
/plugin marketplace add microsoft/power-platform-skills
/plugin install mcp-apps@power-platform-skills
From a local clone
claude --plugin-dir /path/to/power-platform-skills/plugins/mcp-apps
What it does
Describe the visual you want, paste your tool's JSON output, and get a self-contained HTML widget that uses the MCP Apps protocol. The widget works in any MCP Apps host (Claude, ChatGPT, VS Code, Microsoft 365 Copilot).
Usage
- Test your custom tool and copy the JSON output (make sure your tool's output is set to JSON)
- Run
/generate-mcp-app-uiand describe the visual you want, pasting your tool's test output
Example
/generate-mcp-app-ui Show travel attractions on an interactive map
Here's my tool's test output:
{"attractions":[{"name":"Space Needle","latitude":47.6205,"longitude":-122.3493,"description":"Observation tower"},{"name":"Pike Place Market","latitude":47.6097,"longitude":-122.3425,"description":"Historic public market"}]}
Refining
After generating, describe changes in the chat:
- "Make it more colorful"
- "Add a chart"
- "Switch to a card layout"
What it produces
A single HTML file that:
- Uses the MCP Apps protocol (
@modelcontextprotocol/ext-apps) - Includes Fluent UI components for a polished look
- Supports light and dark themes automatically
- Loads everything from CDN (no build step, no dependencies)
Skill structure
skills/generate-mcp-app-ui/SKILL.md - Main skill
references/mcp-apps-reference.md - MCP Apps API, Fluent UI components, CDN patterns
references/design-guidelines.md - Visual design defaults, theme tokens
samples/flight-status-widget.html - Example widget (read-only)
samples/weather-refresh-widget.html - Example widget with callServerTool (interactive)
Evals
53 eval test cases covering different widget types (maps, charts, dashboards, tables, cards, etc.) plus type-mismatch stress tests. See evals/mcp-apps/generate-mcp-app-ui/ for the eval definitions and eval-runbook.md for how to run them.
License
See the LICENSE file for license information.
Reviews
No reviews yet. Be the first.
Related
ponytail
Lazy senior dev mode. Forces the simplest, shortest solution that actually works: YAGNI, stdlib first, no unrequested abstractions.
agentic-bundle-aas-accessibility-inclusive-ux
Editorial "AAS Accessibility & Inclusive UX" bundle for Claude Code from Agentic Awesome Skills.
agentic-awesome-skills
Plugin-safe Claude Code distribution of Agentic Awesome Skills with 1,894 supported skills.
mh install plugins/mcp-apps