Interactive Slides MCP — Use Cases, Install & Live Demo

Why use it

Key features

Three modes: Slide Deck, Scroll Story, Interactive Deck
Self-contained HTML — one file, any browser
GSAP animations, Google Fonts, Chart.js (CDN)
Navigation: keyboard / click / touch / swipe / scroll wheel
Optional .pptx export via pptxgenjs

Live Demo

What it looks like in practice

interactive-slides-skill.replay ▶ ready

0/0

Install

Pick your 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
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.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 uses the same mcpServers schema as Claude Desktop. Project config wins over global.

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
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "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
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

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

Continue uses an array of server objects rather than a 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"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

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

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Interactive Slides

Turn a one-pager into an investor deck

👤 Founders and PMs building pitches ⏱ ~30 min beginner

When to use: You have the content; you want the shape of a real deck in minutes.

Prerequisites

Node + pptxgenjs (optional, only for .pptx export) — npm i -g pptxgenjs
Skill installed — git clone into ~/.claude/skills/interactive-slides

Flow

Invoke the skill

/interactive-slides — mode: Slide Deck. Content: <one-pager>. Theme: minimal dark.✓ Copied

→ Generates deck.html; opens in browser
Iterate sections

Add a 'Traction' section with a line chart for MRR.✓ Copied

→ Chart.js line chart rendered inside a slide
Export .pptx

Export as pitch.pptx.✓ Copied

→ Editable .pptx saved; text fully editable in PowerPoint

Outcome: A deck you can demo today and email as .pptx tomorrow.

Pitfalls

Exported .pptx lacks animations — HTML animations don't round-trip; keep the HTML for live talks, .pptx for handoffs

Combine with: mcp-echarts

Build a scroll-story explainer

👤 Technical writers and marketers ⏱ ~60 min intermediate

When to use: You want a Medium-style long-form piece with scroll-triggered visuals.

Flow

Pick the mode

Mode: Scroll Story. Content: this article. Add scroll-triggered charts and visuals.✓ Copied

→ Output is a scrolling page with GSAP-pinned sections
Tune pacing

Slow down the pin-scroll on the 'Problem' section.✓ Copied

→ Scrub timeline adjusted

Outcome: An engaging scroll piece your readers actually finish.

Pitfalls

Overloading with effects — One animation per section; rest should be quiet

Interactive demo deck for a workshop

👤 Educators and DevRel running workshops ⏱ ~90 min intermediate

When to use: You want slides with small interactive exercises inline.

Flow

Mode: Interactive

Mode: Interactive Deck. Embed an input field + Chart.js that updates live.✓ Copied

→ Interactive element wired; chart updates on input
Add poll

Add a 'pick one' slide that records clicks locally and tallies.✓ Copied

→ Local-only counter updates on click

Outcome: A live-feeling deck without a backend.

Combinations

Pair with other MCPs for X10 leverage

interactive-slides-skill + mcp-echarts

Produce charts via ECharts and embed in the deck

Render the revenue chart with mcp-echarts as SVG; embed into the 'Traction' slide.✓ Copied

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

Apply brand tokens to the deck theme

Use the brand-acme tokens for the deck palette and type.✓ Copied

interactive-slides-skill + magic-ui-mcp

Cherry-pick UI components for the Interactive Deck mode

Interactive mode: use a Magic UI marquee for the trust logos slide.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
/interactive-slides (SKILL)	mode + content + theme	Any time you need a deck or scroll-story from content you already have	0

Cost & Limits

What this costs to run

API quota: None
Tokens per call: Moderate — deck content is HTML-long
Monetary: Free
Tip: Keep per-slide prose under 80 words; decks bloat fast otherwise.

Security

Permissions, secrets, blast radius

Credential storage: None

Data egress: GSAP, Google Fonts, Chart.js load from CDN. If you need fully offline, ask the skill to inline the libraries.

CDN dependencies mean recipients need network to view animations. For air-gapped demos, request an inlined build.
Interactive decks store state in localStorage; note if the deck will be shared publicly.

Troubleshooting

Common errors and fixes

Slides don't advance on arrow keys

Ensure keyboard listener is bound; some browsers block when the HTML file is served from file://. Try a local server: python3 -m http.server.

Verify: Open dev console; inspect keyup handler

.pptx export missing animations

Animations are HTML-only; .pptx exports text + layout. Use HTML for live; .pptx for email handoff.

Verify: Open the .pptx in PowerPoint; check layout only

Fonts look wrong offline

Ask the skill to embed @font-face with base64 data URIs for offline use.

Verify: Open airplane-mode; load the HTML

Alternatives

Interactive Slides vs others

Alternative	When to use it instead	Tradeoff
mck-ppt-design-skill	You want consulting-style .pptx slides, not HTML	Less interactive; more slide-polish
mermaid-skill	You need diagrams, not a deck	Different artifact
markmap-mcp-server	A mind map fits better than a deck	Different narrative shape

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills