create-mcp-app

This skill provides comprehensive guidance and scaffolding for developers building Model Context Protocol (MCP) Apps. An MCP App enhances standard MCP tools by pairing them with a dedicated HTML-based user interface, allowing for rich, interactive experiences directly within LLM-enabled hosts like Claude Desktop. This skill is intended for software engineers and developers looking to bridge the gap between backend tool logic and front-end data visualization.

Key features and capabilities include:

• Architectural guidance on the Tool + Resource pattern: leveraging _meta.ui.resourceUri to bind backend tools to interactive web UIs.
• Framework support: implementation patterns for React (including the dedicated useApp hook), Vanilla JS, Vue, Svelte, Preact, and Solid.
• Lifecycle management: handling tool inputs, streaming partial results, host context changes, and component teardown routines.
• Asset bundling: best practices for using vite-plugin-singlefile to package HTML resources for seamless host integration.
• Advanced interaction patterns: polling, binary resource handling, streaming inputs with tool-call transparency, and real-time model context updates.

Practical usage notes and constraints:

• Getting started: Use the provide command patterns to clone the official ext-apps SDK repository to access reference templates and API definitions.
• Dependencies: Always install dependencies such as @modelcontextprotocol/ext-apps, @modelcontextprotocol/sdk, and zod via npm to ensure compatibility; avoid hardcoding version numbers.
• Development setup: Utilize tsx for executing TypeScript servers and ensure your project structure aligns with the provided framework-specific boilerplate (server.ts and client-side app files).
• Performance: For complex or large datasets, implement streaming and visibility-based pausing to optimize host resource consumption.
• Context awareness: Use sendMessage and updateModelContext to maintain bidirectional communication between your UI and the LLM host, ensuring that user actions on the canvas or UI are correctly reflected in the model's state.