mcp-mcp-apps-kit
OfficialGuide to building MCP Apps UI extensions.
AuthorAndurilCode
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides comprehensive guidance for implementing MCP Apps (SEP-1865) — an extension to MCP that enables servers to deliver interactive HTML-based UIs alongside tool results in host environments like Claude Desktop or ChatGPT.
Core Features & Use Cases
- Guidance on defining UI resources with ui:// URIs, linking tools to UI via _meta.ui, and implementing bidirectional JSON-RPC messaging.
- Lifecycle, security, and host-context integration patterns for common MCP Apps scenarios (dashboards, forms, visualizations).
- Real-world use cases and best practices for building interactive MCP Apps that work across hosts.
Quick Start
Use the mcp-apps-builder skill to scaffold a new MCP App:
- Run: npx @mcp-apps-kit/create-app@latest my-app
- Change directory: cd my-app
- Start development: npm run dev
- Or manually set up a file-based project:
- npm install @mcp-apps-kit/core @mcp-apps-kit/codegen zod
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: mcp-mcp-apps-kit Download link: https://github.com/AndurilCode/mcp-apps-kit/archive/main.zip#mcp-mcp-apps-kit Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.