slideshot

slideshot

AI が生成した HTML カルーセルを、高解像度の PNG、WebP、PDF、PPTX に変換します。CLI、Web アプリ、MCP サーバー（Cursor MCP、Claude MCP、OpenCode MCP）、または REST API から利用できます。

Web アプリ · npm CLI · npm MCP · API 仕様

インストール先を間違えましたか？

MCP パッケージの npm での名前は slideshot-mcp です（Glama の正規掲載）。npx -y slideshot-mcp を使用してください。一般的な検索で見つかる、無関係な html-to-slides やサードパーティのスコープ付きコピーは使用しないでください。

対応環境（MCP）

各環境を見つけやすくするための表です。アップグレードする前に、各ホストの最新の MCP ドキュメントを確認してください。

オープンソース志向のホスト

ホスト	ドキュメント	一般的な接続方法
OpenCode	OpenCode MCP servers	下記の OpenCode を参照
Continue	Continue	Continue のドキュメントに従い、npx / slideshot-mcp を指定する stdio MCP を追加
Zed	Zed	Zed の stdio MCP
Cline	Cline	拡張機能の MCP ドキュメント
Goose	Goose	Goose の MCP 拡張機能

大規模な商用スタック

ホスト	ドキュメント	一般的な接続方法
Cursor	Cursor MCP	.cursor/mcp.json — MCP サーバーを参照
Claude（Desktop / Code）	Claude Desktop, Claude Code	Claude Desktop の JSON、または claude mcp add
GitHub Copilot	Copilot	有効な場合は VS Code の MCP
ChatGPT	OpenAI	MCP を利用できない場合は REST（/api/openapi.json）を推奨
Google Gemini	Gemini	対応している場合は Gemini IDE / CLI の MCP、それ以外は REST

アーキテクチャ

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

クイックスタート

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 サーバー

Cursor、Claude Desktop、Claude Code、または任意の stdio MCP ホストに追加できます。npm で slideshot-mcp として公開されています。

Cursor / Claude Desktop（mcpServers）：

{
  "mcpServers": {
    "slideshot": {
      "command": "npx",
      "args": ["-y", "slideshot-mcp"]
    }
  }
}

任意でバージョンを固定できます："args": ["-y", "[email protected]"]（現在の npm バージョンに置き換えてください）。

OpenCode

~/.config/opencode/opencode.json：

{
  "mcp": {
    "slideshot": {
      "type": "local",
      "command": ["npx", "-y", "slideshot-mcp"],
      "enabled": true
    }
  }
}

ツール：

• 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
OpenCode	MCP	opencode.json の mcp.slideshot → ["npx","-y","slideshot-mcp"]
Continue	MCP	Continue のドキュメントに従い、stdio で npx / slideshot-mcp
ChatGPT	OpenAPI アクション	/api/openapi.json をインポート
OpenWebUI	OpenAPI ツール	/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

リンク

サービス	URL
Web アプリ	slideshot.vercel.app
npm CLI	npmjs.com/package/slideshot
npm MCP	npmjs.com/package/slideshot-mcp
GitHub	github.com/06ketan/slideshot
API 仕様	slideshot.vercel.app/api/openapi.json

関連する MCP

• medium-ops — Medium CLI + MCP（PyPI）。
• substack-ops — Substack CLI + MCP（PyPI）。

ライセンス