mcp-apps
Generate MCP App widgets for MCP tools. Produces self-contained HTML widgets using the MCP Apps protocol.
pinned to #eec8eceupdated 2 weeks 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
2 weeks ago
Latest release
published
- #claude-code-plugin
- #claude-code-skills
- #code-apps
- #github-copilot-plugin
- #power-apps
- #power-pages
- #power-platform
Evaluation report
WarningsAutomated checks the publisher passed at publish time — structure, docs, safety, and whether the artifact behaves as claimed.eec8ece· 2 weeks ago
Kind-specific
31Plugin: manifest fields complete
Plugin: 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: bundle shape
empty bundle
Plugin: manifest location
manifest at plugin.json
Release history
1- releasecurrenteec8ecewarn2 weeks 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
beagle-ai
Pydantic AI, LangGraph, DeepAgents, and Vercel AI SDK skills for building and reviewing AI applications.
beagle-docs
Documentation quality, generation, and improvement using Diataxis principles. Pairs with beagle-core for full workflow.
mega-brain
OKF-powered knowledge context for Claude Code — injects your project knowledge base at every session
mh install plugins/mcp-apps