html-to-slides-mcp

MCP server that renders HTML slides to high-resolution PNG, WebP, and PDF. Use with Claude Desktop, Cursor, or any MCP-compatible client.

Setup

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "html-to-slides": {
      "command": "npx",
      "args": ["-y", "html-to-slides-mcp"]
    }
  }
}

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "html-to-slides": {
      "command": "npx",
      "args": ["-y", "html-to-slides-mcp"]
    }
  }
}

Tools

render_html_to_images

Render HTML slides to files.

| Parameter | Type | Required | Default | Description | |-----------|------|----------|---------|-------------| | html | string | yes | — | Full HTML string with slide elements | | outDir | string | yes | — | Absolute path to output directory | | selector | string | no | .slide | CSS selector for slides | | width | number | no | 540 | Slide width (CSS px) | | height | number | no | 675 | Slide height (CSS px) | | scale | number | no | 4 | Device scale factor (1-6) | | formats | string[] | no | ["png","webp","pdf"] | Output formats |

get_slide_prompt

Returns an AI prompt template for generating compatible slide HTML.

| Parameter | Type | Description | |-----------|------|-------------| | variant | "generic" | "branded" | Prompt style |

Prompts

• generic-slides — Clean minimal slide generation prompt
• branded-slides — Ketan Slides design system prompt

Workflow

1. Ask the AI to use the get_slide_prompt tool for the prompt template
2. Provide your content topic — the AI generates slide HTML
3. AI calls render_html_to_images with the HTML and your desired output path
4. Get PNG, WebP, and PDF files ready for LinkedIn, Instagram, or presentations

Library

For CLI and programmatic use without MCP, see html-to-slides.

License

MIT