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
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
npm run build
cd packages/webapp && npm run build
Links
License