HTML轮播图转换工具

Slideshot 是一款将 AI 生成的 HTML 轮播图或幻灯片转换为高清 PNG、WebP、PDF 和 PPTX 的工具,支持 CLI、Web 应用、MCP 服务器和 REST API,方便内容创作者与开发者快速导出演示文稿。

  • by 06ketan
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 06ketan/slideshot

使用说明

slideshot

Convert AI-generated HTML carousels into high-res PNG, WebP, PDF, and PPTX — via CLI, Web App, MCP Server (Cursor MCP, Claude MCP, OpenCode MCP), or REST API.

Web App · npm CLI · npm MCP · API Spec

Wrong install?

The MCP package name is slideshot-mcp on npm (canonical Glama listing). Use npx -y slideshot-mcp — not unrelated html-to-slides or third-party scoped copies from generic searches.

Works with (MCP)

Discovery-oriented table — verify each host’s current MCP docs before upgrading.

Open source–oriented hosts

Host Documentation Typical wire-up
OpenCode OpenCode MCP servers See OpenCode below
Continue Continue Add stdio MCP pointing at npx / slideshot-mcp per Continue docs
Zed Zed Stdio MCP per Zed
Cline Cline Extension MCP docs
Goose Goose MCP extensions per Goose

Large commercial stacks

Host Documentation Typical wire-up
Cursor Cursor MCP .cursor/mcp.json — see MCP Server
Claude (Desktop / Code) Claude Desktop, Claude Code Claude Desktop JSON or claude mcp add
GitHub Copilot Copilot MCP in VS Code where enabled
ChatGPT OpenAI Prefer REST (/api/openapi.json) where MCP is unavailable
Google Gemini Gemini Gemini IDE / CLI MCP when supported — else REST

Architecture

slideshot/
  packages/
    cli/           ← Core Puppeteer rendering engine + CLI
    mcp-server/    ← MCP stdio server for AI tools
    webapp/        ← Next.js web app with live preview
  prompts/
    generic.md           ← Clean minimal
    branded.md           ← Ketan Slides design system
    instagram-carousel.md ← Bold vibrant IG style
    infographic.md       ← Data-heavy charts
    pitch-deck.md        ← Professional presentations
    dark-modern.md       ← Neon glassmorphism
    editorial.md         ← Magazine serif

Quick Start

CLI

npx slideshot ./my-carousel.html --formats png,webp,pdf --scale 4

Options:

Flag Default Description
-s, --selector .slide CSS selector for slide elements
-W, --width 540 Slide width (CSS px)
-H, --height 675 Slide height (CSS px)
--scale 4 Device scale (4x = 2160x2700)
-f, --formats png,webp,pdf Output formats (png, webp, pdf, pptx)
-q, --quality 95 WebP quality (0-100)
-o, --out ./slides Output directory

Web App

Live: slideshot.vercel.app

Or run locally:

cd packages/webapp && npm install && npm run dev

Open http://localhost:3000 — paste HTML, preview, export.

MCP Server

Add to Cursor, Claude Desktop, Claude Code, or any stdio MCP host. Published as slideshot-mcp on npm.

Cursor / Claude Desktop (mcpServers):

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

Optional pin: "args": ["-y", "slideshot-mcp@4.4.0"] (replace with current npm version).

OpenCode

~/.config/opencode/opencode.json:

{
  "mcp": {
    "slideshot": {
      "type": "local",
      "command": ["npx", "-y", "slideshot-mcp"],
      "enabled": true
    }
  }
}

Tools:

  • create_slides — guided creation workflow with 7 themes and output presets
  • render_html_to_images — render HTML to PNG/WebP/PDF/PPTX
  • get_slide_prompt — get AI prompt template for any theme variant
  • health_check — verify Puppeteer/Chromium availability

Prompts (7 themes):

  • generic-slides — clean minimal
  • branded-slides — Ketan Slides design system
  • instagram-carousel-slides — bold vibrant IG style
  • infographic-slides — data-heavy charts and stats
  • pitch-deck-slides — professional presentations
  • dark-modern-slides — neon glassmorphism
  • editorial-slides — magazine serif with gold accents

REST API (ChatGPT Actions / OpenWebUI)

The web app exposes an OpenAPI-compatible REST API at https://slideshot.vercel.app.

Endpoints:

Method Path Description
POST /api/render Render HTML slides to PNG/WebP/PDF (returns ZIP)
GET /api/prompt?variant=generic Get AI prompt template
GET /api/openapi.json OpenAPI 3.1.0 spec

Platform support:

Platform Method Setup
Cursor MCP npx slideshot-mcp in .cursor/mcp.json
Claude Desktop MCP npx slideshot-mcp in config
OpenCode MCP opencode.json mcp.slideshot → ["npx","-y","slideshot-mcp"]
Continue MCP stdio → npx / slideshot-mcp per Continue docs
ChatGPT OpenAPI Action Import /api/openapi.json
OpenWebUI OpenAPI Tool Import /api/openapi.json

AI Prompt Templates

7 prompt variants in prompts/ — copy-paste or use via get_slide_prompt tool:

Variant File Style
Generic prompts/generic.md Clean minimal, Inter font
Branded prompts/branded.md Space Mono, teal/coral accents
Instagram prompts/instagram-carousel.md Bold gradients, Poppins
Infographic prompts/infographic.md DM Sans, stat cards
Pitch Deck prompts/pitch-deck.md Professional, KPI cards
Dark Modern prompts/dark-modern.md Neon, glassmorphism
Editorial prompts/editorial.md Playfair Display, gold

Build All

npm install   # from root — installs all workspaces
npm run build # builds cli → mcp-server
cd packages/webapp && npm run build  # builds webapp separately

Links

Surface URL
Web App slideshot.vercel.app
npm CLI npmjs.com/package/slideshot
npm MCP npmjs.com/package/slideshot-mcp
GitHub github.com/06ketan/slideshot
API Spec slideshot.vercel.app/api/openapi.json

Related MCPs

License