slideshot
<!-- mcp-name: io.github.06ketan/slideshot -->
         
<a href="https://glama.ai/mcp/servers/06ketan/slideshot"> <img width="380" height="200" src="https://glama.ai/mcp/servers/06ketan/slideshot/badges/card.svg" alt="slideshot MCP server card on Glama" /> </a>
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
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 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 availability
Prompts (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 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 | | 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 |
License
MIT











