slideshot-mcp
slideshot
AI로 생성된 HTML 캐러셀을 고해상도 PNG, WebP, PDF 및 PPTX로 변환합니다. CLI, 웹 앱, MCP 서버 또는 REST API를 통해 사용할 수 있습니다.
웹 앱 · npm CLI · npm MCP · API 사양
아키텍처
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 serifRelated MCP server: HTML to PDF MCP Server
빠른 시작
CLI
npx slideshot ./my-carousel.html --formats png,webp,pdf --scale 4옵션:
플래그 | 기본값 | 설명 |
|
| 슬라이드 요소에 대한 CSS 선택자 |
|
| 슬라이드 너비 (CSS px) |
|
| 슬라이드 높이 (CSS px) |
|
| 장치 배율 (4x = 2160x2700) |
|
| 출력 형식 (png, webp, pdf, pptx) |
|
| WebP 품질 (0-100) |
|
| 출력 디렉토리 |
웹 앱
라이브: slideshot.vercel.app
또는 로컬에서 실행:
cd packages/webapp && npm install && npm run devhttp://localhost:3000에 접속하여 HTML을 붙여넣고, 미리보기 후 내보내세요.
MCP 서버
Claude Desktop 또는 Cursor 설정에 추가하세요:
{
"mcpServers": {
"slideshot": {
"command": "npx",
"args": ["-y", "slideshot-mcp"]
}
}
}도구:
create_slides— 7가지 테마와 출력 프리셋을 사용한 가이드 생성 워크플로우render_html_to_images— HTML을 PNG/WebP/PDF/PPTX로 렌더링get_slide_prompt— 모든 테마 변형에 대한 AI 프롬프트 템플릿 가져오기health_check— Puppeteer/Chromium 가용성 확인
프롬프트 (7가지 테마):
generic-slides— 깔끔하고 미니멀한 스타일branded-slides— Ketan Slides 디자인 시스템instagram-carousel-slides— 강렬하고 생동감 넘치는 IG 스타일infographic-slides— 데이터 중심의 차트 및 통계pitch-deck-slides— 전문적인 프레젠테이션dark-modern-slides— 네온 글래스모피즘editorial-slides— 금색 포인트가 있는 잡지 스타일의 세리프체
REST API (ChatGPT Actions / OpenWebUI)
웹 앱은 https://slideshot.vercel.app에서 OpenAPI 호환 REST API를 제공합니다.
엔드포인트:
메서드 | 경로 | 설명 |
|
| HTML 슬라이드를 PNG/WebP/PDF로 렌더링 (ZIP 반환) |
|
| AI 프롬프트 템플릿 가져오기 |
|
| OpenAPI 3.1.0 사양 |
플랫폼 지원:
플랫폼 | 메서드 | 설정 |
Cursor | MCP |
|
Claude Desktop | MCP | 설정 파일에 |
ChatGPT | OpenAPI Action |
|
OpenWebUI | OpenAPI Tool |
|
AI 프롬프트 템플릿
prompts/ 폴더에 7가지 프롬프트 변형이 있습니다. 복사해서 사용하거나 get_slide_prompt 도구를 통해 사용하세요:
변형 | 파일 | 스타일 |
Generic |
| 깔끔하고 미니멀함, Inter 폰트 |
Branded |
| Space Mono, 청록색/산호색 포인트 |
| 강렬한 그라데이션, Poppins | |
Infographic |
| DM Sans, 통계 카드 |
Pitch Deck |
| 전문적인 KPI 카드 |
Dark Modern |
| 네온, 글래스모피즘 |
Editorial |
| Playfair Display, 금색 포인트 |
전체 빌드
npm install # from root — installs all workspaces
npm run build # builds cli → mcp-server
cd packages/webapp && npm run build # builds webapp separately링크
서비스 | URL |
웹 앱 | |
npm CLI | |
npm MCP | |
GitHub | |
API 사양 |
라이선스
MIT
Available Tools
6 toolscreate_slidesAIdempotent
Create slides. IMPORTANT: Use mode=default unless the user explicitly chose token_saver. mode=default = AI writes full HTML (best quality). mode=token_saver = AI sends JSON, server uses basic templates. REQUIRES discover_themes first AND user must have confirmed the data outline. After this tool saves the HTML, you MUST show the htmlPath as a code preview artifact. Then STOP and ask the user to confirm. DO NOT call render_slides until the user explicitly confirms.
| Name | Required | Description | Default |
|---|---|---|---|
| mode | Yes | default = AI writes full HTML (more tokens, full control). token_saver = AI sends JSON, server assembles HTML (fewer tokens). | |
| theme | Yes | Theme from discover_themes | |
| orientation | No | Preset or custom. Default: portrait | |
| width | No | Custom width px (only with orientation=custom) | |
| height | No | Custom height px (only with orientation=custom) | |
| html | No | Full HTML document (mode=default only) | |
| slides | No | Structured slide data (mode=token_saver only) | |
| brandName | No | Brand name for branded themes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations indicate idempotentHint=true and destructiveHint=false. The description adds crucial behavioral details: the mode behavior (full HTML vs JSON), the requirement for prior steps, and the post-call action (show htmlPath, stop, ask confirmation). It also warns against prematurely calling render_slides. No contradictions with annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with important information front-loaded and emphasized (IMPORTANT, REQUIRES, MUST, STOP, DO NOT). However, it is slightly verbose, repeating some points (e.g., mode guidance appears twice). A more concise version could remove redundancy while retaining clarity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (8 parameters, multiple prerequisites, conditional modes), the description covers workflow, mode selection, and post-call actions. It lacks an explicit statement of the return value (htmlPath is mentioned but not as a return field). Error conditions and responses are not addressed. Still, it provides sufficient context for correct usage.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so baseline is 3. The description adds some meaning beyond schema for mode (explaining quality trade-off) and implies conditions for html and slides. However, themes, orientation, width, height, and brandName are not elaborated beyond the schema. The description does not significantly increase understanding of parameter semantics.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description starts with 'Create slides,' clearly indicating the action and resource. It further details mode options and prerequisites, distinguishing it from siblings like discover_themes and render_slides. However, it could be more explicit about what 'create slides' entails (generating HTML slides) and differentiate from edit_slides.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides excellent usage guidance: it specifies when to use each mode (default vs token_saver), mandates that discover_themes must be called first and the user must confirm the data outline, and strictly instructs not to call render_slides until user confirmation. This clearly separates this tool from its siblings.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
discover_themesARead-onlyIdempotent
MANDATORY first step — all other tools REJECT until this is called. Returns themes, orientation presets, token-usage modes, and output formats. Use ONLY the native selector prompts from the "ask" array — DO NOT render themes as a separate markdown list. DO NOT ask how many slides (you decide based on topic). After user picks options, show a data outline of proposed slides and WAIT for confirmation before calling create_slides.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already indicate read-only, idempotent, non-destructive. Description adds workflow context: returns themes, orientation, etc., and is mandatory first step. No contradictions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Four sentences, front-loaded with most critical info (mandatory first step). Every sentence adds distinct value with specific do's and don'ts.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema; description lists return types (themes, modes, formats) but lacks exact structure. However, given the interactive workflow, description sufficiently supports agent decision-making.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Input schema has 0 parameters with 100% coverage. Description adds no parameter info but none needed. Baseline score of 4 for zero-parameter tool.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly identifies tool as mandatory first step that returns themes and other options. Distinguishes from sibling tools by stating all other tools reject until this is called.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly states when to use (first step), provides specific instructions on using native selector prompts, forbids certain actions (asking slide count), and outlines post-call workflow.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
edit_slidesA
Token-efficient partial edits on a previously-generated HTML deck. Use this INSTEAD of regenerating the whole deck for small changes — it saves 60-90% tokens vs a full rewrite. Operations: replace_slide (swap one slide block by 1-indexed slideIndex), patch_css (append CSS rules to ), swap_token (replace a CSS variable's value, e.g. {"--coral": "#FF0000"}), patch_class (add/remove a class on a specific slide, e.g. {"add": "dark"}). Reads from cache or htmlPath; saves the updated HTML and returns the new htmlPath. After editing, show the htmlPath as a preview artifact and STOP — do NOT call render_slides until the user confirms.
| Name | Required | Description | Default |
|---|---|---|---|
| htmlPath | No | Path to HTML to edit. Falls back to cached HTML from last create_slides call. | |
| operation | Yes | Edit operation: replace_slide swaps one slide block; patch_css appends CSS rules to <style>; swap_token replaces a CSS variable's value; patch_class adds/removes a class on a slide. | |
| slideIndex | No | 1-indexed slide position. Required for replace_slide and patch_class. Omit for global ops (patch_css, swap_token). | |
| payload | Yes | For replace_slide: the new <div class="slide">...</div> HTML string. For patch_css: a CSS rules string. For swap_token: an object {tokenName: newValue}, e.g. {"--coral": "#FF0000"}. For patch_class: an object {add?: string, remove?: string}. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations indicate readOnlyHint=false and destructiveHint=false, but description adds context: reads from cache or htmlPath, saves updated HTML, returns new htmlPath, and estimates token savings. It transparently describes behavior beyond annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Concise and well-structured: starts with purpose and efficiency claim, then lists operations in bullet format, and ends with clear behavioral instructions. Every sentence adds value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Even without an output schema, the description covers return value (new htmlPath) and behavior (caching, fallback). It provides enough context for correct invocation across all operations.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% with descriptions for all parameters. The description further clarifies payload formats for each operation and slideIndex requirements, adding utility beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool is for 'Token-efficient partial edits on a previously-generated HTML deck', distinguishing it from sibling tools like create_slides and render_slides. It lists specific operations, making the purpose unambiguous.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly instructs to use this instead of regenerating the whole deck for small changes and provides a clear stop condition after editing: 'show the htmlPath as a preview artifact and STOP — do NOT call render_slides until the user confirms.' No ambiguity.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
health_checkARead-onlyIdempotent
Verify Puppeteer/Chromium can launch. Use when render fails.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly, idempotent, and not destructive. The description adds specific behavioral context (launch verification) beyond what annotations provide, without contradiction.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two concise, front-loaded sentences that each carry essential information: what the tool does and when to use it. No extraneous content.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given zero parameters and no output schema, the description fully covers the tool's purpose and usage context. Annotations provide safety guarantees. Complete for this simple tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
No parameters exist, so the baseline is 4. The description does not need to add parameter details.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb 'Verify' and identifies the resource 'Puppeteer/Chromium can launch'. It clearly distinguishes this diagnostic tool from the slide and theme tools.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly states 'Use when render fails', providing clear context for when to invoke this tool. Could mention when not to use, but the guidance is sufficient for a simple diagnostic.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_themesARead-onlyIdempotent
Idempotent read-only listing of all available themes (8+). Unlike discover_themes, this does NOT start a slide-creation workflow — call it any time the user asks "what themes are there?" mid-conversation. Returns the same tiered theme catalog (primary/secondary). Models MUST present every theme returned, never truncate.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint and idempotentHint. Description adds that it returns tiered catalog (primary/secondary) and instructs models not to truncate. This adds value beyond annotations, though annotations cover core behavioral traits.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three sentences, each essential: purpose, usage guidance with sibling differentiation, and a behavioral constraint. Front-loaded with key info. No wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-parameter listing tool with good annotations and no output schema, the description provides enough context: what it lists, when to use, output structure (tiered catalog), and behavior (no truncation). Complete enough for effective agent invocation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
No parameters in schema; baseline is 4. Description does not need to add param information. No additional details about parameters are necessary and none are missing.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clearly states it lists themes (8+), is idempotent and read-only, and distinguishes from sibling discover_themes which starts a workflow. Uses specific verb and resource.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly says when to call ('any time user asks what themes are there? mid-conversation') and that unlike discover_themes it does not start a slide-creation workflow, naming the alternative.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
render_slidesAIdempotent
Final render to PDF/WebP/PNG/PPTX. Accepts html string OR htmlPath. Supports width, height, selector, scale, webpQuality, orientation, pptxMode, pptxFilename, slideRange. NEVER call render_slides in the same turn as create_slides. When the user provides an existing HTML file path, pass it as htmlPath and call this tool directly — no discover_themes or create_slides needed. For the full slide-creation workflow, REQUIRES both discover_themes AND create_slides first, and ONLY call AFTER user confirms the preview. Returns file paths on disk.
| Name | Required | Description | Default |
|---|---|---|---|
| htmlPath | No | Path to saved HTML file (from create_slides). Falls back to cached HTML. | |
| html | No | HTML string (prefer htmlPath to save tokens) | |
| selector | No | Slide selector (default: .slide) | |
| width | No | Width px (default: 540) | |
| height | No | Height px (default: 675) | |
| scale | No | Device scale 1-6 (default: 4) | |
| formats | No | Output formats (default: [pdf]) | |
| webpQuality | No | WebP quality 0-100 (default: 95) | |
| outDir | No | Output directory override | |
| pdfFilename | No | Custom PDF filename | |
| pptxFilename | No | Custom PPTX filename | |
| slideRange | No | Render slides N-M, 1-indexed | |
| orientation | No | portrait=540x675, landscape=1920x1080 | |
| pptxMode | No | Default: image (pixel-perfect, preserves design, NOT editable). 'native' is opt-in for text-only export (selectable text but design is NOT preserved — looks broken). For true editable PPTX with shapes/colors, use a different tool. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations indicate idempotentHint=true. Description adds that it accepts html or htmlPath, falls back to cached HTML, and returns file paths on disk. Warns about pptxMode 'native' not preserving design, which is valuable beyond annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Front-loaded with core purpose. Each sentence adds value (formats, parameters, workflow rules). Could be slightly more concise but is well-structured and efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Good usage guidelines and behavioral context for a 14-param tool. However, missing details on return value structure (e.g., array of paths) since no output schema exists. Workflow dependencies are well explained.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema covers 100% of 14 parameters with descriptions. The description lists many parameters but adds little extra meaning beyond their names; workflow context is provided but not parameter-specific. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Description clearly states the action 'render' with specific output formats (PDF, WebP, PNG, PPTX). It distinguishes from siblings by being the 'Final' step, contrasting with create_slides and discover_themes.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly forbids calling render_slides in the same turn as create_slides. Provides clear workflow: for existing HTML file, call directly; for full workflow, require discover_themes and create_slides first, and only after user confirmation.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
TDQS
Each tool has a distinct purpose: workflow initialization (discover_themes), read-only listing (list_themes), full creation (create_slides), token-efficient editing (edit_slides), rendering (render_slides), and diagnostics (health_check). No functional overlap, and descriptions clarify the unique role of each tool.
All tool names follow a consistent snake_case pattern with a verb-noun structure (e.g., discover_themes, create_slides, render_slides). The sole exception, health_check, is a common idiom and does not break consistency.
With 6 tools, the server covers the essential slide-creation workflow (discovery, creation, editing, rendering) plus a health check, without unnecessary bloat. The count feels well-scoped for the domain.
The tool surface covers the full lifecycle: theme discovery, slide creation, editing, and rendering. Minor gaps exist (e.g., no standalone tool to list existing slide decks or delete slides), but edit_slides can replace slides, mitigating the need for delete. Overall, it's nearly complete for typical use cases.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
Generate images, GIFs, and PDFs from HTML, URLs, or templates — from your AI agent.
Turn any idea, URL, doc, or PDF into on-brand visuals: 100+ formats, native in 150+ languages
Generate polished PowerPoint presentations from text prompts, YouTube videos, or structured outlin…
Create polished slide decks from text or YouTube links in seconds. Fetch video transcripts to tran…
Related MCP Servers
- AlicenseAqualityDmaintenanceProvides screenshot and OCR capabilities for macOS.13623MIT
- FlicenseNot gradedqualityDmaintenanceConverts HTML files or HTML content to PDF using Puppeteer's browser rendering engine with support for CSS, JavaScript, custom page formats, margins, and header/footer templates.6
- FlicenseNot gradedqualityDmaintenanceConverts Markdown files and standalone Mermaid diagrams into high-quality PDF or PNG documents using Puppeteer and SVG rendering. It supports custom CSS styling and provides tools for professional document generation from markdown-based content.4
- AlicenseAqualityCmaintenanceGenerate professional PDFs from Claude, Cursor, and other AI tools. Create invoices, contracts, reports, and certificates from templates or inline HTML markup.7591MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/06ketan/slideshot'
If you have feedback or need assistance with the MCP directory API, please join our Discord server