MCP App Playground

Ce qu'il fait

MCP App Playground est une collection de plus de 50 modèles d'applications MCP autonomes — des composants interactifs HTML/TypeScript/CSS qui rendent les résultats d'outils à l'intérieur d'iframes dans Claude et d'autres hôtes IA. Chaque modèle est construit sur le SDK officiel @modelcontextprotocol/ext-apps et démontre comment afficher des réponses d'API réelles (commits GitHub, messages Slack, tableaux de bord analytiques, produits Shopify, contrôles Tesla, et plus encore) sous forme d'interfaces utilisateur polies et interactives plutôt que sous forme de texte brut.

Le playground est livré avec un serveur MCP local vers lequel vous pointez votre client IA : invoquez les outils de démo et voyez exactement comment chaque application s'affiche et se comporte — aucun identifiant d'API réel ou backend n'est nécessaire.

Caractéristiques clés

• Plus de 50 modèles d'exemples couvrant GitHub, Slack, Google Analytics, Shopify, Datadog, Notion, Spotify, Vercel, Brightdata, et plus encore
• Serveur de prévisualisation local — lancez http://localhost:4311 avec des données fictives pour itérer instantanément sur l'UI
• Point de terminaison MCP hébergé — http://localhost:3001/mcp pour une intégration hôte en direct pendant le développement
• Modèle de base — starter d'opinion avec mode sombre, mise en page responsive, contexte de l'hôte (thème/polices/mode d'affichage), aides anti-XSS et échafaudage complet du gestionnaire d'événements du SDK
• Prompts de développement assistés par IA — prompts optimisés pour Cursor et les agents afin de générer de nouveaux modèles à partir de response.json ou de spécifications OpenAPI
• Aucun build requis — npx @apigene/mcp-app-playground démarre tout sans clonage

Installation

**Exécution instantanée (sans installation) :

npx @apigene/mcp-app-playground

**Claude Desktop (connexion au serveur MCP local) :

{
  "mcpServers": {
    "mcp-app-playground": {
      "command": "npx",
      "args": ["@apigene/mcp-app-playground", "mcp", "stdio"]
    }
  }
}

Cursor : Référez-vous au fichier docs/CURSOR_PROMPT_MCP_APP_SIMPLE.md du projet pour les flux de création de modèles assistés par IA.

Hôtes supportés

Claude Desktop (principal), Cursor (via prompts d'agent IA), MCPJam. Fonctionne avec tout hôte supportant les ressources ui:// d'applications MCP.