Create MCP App: build interactive UIs inside MCP-enabled hosts (short listing)
Construire des MCP Apps — un outil MCP plus une ressource HTML embarquée avec gestionnaires de cycle de vie, templates de frameworks (React/Vue/Svelte/Vanilla) et patterns de polling, streaming, CSP et plein écran
- Quoi
- Construire des MCP Apps — un outil MCP plus une ressource HTML embarquée avec gestionnaires de cycle de vie, templates de frameworks (React/Vue/Svelte/Vanilla) et patterns de polling, streaming, CSP et plein écran
- Coût
- Gratuit
- Prérequis
- un projet de serveur MCP (ou un nouveau) et le SDK @modelcontextprotocol/ext-apps — le skill est un guide que l'agent suit, pas un logiciel à installer
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — fiche courte (le repo ne déclare aucune licence, donc aucun contenu n'est reproduit) : le guide officiel de @modelcontextprotocol pour construire des MCP Apps — des interfaces interactives qui tournent dans les hôtes compatibles MCP comme Claude Desktop. Le concept central : chaque MCP App est un outil plus une ressource HTML, liés par le `_meta.ui.resourceUri` de l'outil — l'hôte appelle l'outil, affiche l'UI de la ressource, le serveur renvoie le résultat, et l'UI le reçoit. Couvre le choix de framework (React avec hook `useApp`, vanilla JS, Vue/Svelte/Preact/Solid avec cycle de vie manuel), le setup pour serveurs MCP existants ou nouveaux, les templates de frameworks à cloner depuis le repo du SDK, les références API (gestionnaires de classe App, helpers d'enregistrement serveur, types de spec, theming), et les patterns avancés : outils app-only, dashboards de polling, réponses chunkées, ressources binaires, requêtes réseau avec config CSP, contexte hôte (thème, polices, safe areas), mode plein écran, streaming d'entrées, récupération d'état de vue, plus les erreurs courantes (fallback texte manquant, mauvaise config CSP, handlers enregistrés après connect) et les tests locaux avec l'exemple basic-host. Bémols honnêtes : vous construirez contre un SDK vivant — le guide attend que vous cloniez le repo du SDK pour les exemples et la JSDoc, et que vous emballiez les UI avec vite-plugin-singlefile ; licence non déclarée par le repo source — fiche courte avec lien uniquement, rien copié. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet de serveur MCP (ou un nouveau) et le SDK @modelcontextprotocol/ext-apps — le skill est un guide que l'agent suit, pas un logiciel à installer Installe-moi « Créer une MCP App : construire des interfaces interactives dans les hôtes MCP ». Il donne à mon agent le guide officiel de @modelcontextprotocol pour construire des MCP Apps : le concept central outil-plus-ressource-HTML, les templates de frameworks (React, vanilla, Vue/Svelte/Preact/Solid), les références API, et les patterns avancés (outils app-only, polling, streaming, CSP, contexte hôte, plein écran, récupération d'état). IMPORTANT : le repo ne déclare aucune licence — récupérer depuis le lien seulement, et ne rien reproduire au-delà du lien. Dépôt : https://github.com/modelcontextprotocol/ext-apps/blob/main/plugins/mcp-apps/skills/create-mcp-app/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Examine les fichiers à la recherche de commandes suspectes ou d'une gestion d'identifiants douteuse ; arrête-toi sur tout signal d'alerte et ne présume jamais que le dépôt est sûr. Dis-le-moi si quelque chose semble anormal. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « create-mcp-app ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. cloner le repo du SDK pour les templates de frameworks et la JSDoc ; décider du framework et si c'est un nouveau serveur ou un ajout). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.