Skip to main content
Glama

slideshot

npm npm downloads npm mcp GitHub stars license

将 AI 生成的 HTML 轮播图转换为高分辨率的 PNG、WebP、PDF 和 PPTX —— 支持 CLIWeb 应用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 serif

Related MCP server: HTML to PDF MCP Server

快速开始

CLI

npx slideshot ./my-carousel.html --formats png,webp,pdf --scale 4

选项:

标志

默认值

描述

-s, --selector

.slide

幻灯片元素的 CSS 选择器

-W, --width

540

幻灯片宽度 (CSS px)

-H, --height

675

幻灯片高度 (CSS px)

--scale

4

设备缩放比例 (4x = 2160x2700)

-f, --formats

png,webp,pdf

输出格式 (png, webp, pdf, pptx)

-q, --quality

95

WebP 质量 (0-100)

-o, --out

./slides

输出目录

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/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)

该 Web 应用在 https://slideshot.vercel.app 提供兼容 OpenAPI 的 REST API。

端点:

方法

路径

描述

POST

/api/render

将 HTML 幻灯片渲染为 PNG/WebP/PDF (返回 ZIP)

GET

/api/prompt?variant=generic

获取 AI 提示词模板

GET

/api/openapi.json

OpenAPI 3.1.0 规范

平台支持:

平台

方法

设置

Cursor

MCP

.cursor/mcp.json 中使用 npx slideshot-mcp

Claude Desktop

MCP

在配置文件中使用 npx slideshot-mcp

ChatGPT

OpenAPI Action

导入 /api/openapi.json

OpenWebUI

OpenAPI Tool

导入 /api/openapi.json

AI 提示词模板

prompts/ 目录下有 7 种提示词变体 —— 可直接复制粘贴或通过 get_slide_prompt 工具使用:

变体

文件

风格

Generic

prompts/generic.md

简洁极简,Inter 字体

Branded

prompts/branded.md

Space Mono 字体,青色/珊瑚色点缀

Instagram

prompts/instagram-carousel.md

大胆渐变,Poppins 字体

Infographic

prompts/infographic.md

DM Sans 字体,统计卡片

Pitch Deck

prompts/pitch-deck.md

专业,KPI 卡片

Dark Modern

prompts/dark-modern.md

霓虹,玻璃拟态

Editorial

prompts/editorial.md

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

链接

许可证

MIT

Available Tools

6 tools
create_slidesA
Idempotent

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
modeYesdefault = AI writes full HTML (more tokens, full control). token_saver = AI sends JSON, server assembles HTML (fewer tokens).
themeYesTheme from discover_themes
orientationNoPreset or custom. Default: portrait
widthNoCustom width px (only with orientation=custom)
heightNoCustom height px (only with orientation=custom)
htmlNoFull HTML document (mode=default only)
slidesNoStructured slide data (mode=token_saver only)
brandNameNoBrand name for branded themes

TDQS

A4.3/5.0
Behavior5/5

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.

Conciseness4/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines5/5

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_themesA
Read-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.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.6/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
htmlPathNoPath to HTML to edit. Falls back to cached HTML from last create_slides call.
operationYesEdit 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.
slideIndexNo1-indexed slide position. Required for replace_slide and patch_class. Omit for global ops (patch_css, swap_token).
payloadYesFor 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

A4.7/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness5/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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_checkA
Read-onlyIdempotent

Verify Puppeteer/Chromium can launch. Use when render fails.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.5/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness5/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines4/5

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_themesA
Read-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.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.7/5.0
Behavior4/5

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.

Conciseness5/5

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.

Completeness5/5

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.

Parameters4/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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_slidesA
Idempotent

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
htmlPathNoPath to saved HTML file (from create_slides). Falls back to cached HTML.
htmlNoHTML string (prefer htmlPath to save tokens)
selectorNoSlide selector (default: .slide)
widthNoWidth px (default: 540)
heightNoHeight px (default: 675)
scaleNoDevice scale 1-6 (default: 4)
formatsNoOutput formats (default: [pdf])
webpQualityNoWebP quality 0-100 (default: 95)
outDirNoOutput directory override
pdfFilenameNoCustom PDF filename
pptxFilenameNoCustom PPTX filename
slideRangeNoRender slides N-M, 1-indexed
orientationNoportrait=540x675, landscape=1920x1080
pptxModeNoDefault: 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

A4.2/5.0
Behavior4/5

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.

Conciseness4/5

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.

Completeness3/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines5/5

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

A4.4/5.0
Disambiguation5/5

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.

Naming Consistency5/5

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.

Tool Count5/5

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.

Completeness4/5

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

ActivityInactive
ResponsivenessSyncing

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

Related MCP Servers

Latest Blog Posts

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