English Français العربية

io.github.06ketan/slideshot

السجل الرسمي الإنتاجية

Convert HTML to PDF/PNG/WebP/PPTX slide carousels with 11 themes — for LinkedIn, decks, posts.

الشيفرة المصدرية التوثيق

التثبيت

أضف هذا إلى إعدادات MCP في عميلك (Claude Desktop: claude_desktop_config.json، وCursor: ‏.cursor/mcp.json، ويستخدم VS Code وغيره الصيغة نفسها «mcpServers»).

NPM package slideshot-mcp
Claude Code 
claude mcp add slideshot -- npx -y slideshot-mcp@4.4.0
إعداد JSON (Claude Desktop وCursor وVS Code) 
{
    "mcpServers": {
        "slideshot": {
            "command": "npx",
            "args": [
                "-y",
                "slideshot-mcp@4.4.0"
            ]
        }
    }
}

التوثيق

مأخوذ من ملف README للمشروع على GitHub ويُحدَّث أسبوعيًا. تفتح الروابط على GitHub.

المحتويات
  1. slideshot
  2. Works with (MCP)
  3. Architecture
  4. Quick Start
  5. AI Prompt Templates
  6. Build All
  7. Links
  8. Related MCPs
  9. License

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
HostDocumentationTypical wire-up
OpenCodeOpenCode MCP serversSee OpenCode below
ContinueContinueAdd stdio MCP pointing at npx / slideshot-mcp per Continue docs
ZedZedStdio MCP per Zed
ClineClineExtension MCP docs
GooseGooseMCP extensions per Goose
Large commercial stacks
HostDocumentationTypical wire-up
CursorCursor MCP.cursor/mcp.json — see MCP Server
Claude (Desktop / Code)Claude Desktop, Claude CodeClaude Desktop JSON or claude mcp add
GitHub CopilotCopilotMCP in VS Code where enabled
ChatGPTOpenAIPrefer REST (/api/openapi.json) where MCP is unavailable
Google GeminiGeminiGemini 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:

FlagDefaultDescription
-s, --selector.slideCSS selector for slide elements
-W, --width540Slide width (CSS px)
-H, --height675Slide height (CSS px)
--scale4Device scale (4x = 2160x2700)
-f, --formatspng,webp,pdfOutput formats (png, webp, pdf, pptx)
-q, --quality95WebP quality (0-100)
-o, --out./slidesOutput 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:

MethodPathDescription
POST/api/renderRender HTML slides to PNG/WebP/PDF (returns ZIP)
GET/api/prompt?variant=genericGet AI prompt template
GET/api/openapi.jsonOpenAPI 3.1.0 spec

Platform support:

PlatformMethodSetup
CursorMCPnpx slideshot-mcp in .cursor/mcp.json
Claude DesktopMCPnpx slideshot-mcp in config
OpenCodeMCPopencode.json mcp.slideshot → ["npx","-y","slideshot-mcp"]
ContinueMCPstdio → npx / slideshot-mcp per Continue docs
ChatGPTOpenAPI ActionImport /api/openapi.json
OpenWebUIOpenAPI ToolImport /api/openapi.json

AI Prompt Templates

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

VariantFileStyle
Genericprompts/generic.mdClean minimal, Inter font
Brandedprompts/branded.mdSpace Mono, teal/coral accents
Instagramprompts/instagram-carousel.mdBold gradients, Poppins
Infographicprompts/infographic.mdDM Sans, stat cards
Pitch Deckprompts/pitch-deck.mdProfessional, KPI cards
Dark Modernprompts/dark-modern.mdNeon, glassmorphism
Editorialprompts/editorial.mdPlayfair 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
SurfaceURL
Web Appslideshot.vercel.app
npm CLInpmjs.com/package/slideshot
npm MCPnpmjs.com/package/slideshot-mcp
GitHubgithub.com/06ketan/slideshot
API Specslideshot.vercel.app/api/openapi.json

License

الأسئلة الشائعة

ما هو io.github.06ketan/slideshot؟

Convert HTML to PDF/PNG/WebP/PPTX slide carousels with 11 themes — for LinkedIn, decks, posts.

كيف أثبّت io.github.06ketan/slideshot؟

يعمل على جهازك. في Claude Code: claude mcp add slideshot -- npx -y slideshot-mcp@4.4.0. وفي العملاء الآخرين، الصق إعداد JSON من هذه الصفحة في إعدادات MCP الخاصة بهم.

هل يحتاج io.github.06ketan/slideshot إلى مفتاح API؟

لا يذكر إدراجه في السجل أي مفتاح أو سر إلزامي. قد تتطلب بعض الميزات حسابًا لدى الخدمة التي يتصل بها.

هل io.github.06ketan/slideshot مفتوح المصدر؟

نعم. شيفرته متاحة على GitHub بترخيص MIT.

من يصون io.github.06ketan/slideshot؟

ينشره 06ketan. يدرجه AI.tn لكنه لا يصونه ولا يوصي به.

من سجل MCP الرسمي. الإدراج ليس توصية: راجع شيفرة الخادم وصلاحياته قبل منحه الوصول إلى بياناتك.