slideshot-mcp
slideshot
将 AI 生成的 HTML 轮播图转换为高分辨率的 PNG、WebP、PDF 和 PPTX —— 支持 CLI、Web 应用、MCP 服务器 或 REST API。
Web 应用 · 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) |
|
| 输出目录 |
Web 应用
在线访问: slideshot.vercel.app
或在本地运行:
cd packages/webapp && npm install && npm run dev打开 http://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/PPTXget_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)
该 Web 应用在 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 |
Web 应用 | |
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