create-mcp-app

Scaffold MCP applications integrating tools with HTML resources for interactive UIs.

2|4|Updated Feb 26, 2026
One-click install
npx skills add https://github.com/LinkedInLearning/building-mcp-apps-8233016 --skill create-mcp-app-linkedinlearning
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: create-mcp-app
Source: https://github.com/LinkedInLearning/building-mcp-apps-8233016/tree/main/.claude/skills/create-mcp-app
Command: npx skills add https://github.com/LinkedInLearning/building-mcp-apps-8233016 --skill create-mcp-app-linkedinlearning

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @modelcontextprotocol/ext-apps, @modelcontextprotocol/sdk, zod, tsx, and includes references (resource) components.

What problem does it solve?

This Skill provides guidance and tools to build interactive user interfaces (UIs) that can be embedded directly within MCP-enabled applications, allowing for richer user experiences beyond simple text-based interactions.

Core Features & Use Cases

  • MCP App Development: Scaffold and build MCP Apps by combining MCP tools with HTML resources.
  • UI Integration: Design and implement interactive UI elements that run inside MCP hosts like Claude Desktop.
  • Framework Support: Offers guidance for various frameworks including React, Vanilla JS, Vue, Svelte, Preact, and Solid.
  • Use Case: Develop a real-time data visualization dashboard that updates dynamically within a chat interface, triggered by user actions on the dashboard itself.

Quick Start

Use the create-mcp-app skill to scaffold a new MCP App using the React framework.

Frequently Asked Questions about create-mcp-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build interactive UIs for Model Context Protocol apps?

To build interactive MCP apps, you integrate MCP tools with HTML resources using the MCP Apps SDK, allowing dynamic user interfaces to run directly inside MCP hosts like Claude Desktop.

Can I use React to create an MCP app with an embedded user interface?

Yes, you can create an MCP app using React, alongside other supported frameworks like Vanilla JS, Vue, Svelte, Preact, and Solid for building the embedded interactive UI elements.

What is the best way to scaffold a Model Context Protocol application?

The best way to scaffold a Model Context Protocol application is using the create-mcp-app skill, which guides tool and resource registration, lifecycle management, and Vite bundling for TypeScript server execution.

Do I need TypeScript and Vite to develop MCP applications?

Yes, developing MCP applications requires TypeScript for server execution and Vite for bundling, while also relying on the MCP Apps SDK and Zod for tool integration and UI validation.

How does an MCP app integrate with a host like Claude Desktop?

An MCP app integrates with a host like Claude Desktop by registering tools and HTML resources that render interactive UI elements, supporting lifecycle management and host styling integration for seamless embedding.

What are the limitations when building interactive apps for MCP hosts?

When building interactive apps for MCP hosts, limitations include needing specific lifecycle management and host styling integration, as the apps run embedded within chat interfaces rather than standalone browser environments.