Are you the author? Sign in to claim
Convert HTML slides to high-res PNG, WebP, and PDF — CLI, Web App, MCP Server
Convert AI-generated HTML carousels into high-res PNG, WebP, PDF, and PPTX — via CLI, Web App, MCP Server, or REST API.
Web App · npm CLI · npm MCP · API Spec
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
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 |
Live: slideshot.vercel.app
Or run locally:
cd packages/webapp && npm install && npm run dev
Open http://localhost:3000 — paste HTML, preview, export.
Add to Claude Desktop or Cursor config:
{
"mcpServers": {
"slideshot": {
"command": "npx",
"args": ["-y", "slideshot-mcp"]
}
}
}
Tools:
create_slides — guided creation workflow with 7 themes and output presetsrender_html_to_images — render HTML to PNG/WebP/PDF/PPTXget_slide_prompt — get AI prompt template for any theme varianthealth_check — verify Puppeteer/Chromium availabilityPrompts (7 themes):
generic-slides — clean minimalbranded-slides — Ketan Slides design systeminstagram-carousel-slides — bold vibrant IG styleinfographic-slides — data-heavy charts and statspitch-deck-slides — professional presentationsdark-modern-slides — neon glassmorphismeditorial-slides — magazine serif with gold accentsThe 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 |
| ChatGPT | OpenAPI Action | Import /api/openapi.json |
| OpenWebUI | OpenAPI Tool | Import /api/openapi.json |
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 |
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 |
npm install # from root — installs all workspaces
npm run build # builds cli → mcp-server
cd packages/webapp && npm run build # builds webapp separately
| 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 |
MIT
Run Claude Code as an MCP server so any agent can delegate coding tasks to it
Browser automation using accessibility snapshots instead of screenshots
Google's universal MCP server supporting PostgreSQL, MySQL, MongoDB, Redis, and 10+ databases
Official GitHub integration for repos, issues, PRs, and CI/CD workflows