Slideshot — HTML to Slides

Slideshot converts HTML with .slide elements into pixel-perfect slide images and documents.

Quick Reference

MCP Setup

{
  "mcpServers": {
    "slideshot": {
      "command": "npx",
      "args": ["-y", "slideshot-mcp"]
    }
  }
}

Add to Claude Desktop config or .cursor/mcp.json.

Workflow (with mandatory STOP points)

1. Call discover_themes to get themes, orientations, token modes, and format options
2. ⛔ STOP — Use ONLY native selector prompts (DO NOT render themes as a separate markdown list). Ask user: theme, topic, orientation, token mode, format. DO NOT ask how many slides — AI decides based on topic depth. WAIT for explicit answers.
3. Show a data outline — bullet-point list of proposed slides (e.g. "Slide 1: Cover — ..., Slide 2: Key Stats — ..."). ⛔ STOP — Ask user: "Does this outline look good, or do you want changes?" WAIT. Loop until confirmed.
4. Based on token mode:

• Default: Call create_slides with mode=default, theme, orientation (no html) to get CSS prompt. Generate HTML. Call again with html= to save.
• Token Saver: Call create_slides with mode=token_saver, theme, orientation, slides=[structured JSON]

1. ⛔ STOP — Show saved HTML as code preview artifact using htmlPath. Ask user: "Does this look good? Should I render?" WAIT for confirmation. DO NOT call render_slides in the same turn.
2. If user wants changes: revise and call create_slides again (loop steps 4-5 until approved)
3. User confirms → Call render_slides with htmlPath and chosen formats

Server-enforced gates: render_slides will REJECT the call if discover_themes or create_slides hasn't been called first.

Token Modes

Picking a mode

• Default when the user wants a polished, distinctive deck or has specific design notes.
• Token saver when the user is iterating on content / wants speed / explicitly asks for it.
• For small follow-up tweaks on either mode, prefer edit_slides over re-running create_slides.

token_saver JSON shape (high level)

{
  "mode": "token_saver",
  "theme": "branded",
  "orientation": "linkedin",
  "slides": [
    { "type": "cover", "headline": "Title", "subtitle": "Subtitle" },
    { "type": "stats", "title": "Highlights", "cards": [{ "value": "10x", "label": "faster" }] },
    { "type": "cta", "headline": "Follow", "action": "@ketan-chavan" }
  ]
}

Each slide type has its own required fields — see discover_themes output for the full schema.

edit_slides — partial edits

Always show the returned htmlPath as a code-preview artifact and STOP — wait for user confirmation before calling render_slides.

Quick-start presets

discover_themes returns three presets via presets[] and a usePreset selector:

• linkedin-default → branded theme, 4:5, PDF
• instagram-square → terminal-editorial theme, 1:1, PNG+WebP
• pitch-deck-landscape → pitch-deck theme, 16:9, PDF+PPTX

If the user picks one, skip the per-question selectors and go straight to topic + outline confirm.

Persistent preferences

~/.slideshot/preferences.json stores lastTheme, lastOrientation, lastFormats, brandName, lastTokenMode. Each successful create_slides and render_slides call updates them. The next session's discover_themes surfaces them as default on the matching selectors.

Themes (8 variants)

Orientation Presets

Output Formats

Slide Types (token_saver mode)

cover, content, stats, list, steps, comparison, quote, code, cta, timeline, team

HTML Structure (default mode)

<div class="slide" style="width: 540px; height: 675px;">
  <h1>Slide Title</h1>
  <p>Content here</p>
</div>

Use Google Fonts via <link> tags. Each .slide becomes one output page/image.

CLI Alternative

npx slideshot ./slides.html --formats png,webp,pdf --scale 4 --out ./output

Web App

Paste HTML and export at slideshot.vercel.app.