YouTube MCP Apps

Ce qu'il fait

YouTube MCP Apps est une implémentation de référence démontrant comment construire des MCP Apps avec des composants d'interface utilisateur personnalisés dans VS Code Insiders. Il propose un serveur MCP avec trois outils de l'API de données YouTube et deux applications d'interface utilisateur interactives — video-render et channel-profile — regroupées sous forme d'applications HTML à fichier unique via Vite. Idéal pour les développeurs apprenant à créer, servir et consommer des MCP Apps.

Caractéristiques clés

• application video-render — affiche une carte vidéo YouTube avec le titre, la description, la miniature et des liens directs
• application channel-profile — affiche les statistiques de la chaîne (abonnés, vues, miniatures) aux côtés de la dernière vidéo
• Trois outils YouTube — get-video (recherche par requête), get-channel (infos chaîne + stats), get-latest-video (dernier upload d'une chaîne)
• Transport HTTP — le serveur s'exécute sur http://localhost:3001/mcp, facilement consommable par le client MCP de VS Code
• Regroupement Vite en fichier unique — chaque application d'interface utilisateur est compilée en un fichier HTML autonome via vite-plugin-singlefile

Installation

VS Code Insiders : Ajoutez à votre fichier .vscode/mcp.json :

{
  "servers": {
    "youtube-mcp": {
      "url": "http://localhost:3001/mcp"
    }
  }
}

Puis clonez le dépôt, ajoutez votre YOUTUBE_API_KEY au fichier .env, et exécutez npm run build && npm run serve.

Claude Desktop (depuis la source) :

{
  "mcpServers": {
    "youtube-mcp": {
      "command": "npx",
      "args": ["tsx", "/path/to/mcp-apps/src/server.ts"]
    }
  }
}

Hôtes supportés

Principalement VS Code Insiders (rendu UI MCP Apps). Fonctionne également comme un serveur MCP classique dans Claude Desktop.