{"id":"750a027c-4ea7-43ce-b78d-412071d34cb3","slug":"jh-presentation","kind":"mcp","name":"jh-presentation","summary":"AI-built HTML presentations: an MCP server that turns your AI client into a slide author — single-file decks, live diagrams, in-place editing, PDF export.","owner":"pei-jz","repoUrl":"https://github.com/pei-jz/jh-presentation","license":"MIT","licenseTier":"permissive","trust":"community","stars":0,"match":null,"fewStars":true,"format":"mcp","createdAt":"2026-10-02T01:49:00.000Z","addedAt":"2026-10-14T05:52:06.624Z","logoUrl":"https://avatars.githubusercontent.com/u/213151738?v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["browser-web","files-documents","cloud-infra"],"tags":["ai","claude","html","presentation","slides"],"runtime":"node","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-14T17:45:34.714Z","sample":false,"url":"https://conduits.dev/tools/jh-presentation","language":"JavaScript","transports":["stdio"],"install":{"npm":"jh-presentation"},"requirements":{"env":[{"name":"JH_PRESENTATION_HOME","secret":false,"required":false,"description":"Settings folder (brand, themes, templates); decks go here when the client has no workspace"},{"name":"JH_PRESENTATION_DECKS_DIR","secret":false,"required":false,"description":"Folder name for decks inside the client's workspace (default: decks)"},{"name":"JH_PRESENTATION_ROOTS","secret":false,"required":false,"description":"Set to off to always save decks in the settings folder instead of the client's workspace"},{"name":"CHROME_PATH","secret":false,"required":false,"description":"Path to Chrome or Edge, if not installed in the default location"}],"upstreamMayCharge":false},"tools":null,"readme":"# jh-presentation\n\n[![CI](https://github.com/pei-jz/jh-presentation/actions/workflows/ci.yml/badge.svg)](https://github.com/pei-jz/jh-presentation/actions/workflows/ci.yml)\n[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\n**Let AI build your presentations as real web pages.**\njh-presentation is an MCP server plus a small, dependency-free slide engine. Your AI client (Claude Desktop, Claude Code, VS Code, …) writes the content; jh-presentation turns it into a **single self-contained HTML file** with live diagrams, step-by-step animation, in-place editing and PDF export — and lets the AI check its own work with layout audits and screenshots.\n\nNo API key is needed: the thinking is done by the AI client you already use.\n\n[日本語の説明はこちら](#日本語)\n\n![Flow diagram that highlights each step of a request](docs/images/flow-diagram.jpg)\n\n## Why HTML instead of PowerPoint?\n\nAI models are far better at writing HTML/CSS/JS than at driving PPTX. That makes things possible that slide tools struggle with:\n\n- Diagrams that **build up step by step**, with data flowing along the arrows\n- A system overview you can **click to zoom into**, revealing the parts inside\n- **ER diagrams** and **sequence diagrams** generated from data\n- Charts that animate, code that highlights line by line, demos that actually run\n- Everything in **one HTML file** that works offline — mail it, put it on a share, present from a browser\n\n| | |\n|---|---|\n| ![Zoom map](docs/images/zoom-map.jpg) | ![ER diagram](docs/images/er-diagram.jpg) |\n| Click a box to zoom into its internals | Click a table to highlight its relations and join keys |\n| ![Chart](docs/images/chart.jpg) | ![3D stack](docs/images/stack3d.jpg) |\n| Charts with grow animation and legend toggles | Layered architecture exploded in 3D |\n\n## Features\n\n- **Single-file decks** — engine, theme, brand and images are embedded. No build step, no CDN, works from `file://`\n- **Diagram components (data in, motion out)** — flow diagrams / zoom maps, ER diagrams, sequence diagrams, charts (bar, line, pie, donut), 3D layer stacks, before/after sliders, terminal replays. The AI writes JSON; layout, animation, clicks and the static PDF view are handled for you\n- **Steps** — arrow keys reveal content one step at a time; components hook into the same steps\n- **Themes** — five built-in themes (default, dark, corporate, pop, mono), a live theme gallery, and AI-generated custom themes\n- **Branding** — your name, logo and a label (e.g. DRAFT) in a header/footer band\n- **Self-checking AI** — `audit_deck` detects overflow, clipping, overlapping text, low contrast, missing images and external requests; `screenshot_deck` returns slide images so the AI can look and fix\n- **Edit without AI** — double-click any text box to edit it in place, press Ctrl+S to save straight back to the file (only the edited text is replaced)\n- **Presenting** — presenter view with notes, next slide and timer; overview; blackout; fullscreen window\n- **Safe saving** — atomic writes, revision checks against concurrent edits, 20-version history with restore\n- **Request templates** — tech talk, lightning talk, progress report, tech proposal (as MCP prompts)\n\n![Theme gallery](docs/images/theme-gallery.jpg)\n\n## Requirements\n\n- Node.js 20 or later\n- Google Chrome or Microsoft Edge (used for audits, screenshots and PDF export; set `CHROME_PATH` if it is installed somewhere unusual)\n\n## Quick start\n\n### Claude Desktop\n\nOpen **Settings → Developer → Edit Config** and add:\n\n```json\n{\n  \"mcpServers\": {\n    \"jh-presentation\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"jh-presentation\"],\n      \"env\": { \"JH_PRESENTATION_HOME\": \"C:/Users/you/Documents/decks\" }\n    }\n  }\n}\n```\n\nQuit Claude Desktop from the tray icon and start it again. Then ask, for example:\n\n> Make a 15-minute deck explaining Git branching strategies, with diagrams and step-by-step reveals.\n\n### Claude Code\n\n```bash\nclaude mcp add jh-presentation -e JH_PRESENTATION_HOME=~/decks -- npx -y jh-presentation\n```\n\n### VS Code (`.vscode/mcp.json`)\n\n```json\n{\n  \"servers\": {\n    \"jh-presentation\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"jh-presentation\"],\n      \"env\": { \"JH_PRESENTATION_HOME\": \"${userHome}/Documents/decks\" }\n    }\n  }\n}\n```\n\nWhere decks go, decided per call — no need to change the MCP settings to save somewhere else:\n\n1. the `dir` a tool is given (\"make it in this project's slides folder\"),\n2. the `decks/` folder of the AI client's current workspace (Claude Code, VS Code and other clients that report MCP roots),\n3. the workspace: `JH_PRESENTATION_HOME` (default `~/jh-presentation`) or `--workspace <dir>`, for clients without one (Claude Desktop).\n\nThe workspace also holds the brand, custom themes and request templates shared by every project; a project's own `brand/` or `themes/` folder wins.\n`--decks-dir <name>` (`JH_PRESENTATION_DECKS_DIR`) renames `decks/`, and `--no-roots` (`JH_PRESENTATION_ROOTS=off`) always saves to the workspace.\n\n## What the AI can do (MCP tools)\n\n| Area | Tools |\n|---|---|\n| Guide | `get_guide` — authoring rules, component catalog, workflow |\n| Themes | `list_themes`, `open_theme_gallery`, `preview_themes`, `get_theme_guide`, `create_theme` |\n| Templates | `list_templates` (also exposed as MCP prompts) |\n| Decks | `list_decks`, `create_deck`, `read_deck`, `write_deck`, `replace_slide`, `add_asset`, `upgrade_deck`, `list_history`, `restore_history`, `repair_deck` |\n| Checking | `audit_deck`, `screenshot_deck` |\n| Output | `open_deck` (optionally fullscreen), `export_deck` (PDF) |\n\n## Presenting\n\n| Key | Action |\n|---|---|\n| → / Space / Enter | Next (including steps) |\n| ← | Previous |\n| S | Presenter view (notes, next slide, timer) |\n| E / double-click a box | Edit text in place (Ctrl+S saves, Esc or \"✕\" exits) |\n| O | Overview |\n| F | Fullscreen |\n| B | Blackout |\n| number + Enter | Jump to slide |\n| ? | Help |\n\n> Do not use the browser's \"Save page as…\" — it saves the rendered page and breaks the deck. Use Ctrl+S inside the deck. If it happens anyway, `repair_deck` restores it.\n\n![Editing text in place](docs/images/edit-mode.jpg)\n\n## Working in this repository\n\n```bash\nnpm install\nnpm run dev        # http://localhost:4000 — deck list, theme gallery, feature sample\nnpm test\n```\n\n| Command | Description |\n|---|---|\n| `npm run dev` | Preview server with live reload (local only, 127.0.0.1) |\n| `npm run new -- <name> \"Title\" [--theme <t>] [--brand footer] [--fullscreen]` | New deck in `decks/` |\n| `npm run upgrade [-- <name>]` | Re-embed the latest engine, theme and brand |\n| `npm run pdf -- <name>` | Export a PDF to `dist/` |\n| `npm run repair -- <name>` | Repair a deck broken by the browser's \"Save page as\" |\n| `npm run gallery` | Build the theme gallery |\n| `npm run mcp` | Start the MCP server (workspace `.workspace/`) |\n\nThe feature sample is [`examples/sample.html`](examples/sample.html). Rules for AI authors live in [`CLAUDE.md`](CLAUDE.md) (Claude Code), [`AGENTS.md`](AGENTS.md) (Codex, Cursor and other agents) and [`docs/authoring-guide.md`](docs/authoring-guide.md); the edit protocol for host applications is in [`docs/edit-protocol.md`](docs/edit-protocol.md).\n\n> The authoring guide, templates and tool descriptions are currently written in Japanese. LLMs follow them fine whatever language you chat in, and decks can be in any language.\n\n## Security\n\nEverything runs on your machine: no telemetry, no outbound requests, the preview/save server binds to 127.0.0.1 only, and files are written only inside the workspace. Decks contain JavaScript written by your AI client and run in your browser. See [SECURITY.md](SECURITY.md).\n\n## License\n\n[MIT](LICENSE). Every deck carries the MIT notice for the embedded engine, components and themes in its generated section, so decks can be shared as-is. The content of your slides is yours.\n\n---\n\n## 日本語\n\n**AI にプレゼンを「Web ページ」として作らせる MCP サーバー**です。Claude Desktop・Claude Code・VS Code などの AI クライアントが内容を書き、jh-presentation が**1 ファイルの HTML デッキ**にします。動く図・段階表示・その場での文字編集・PDF 出力に対応し、AI は検査とスクリーンショットで自分の出来を確認して直せます。API キーは不要です (考えるのは普段使っている AI クライアント)。\n\n- **動く図の部品**: 関連図・ズームマップ・ER 図・シーケンス図・グラフ・3D 分解図・ビフォー・アフター・ターミナル再生 (AI は JSON を書くだけ)\n- **テーマ 5 種 + 自作テーマ**、**名前・ロゴの帯**、**依頼文テンプレート** (技術解説・LT・進捗報告・技術提案)\n- **枠をダブルクリックして文字を直し、Ctrl+S で元のファイルに保存** (ブラウザの「名前を付けて保存」は使わない)\n- **発表者ビュー・一覧・全画面**、保存履歴と復元、壊れたデッキの復旧\n\n### 使い方 (Claude Desktop)\n\n設定 → 開発者 → 「構成を編集」で次を追加し、タスクトレイから終了して再起動します。\n\n```json\n{\n  \"mcpServers\": {\n    \"jh-presentation\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"jh-presentation\"],\n      \"env\": { \"JH_PRESENTATION_HOME\": \"C:/Users/you/Documents/decks\" }\n    }\n  }\n}\n```\n\nあとは「jh-presentation で、Git のブランチ戦略を 15 分で説明するプレゼン資料を、図とステップ表示を多めに作って」のように頼むだけです。\n依頼の書き方 (道具の名前を書くべきクライアント・依頼文に入れるとよいこと・直し方) は [docs/usage.md](docs/usage.md) にまとめています。\n詳しい設定 (Claude Code・VS Code) は [mcp/README.md](mcp/README.md) を参照してください。\nこのリポジトリで AI に作業させる場合のルールは [CLAUDE.md](CLAUDE.md) (Claude Code) / [AGENTS.md](AGENTS.md) (Codex・Cursor など)、スライドの書き方は [docs/authoring-guide.md](docs/authoring-guide.md) にあります。\n\nライセンスは [MIT](LICENSE) です。デッキには埋め込んだエンジン・部品・テーマの MIT 表記が自動で入るので、そのまま配布できます。スライドの内容は作成者のものです。\n"}