Interactive Slides MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Trois modes : Slide Deck, Scroll Story, Interactive Deck
HTML autonome : un fichier, n'importe quel navigateur
Animations GSAP, polices Google, Chart.js (CDN)
Navigation : clavier/clic/toucher/glisser/molette de défilement
Exportation .pptx facultative via pptxgenjs

Démo en direct

Aperçu en pratique

interactive-slides-skill.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "interactive-slides-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

{
  "context_servers": {
    "interactive-slides-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/sylvial928/interactive-slides",
          "~/.claude/skills/interactive-slides"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add interactive-slides-skill -- git clone https://github.com/sylvial928/interactive-slides ~/.claude/skills/interactive-slides

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Interactive Slides

Transformez une page d'une page en une présentation pour les investisseurs

👤 Les fondateurs et les PM élaborent des pitchs ⏱ ~30 min beginner

Quand l'utiliser : Vous avez le contenu ; vous voulez la forme d'un vrai deck en quelques minutes.

Prérequis

Node + pptxgenjs (facultatif, uniquement pour l'export .pptx) — npm je -g pptxgenjs
Compétence installée — git clone dans ~/.claude/skills/interactive-slides

Déroulement

Invoquer la compétence

/interactive-slides — mode : Slide Deck. Contenu : <une page>. Thème : minimal dark.✓ Copié

→ Génère deck.html ; s'ouvre dans le navigateur
Itérer les sections

Ajoutez une section « Traction » avec un graphique linéaire pour MRR.✓ Copié

→ Graphique linéaire Chart.js rendu dans une diapositive
Exporter .pptx

Exporter sous pitch.pptx.✓ Copié

→ .pptx modifiable enregistré ; texte entièrement modifiable dans PowerPoint

Résultat : Un deck dont vous pouvez faire une démonstration aujourd'hui et l'envoyer par courrier électronique au format .pptx demain.

Pièges

Le .pptx exporté manque d'animations — Les animations HTML ne font pas d'aller-retour ; conserver le HTML pour les discussions en direct, .pptx pour les transferts

Combiner avec : mcp-echarts

Créer un explicateur d'histoire par défilement

👤 Rédacteurs techniques et spécialistes du marketing ⏱ ~60 min intermediate

Quand l'utiliser : Vous voulez une pièce longue de style moyen avec des visuels déclenchés par défilement.

Déroulement

Choisissez le mode

Mode : Défiler l'histoire. Contenu : cet article. Ajoutez des graphiques et des visuels déclenchés par défilement.✓ Copié

→ Le résultat est une page défilante avec des sections épinglées par GSAP
Ajuster le rythme

Ralentissez le défilement des épingles dans la section « Problème ».✓ Copié

→ Chronologie du gommage ajustée

Résultat : Un morceau de parchemin engageant que vos lecteurs terminent réellement.

Pièges

Surcharge d'effets — Une animation par section ; le repos devrait être calme

Deck de démonstration interactif pour un atelier

👤 Enseignants et DevRel organisant des ateliers ⏱ ~90 min intermediate

Quand l'utiliser : Vous voulez des diapositives avec de petits exercices interactifs en ligne.

Déroulement

Mode : Interactif

Mode : Deck interactif. Intégrez un champ de saisie + Chart.js qui se met à jour en direct.✓ Copié

→ Elément interactif filaire ; mises à jour du graphique lors de la saisie
Ajouter un sondage

Ajoutez une diapositive « Choisissez-en un » qui enregistre les clics localement et correspond.✓ Copié

→ Mises à jour des compteurs locaux uniquement en un clic

Résultat : Un deck au ressenti live sans backend.

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

interactive-slides-skill + mcp-echarts

Produire des graphiques via ECharts et les intégrer dans le deck

Rendre le graphique des revenus avec mcp-echarts au format SVG ; intégrer dans la diapositive « Traction ».✓ Copié

interactive-slides-skill + claude-code-design-skills

Appliquer des jetons de marque au thème du deck

Utilisez les jetons brand-acme pour la palette et le type de deck.✓ Copié

interactive-slides-skill + magic-ui-mcp

Composants d'interface utilisateur sélectionnés pour le mode Interactive Deck

Mode interactif : utilisez un chapiteau Magic UI pour la diapositive des logos de confiance.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
/interactive-slides (SKILL)	mode + content + theme	Chaque fois que vous avez besoin d'un deck ou d'une histoire déroulante à partir d'un contenu que vous possédez déjà	0

Coût et limites

Coût d'exécution

Quota d'API: Aucune
Tokens par appel: Modéré : le contenu du deck est long en HTML
Monétaire: Gratuite
Astuce: Gardez la prose par diapositive sous 80 mots ; sinon, les decks gonflent vite.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Aucune

Sortie de données : GSAP, Google Fonts, Chart.js se chargent à partir du CDN. Si vous avez besoin d'être entièrement hors ligne, demandez à la compétence d'intégrer les bibliothèques.

Les dépendances CDN signifient que les destinataires ont besoin d'un réseau pour visualiser les animations. Pour les démos à air isolé, demandez une version en ligne.
Les decks interactifs stockent l’état dans localStorage ; notez si le deck sera partagé publiquement.

Dépannage

Erreurs courantes et correctifs

Les diapositives n'avancent pas sur les touches fléchées

Assurez-vous que l'auditeur du clavier est lié ; certains navigateurs bloquent lorsque le fichier HTML est servi à partir de file://. Essayez un serveur local : python3 -m http.server.

Vérifier : Open dev console; inspect keyup handler

.pptx exporte les animations manquantes

Les animations sont uniquement en HTML ; .pptx exporte le texte + la mise en page. Utilisez HTML pour le direct ; .pptx pour le transfert des e-mails.

Vérifier : Open the .pptx in PowerPoint; check layout only

Les polices ne semblent pas correctes hors ligne

Demandez à la compétence d'intégrer @font-face avec des URI de données base64 pour une utilisation hors ligne.

Vérifier : Open airplane-mode; load the HTML

Alternatives

Interactive Slides vs autres

Alternative	Quand l'utiliser	Compromis
mck-ppt-design-skill	Vous voulez des diapositives .pptx de style consultation, pas du HTML	Moins interactif ; plus de polissage par glissement
mermaid-skill	Vous avez besoin de diagrammes, pas d'un deck	Artefact différent
markmap-mcp-server	Une carte mentale s'adapte mieux qu'un deck	Forme narrative différente

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills