Tyler-R-Kendrick/mcp-apps
skills/ai/mcp-apps/SKILL.md
Use when building MCP Apps that serve interactive UI from MCP servers. Covers the ui:// URI scheme, HTML rendering in sandboxed iframes, and bidirectional communication between UI and host. USE FOR: rich UI in agent conversations, interactive dashboards from MCP servers, sandboxed iframe rendering DO NOT USE FOR: basic tool responses without UI (use mcp), agent communication (use a2a), full web applications
$ install --global
skillsauthnpx skillsauth add Tyler-R-Kendrick/agent-skills mcp-appsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 10, 2026, 4:52 AM11.4s12 files scanned
SKILL.md
- name:
- mcp-apps
- description:
- |
- Use when building MCP Apps that serve interactive UI from MCP servers. Covers the ui:
- // URI scheme, HTML rendering in sandboxed iframes, and bidirectional communication between UI and host.
- USE FOR:
- rich UI in agent conversations, interactive dashboards from MCP servers, sandboxed iframe rendering
- DO NOT USE FOR:
- basic tool responses without UI (use mcp), agent communication (use a2a), full web applications
- license:
- MIT
- displayName:
- MCP Apps
- author:
- Tyler-R-Kendrick
- compatibility:
- claude, copilot, cursor
- - title:
- MCP GitHub Repository
- url:
- https://github.com/modelcontextprotocol
MCP Apps
Overview
MCP Apps is an extension to the Model Context Protocol that lets MCP servers return rich, interactive user interfaces instead of plain text. When a tool declares a UI resource, the host renders it in a sandboxed iframe, and users interact with it directly in the conversation. Supported by Claude, VS Code, Goose, and Postman.
How It Works
MCP Server Host (Claude, VS Code)
│ │
│◄── tool call ─────────────────│
│── tool result + ui resource ─►│
│ │── render iframe ──► User
│◄── JSON-RPC messages ────────│◄── user interaction
- A tool declares a
uifield referencing aui://resource - The host calls the tool and receives the result with a UI reference
- The host fetches the UI content and renders it in a sandboxed iframe
- The UI communicates with the host via JSON-RPC over
postMessage
Declaring UI in a Tool
{
"name": "render_dashboard",
"description": "Display an interactive dashboard",
"inputSchema": {
"type": "object",
"properties": {
"data": { "type": "object" }
}
},
"ui": {
"uri": "ui://dashboard",
"title": "Dashboard"
}
}
UI Resource
The server registers a UI resource that returns HTML:
@mcp.resource("ui://dashboard")
def dashboard() -> str:
return """
<!DOCTYPE html>
<html>
<body>
<h1>Dashboard</h1>
<div id="chart"></div>
<script>
// Communicate with the host via JSON-RPC
window.addEventListener('message', (event) => {
const { method, params } = event.data;
if (method === 'initialize') {
renderChart(params.data);
}
});
</script>
</body>
</html>
"""
URI Scheme
MCP Apps use the ui:// URI scheme:
ui://dashboard— predeclared UI template- Only
text/htmlcontent is supported in the initial specification - External URLs, remote DOM, and native widgets are deferred to future versions
Security Model
| Layer | Protection |
|-------|-----------|
| Iframe sandbox | Restricted permissions (no top-level navigation, no same-origin access) |
| Predeclared templates | Hosts can review UI templates before rendering |
| Auditable messages | All UI-to-host communication goes through loggable JSON-RPC |
| Content restrictions | Only text/html from the MCP server, no external URLs |
Communication
The iframe and host communicate via postMessage with JSON-RPC:
// UI → Host: request data
window.parent.postMessage({
jsonrpc: "2.0",
method: "getData",
params: { query: "sales" },
id: 1
}, "*");
// Host → UI: send data
window.addEventListener("message", (event) => {
const response = event.data;
if (response.id === 1) {
updateDisplay(response.result);
}
});
Best Practices
- Keep UI self-contained — all HTML, CSS, and JS in a single resource since external URLs are not supported.
- Use the JSON-RPC
postMessagebridge for all data exchange between UI and host. - Design for the iframe sandbox restrictions — no
localStorage, no cookies, no top-level navigation. - Provide a meaningful
titlein the UI declaration for accessibility. - Keep UIs lightweight — they render inline in a conversation, not as full-page apps.
- Fall back gracefully to text content if the host does not support MCP Apps.
Related Skills
Tyler-R-Kendrick/design-system
tools
VerifiedTrustedCommunity
Use when building or maintaining a design system — the coordinated set of design tokens, component libraries, documentation, and tooling that ensures visual and behavioral consistency across products. USE FOR: design system architecture, choosing token formats vs component frameworks, connecting Figma to code, design-to-development workflows, multi-platform consistency DO NOT USE FOR: specific token authoring (use design-tokens), Figma workflows (use figma), component cataloging (use storybook), token transformation (use style-dictionary), cross-framework components (use mitosis)
10SKILL.mdUpdated Jun 10, 2026
Tyler-R-Kendrick/x402
tools
VerifiedTrustedCommunity
Use when implementing the x402 protocol for HTTP-native micropayments. Covers server middleware, client payment flows, facilitator integration, and stablecoin payments for APIs and AI agents. USE FOR: API micropayments, monetizing endpoints, stablecoin HTTP payments, automated agent payments for API access DO NOT USE FOR: full commerce flows with cart/checkout (use ap2), agent communication (use a2a), tool integration (use mcp)
10SKILL.mdUpdated Jun 10, 2026
Tyler-R-Kendrick/mcp
tools
VerifiedTrustedCommunity
Use when implementing or integrating with the Model Context Protocol (MCP) for AI tool servers, resources, prompts, and context management. USE FOR: building MCP tool servers, exposing resources to agents, prompt templates, connecting agents to external APIs DO NOT USE FOR: agent-to-agent communication (use a2a), interactive UI rendering (use mcp-apps), agent payments (use x402 or ap2)
10SKILL.mdUpdated Jun 10, 2026
Tyler-R-Kendrick/learn
data-ai
VerifiedTrustedCommunity
Use when a user corrects, rejects, edits, or redirects an LLM/agent response and the correction should become a reusable reasoning strategy. Converts feedback into generalized learnings for ~/.agents/STEERING.md with linked RDF/Turtle evidence. USE FOR: user corrections, preference feedback, rejected agent behavior, reasoning strategy updates, steering file maintenance DO NOT USE FOR: storing task facts (use memory), ordinary skill authoring (use agent-skills), project instruction files unrelated to feedback (use agents-md)
10SKILL.mdUpdated Jun 10, 2026