create-mcp-app_skill

Overview

This skill helps you create MCP Apps: interactive HTML UIs paired with MCP tools that run inside MCP-enabled hosts (for example Claude Desktop). It guides framework selection, registering tools and UI resources, lifecycle handlers, host styling integration, and best practices for streaming, visibility, and testing. Use it when you need concrete patterns, reference code locations, or step-by-step integration advice.

How this skill works

The MCP App pattern requires two linked parts: a tool that the host or LLM calls to return data, and a bundled HTML resource that renders an interactive UI. The tool must include _meta.ui.resourceUri pointing to the registered resource so the host can render the UI and deliver tool results to the client. The skill explains server registration, client lifecycle handlers (ontoolinput, ontoolinputpartial, ontoolresult, onhostcontextchanged, onteardown), and resource bundling with a single-file build.

When to use it

• You want to add an interactive UI to an existing MCP tool or build a new MCP App server.
• You need guidance on registering tools and resources and linking them via _meta.ui.resourceUri.
• You plan to stream partial input or progressively render large tool arguments.
• You need host styling, safe-area handling, or fullscreen integration for consistent UI.
• You are testing MCP Apps locally or want recommended dev tooling and bundling.

Best practices

• Register all app handlers before calling app.connect() to avoid missed events.
• Bundle the UI into a single HTML file using vite-plugin-singlefile for resource registration.
• Use ontoolinputpartial for streaming inputs and show progressive UI updates.
• Respect host style variables, fonts, and safeAreaInsets via provided helpers or React hooks.
• Pause heavy work (WebGL, polling, animations) when the view is out of viewport using IntersectionObserver.
• Provide a content fallback array so non-UI hosts still receive text output.

Example use cases

• A code-preview tool that streams generated code via ontoolinputpartial and renders on completion.
• A data explorer that calls server tools interactively (callServerTool pattern) and updates view state.
• A WebGL shader viewer that pauses rendering when scrolled out of view and supports fullscreen toggle.
• A monitoring dashboard that polls server metrics and manages intervals on visibility changes.
• A transcript tool that updates model context in the background and allows user-initiated messages.