How do I link a tool to a UI resource?

You link them by setting the tool's _meta.ui.resourceUri property to match the URI of the registered HTML resource on your MCP server.

Which frontend frameworks are supported?

The skill provides templates and SDK support for React, Vue, Svelte, Preact, Solid, and Vanilla JavaScript, including framework-specific hooks like useApp for React.

An MCP App is a specialized MCP server that pairs a tool with an HTML resource to provide an interactive user interface within supported AI hosts like Claude Desktop.

How does theme integration work?

The SDK automatically maps host theme properties to CSS variables (like --color-background-primary), allowing your app to match the look and feel of the AI host.

Can I stream data to my MCP App UI?

Yes, using the ontoolinputpartial handler, your application can receive and render 'healed' partial JSON data progressively as the LLM generates it.

Create MCP App

Name: Create MCP App
Author: modelcontextprotocol

bymodelcontextprotocol

•

1,691

•

Developer Tools

Scaffolds and builds interactive user interfaces for Model Context Protocol (MCP) servers using specialized SDK patterns.

This skill provides comprehensive guidance and scaffolding for developers building MCP Apps—specialized MCP servers that combine traditional tools with embedded HTML user interfaces. It streamlines the integration process between AI hosts and interactive views by offering framework-specific templates, lifecycle management patterns, and host-aware styling, enabling the creation of rich, visual experiences like dashboards, charts, and custom forms directly within AI chat interfaces.

Key Features

01Automated tool-to-resource linking via the MCP Apps protocol spec

021,691 GitHub stars

03Lifecycle management for resource connectivity, safe areas, and display modes

04Native host styling integration using CSS variables and theme detection

05Scaffolding for React, Vue, Svelte, and Vanilla JS MCP apps

06Streaming partial input support for real-time UI updates during LLM generation

Use Cases

01Creating specialized configuration forms for complex tool arguments within Claude Desktop

02Building a progressive UI that renders streaming LLM output in real-time

03Adding a custom interactive dashboard or data visualization to an existing MCP server

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add modelcontextprotocol/ext-apps create-mcp-app

For use in Claude.ai and ChatGPT

Download Skill