jh-presentation

Name: jh-presentation
Author: pei-jz

โดย pei-jzรุ่น 0.9.0i★ –iรันบนเครื่อง

ชื่อใน registryio.github.pei-jz/jh-presentation

ติดตั้ง

ภาพรวม

คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)

AI-built HTML presentations: single-file decks with live diagrams, charts, editing and PDF export.

สามเสาของ PopNx MCP

สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน

เสียงผู้ใช้iยังไม่มีรีวิวรีวิวเปิดพร้อมระบบบัญชีในขั้นถัดไป
ผลตรวจเบื้องต้นของเราiผ่าน 1 จาก 1 ข้อตรวจจากข้อมูลที่เปิดอยู่ ยังไม่ได้สแกนโค้ด
การใช้งานiยังไม่ได้วัด★ –

ใช้ทำอะไรได้

ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry

การเชื่อมต่อ: รันบนเครื่อง
ช่องทาง (transport): stdio
หมวด: เอกสาร ตาราง และงานออฟฟิศ

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ก่อนติดตั้ง

ผลตรวจเบื้องต้น: ผ่าน 1 จาก 1 ข้อ
รันในเครื่องคุณด้วยสิทธิ์ของผู้ใช้คุณ (ไฟล์ อินเทอร์เน็ต แอปต่าง ๆ)
ค่าที่คุณต้องใส่เอง: JH_PRESENTATION_HOME, JH_PRESENTATION_DECKS_DIR, JH_PRESENTATION_MAPS_DIR, JH_PRESENTATION_ROOTS, CHROME_PATH

ต้องเตรียมก่อน

npmติดตั้ง Node.js (มีคำสั่ง npx) ในเครื่อง

คุณใช้แอปไหน

ClaudeClaude CodeCursorVS CodeChatGPT

เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”

เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json

{
  "mcpServers": {
    "jh-presentation": {
      "command": "npx",
      "args": [
        "-y",
        "jh-presentation"
      ],
      "env": {
        "JH_PRESENTATION_HOME": "ใส่ค่าของคุณ",
        "JH_PRESENTATION_DECKS_DIR": "ใส่ค่าของคุณ",
        "JH_PRESENTATION_MAPS_DIR": "ใส่ค่าของคุณ",
        "JH_PRESENTATION_ROOTS": "ใส่ค่าของคุณ",
        "CHROME_PATH": "ใส่ค่าของคุณ"
      }
    }
  }
}

พิมพ์คำสั่งนี้ใน Terminal

claude mcp add jh-presentation --env JH_PRESENTATION_HOME='ใส่ค่าของคุณ' --env JH_PRESENTATION_DECKS_DIR='ใส่ค่าของคุณ' --env JH_PRESENTATION_MAPS_DIR='ใส่ค่าของคุณ' --env JH_PRESENTATION_ROOTS='ใส่ค่าของคุณ' --env CHROME_PATH='ใส่ค่าของคุณ' -- npx -y jh-presentation

เติมค่าที่เว้นว่างไว้ก่อนรัน

เปิดใน Cursor

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json

{
  "mcpServers": {
    "jh-presentation": {
      "command": "npx",
      "args": [
        "-y",
        "jh-presentation"
      ],
      "env": {
        "JH_PRESENTATION_HOME": "ใส่ค่าของคุณ",
        "JH_PRESENTATION_DECKS_DIR": "ใส่ค่าของคุณ",
        "JH_PRESENTATION_MAPS_DIR": "ใส่ค่าของคุณ",
        "JH_PRESENTATION_ROOTS": "ใส่ค่าของคุณ",
        "CHROME_PATH": "ใส่ค่าของคุณ"
      }
    }
  }
}

เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง

เปิดใน VS Code

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .vscode/mcp.json ของโปรเจกต์

{
  "servers": {
    "jh-presentation": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "jh-presentation"
      ],
      "env": {
        "JH_PRESENTATION_HOME": "ใส่ค่าของคุณ",
        "JH_PRESENTATION_DECKS_DIR": "ใส่ค่าของคุณ",
        "JH_PRESENTATION_MAPS_DIR": "ใส่ค่าของคุณ",
        "JH_PRESENTATION_ROOTS": "ใส่ค่าของคุณ",
        "CHROME_PATH": "ใส่ค่าของคุณ"
      }
    }
  }
}

ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น

ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี

ค่าที่ต้องใส่เอง

JH_PRESENTATION_HOME env
Settings folder (brand, themes, templates); decks go here when the client has no workspace
JH_PRESENTATION_DECKS_DIR env
Folder name for decks inside the client's workspace (default: decks)
JH_PRESENTATION_MAPS_DIR env
Folder name for map documents inside the client's workspace (default: maps)
JH_PRESENTATION_ROOTS env
Set to off to always save decks in the settings folder instead of the client's workspace
CHROME_PATH env
Path to Chrome or Edge, if not installed in the default location

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

ทำอะไรได้บ้าง

รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569

✓ ผ่าน
ตัวตนผู้ทำตรงกับ repo
ชื่อใน registry ยืนยันด้วยบัญชี GitHub pei-jz ซึ่งเป็นเจ้าของ repo
… ยังไม่ตรวจ
ยังมีคนดูแล
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
… ยังไม่ตรวจ
มีสัญญาอนุญาต (license)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
– ไม่เกี่ยว
endpoint ตอบ
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
– ไม่เกี่ยว
ล็อกอินแบบ OAuth
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
… ยังไม่ตรวจ
คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต

เทียบกับตัวอื่นในหมวด เอกสาร ตาราง และงานออฟฟิศi

ดาวมากกว่า 0% ของอีก 2200 ตัวในหมวดนี้
ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 71% ของอีก 2200 ตัวในหมวดนี้
ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 2200 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

jh-presentation ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.9.0) เข้า registry 13 วันที่ผ่านมา

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี Agent-Native Calendar, Excel MCP Server, MCP Server for Excel

ตัวที่ใช้แทนได้

server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว

อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

Agent-Native Calendar

โดย BuilderIO

Agent-Native Google Calendar - manage events, sync, and public booking

รันบนคลาวด์★ 7,620MITอัปเดต 2 เดือนที่ผ่านมา

ติดตั้ง

Excel MCP Server

โดย haris-musa

ให้ AI สร้างและแก้ไฟล์ Excel ได้เอง ทั้งสูตร กราฟ และ PivotTable โดยไม่ต้องมีโปรแกรม Excel ในเครื่อง

รันบนเครื่อง★ 4,276MITอัปเดต 7 วันที่ผ่านมา

ติดตั้ง

MCP Server for Excel

โดย sbroenne

Excel automation for AI - Sheets, Power Query, DAX, VBA, Tables, Ranges and more. Windows only.

รันบนเครื่อง★ 847MITอัปเดต 4 วันที่ผ่านมา

ติดตั้ง

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

jh-presentation

Let AI build your presentations as real web pages. jh-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.

No API key is needed: the thinking is done by the AI client you already use.

日本語の説明はこちら

Why HTML instead of PowerPoint?

AI models are far better at writing HTML/CSS/JS than at driving PPTX. That makes things possible that slide tools struggle with:

Diagrams that build up step by step, with data flowing along the arrows
A system overview you can click to zoom into, revealing the parts inside
ER diagrams and sequence diagrams generated from data
Charts that animate, code that highlights line by line, demos that actually run
Everything in one HTML file that works offline — mail it, put it on a share, present from a browser



Click a box to zoom into its internals	Click a table to highlight its relations and join keys

Charts with grow animation and legend toggles	Layered architecture exploded in 3D

Features

Single-file decks — engine, theme, brand and images are embedded. No build step, no CDN, works from file://
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
Hierarchy maps — click into a big system diagram level by level (breadcrumbs, boundary boxes, arrows rolled up per level), follow named data flows across levels, open tables and foreign keys inside a DB box, and click through state machines
Map documents — the same map as a single-file document without slides: collapsible table of contents, search, shareable URLs, pan / zoom / minimap, a theme picker, one printed page per level
Steps — arrow keys reveal content one step at a time; components hook into the same steps
Themes — five built-in themes (default, dark, corporate, pop, mono), a live theme gallery, and AI-generated custom themes
Branding — your name, logo and a label (e.g. DRAFT) in a header/footer band
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
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)
Presenting — presenter view with notes, next slide and timer; overview; blackout; fullscreen window
Safe saving — atomic writes, revision checks against concurrent edits, 20-version history with restore
Request templates — tech talk, lightning talk, progress report, tech proposal (as MCP prompts)

Requirements

Node.js 20 or later
Google Chrome or Microsoft Edge (used for audits, screenshots and PDF export; set CHROME_PATH if it is installed somewhere unusual)

Quick start

Claude Desktop

Open Settings → Developer → Edit Config and add:

"mcpServers": { "jh-presentation": { "command": "npx", "args": ["-y", "jh-presentation"], "env": { "JH_PRESENTATION_HOME": "C:/Users/you/Documents/decks" } } } }

Quit Claude Desktop from the tray icon and start it again. Then ask, for example:

Make a 15-minute deck explaining Git branching strategies, with diagrams and step-by-step reveals.

Claude Code

claude mcp add jh-presentation -e JH_PRESENTATION_HOME=~/decks -- npx -y jh-presentation

VS Code (`.vscode/mcp.json`)

"servers": { "jh-presentation": { "command": "npx", "args": ["-y", "jh-presentation"], "env": { "JH_PRESENTATION_HOME": "${userHome}/Documents/decks" } } } }

Where decks go, decided per call — no need to change the MCP settings to save somewhere else:

the dir a tool is given ("make it in this project's slides folder"),
the decks/ folder of the AI client's current workspace (Claude Code, VS Code and other clients that report MCP roots),
the workspace: JH_PRESENTATION_HOME (default ~/jh-presentation) or --workspace , for clients without one (Claude Desktop).

The workspace also holds the brand, custom themes and request templates shared by every project; a project's own brand/ or themes/ folder wins. --decks-dir (JH_PRESENTATION_DECKS_DIR) renames decks/, and --no-roots (JH_PRESENTATION_ROOTS=off) always saves to the workspace.

What the AI can do (MCP tools)

Area	Tools
Guide	`get_guide` — authoring rules, component catalog, workflow
Themes	`list_themes`, `open_theme_gallery`, `preview_themes`, `get_theme_guide`, `create_theme`
Templates	`list_templates` (also exposed as MCP prompts)
Decks	`list_decks`, `create_deck`, `read_deck`, `write_deck`, `replace_slide`, `add_asset`, `upgrade_deck`, `list_history`, `restore_history`, `repair_deck`
Maps	`create_map`, `read_map` (whole, `outline`, or one `node`), `write_map` (whole, or one `node` + `part`)
Checking	`audit_deck`, `screenshot_deck` (decks and maps)
Output	`open_deck` (optionally fullscreen), `export_deck` (PDF)

Presenting

Key	Action
→ / Space / Enter	Next (including steps)
←	Previous
S	Presenter view (notes, next slide, timer)
E / double-click a box	Edit text in place (Ctrl+S saves, Esc or "✕" exits)
O	Overview
F	Fullscreen
B	Blackout
number + Enter	Jump to slide
?	Help

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.

Working in this repository

npm install

npm run dev # http://localhost:4000 — deck list, theme gallery, feature sample npm test

Command	Description
`npm run dev`	Preview server with live reload (local only, 127.0.0.1)
`npm run new -- "Title" [--theme ] [--brand footer] [--fullscreen]`	New deck in `decks/`
`npm run upgrade [-- ]`	Re-embed the latest engine, theme and brand
`npm run pdf --`	Export a PDF to `dist/`
`npm run repair --`	Repair a deck broken by the browser's "Save page as"
`npm run gallery`	Build the theme gallery
`npm run mcp`	Start the MCP server (workspace `.workspace/`)

The feature sample is examples/sample.html. Rules for AI authors live in CLAUDE.md (Claude Code), AGENTS.md (Codex, Cursor and other agents) and docs/authoring-guide.md; the edit protocol for host applications is in docs/edit-protocol.md.

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.

Security

Everything 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.

License

MIT. 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.

日本語

AI にプレゼンを「Web ページ」として作らせる MCP サーバーです。Claude Desktop・Claude Code・VS Code などの AI クライアントが内容を書き、jh-presentation が1 ファイルの HTML デッキにします。動く図・段階表示・その場での文字編集・PDF 出力に対応し、AI は検査とスクリーンショットで自分の出来を確認して直せます。API キーは不要です (考えるのは普段使っている AI クライアント)。

動く図の部品: 関連図・ズームマップ・ER 図・シーケンス図・グラフ・3D 分解図・ビフォー・アフター・ターミナル再生 (AI は JSON を書くだけ)
階層マップ: 大きなシステムの関連図をクリックで何段でも中へ。階層をまたぐデータの流れ、DB の中のテーブルと外部キー、状態遷移図 (遷移させて確かめる)
マップ文書: スライドなしで全体から細部へたどって読む 1 ファイルの資料 (開閉できる目次・検索・URL での共有・拡大縮小・テーマの切り替え・階層ごとの印刷)
テーマ 5 種 + 自作テーマ、名前・ロゴの帯、依頼文テンプレート (技術解説・LT・進捗報告・技術提案)
枠をダブルクリックして文字を直し、Ctrl+S で元のファイルに保存 (ブラウザの「名前を付けて保存」は使わない)
発表者ビュー・一覧・全画面、保存履歴と復元、壊れたデッキの復旧

使い方 (Claude Desktop)

設定 → 開発者 → 「構成を編集」で次を追加し、タスクトレイから終了して再起動します。

"mcpServers": { "jh-presentation": { "command": "npx", "args": ["-y", "jh-presentation"], "env": { "JH_PRESENTATION_HOME": "C:/Users/you/Documents/decks" } } } }

あとは「jh-presentation で、Git のブランチ戦略を 15 分で説明するプレゼン資料を、図とステップ表示を多めに作って」のように頼むだけです。依頼の書き方 (道具の名前を書くべきクライアント・依頼文に入れるとよいこと・直し方) は docs/usage.md にまとめています。詳しい設定 (Claude Code・VS Code) は mcp/README.md を参照してください。このリポジトリで AI に作業させる場合のルールは CLAUDE.md (Claude Code) / AGENTS.md (Codex・Cursor など)、スライドの書き方は docs/authoring-guide.md にあります。

ライセンスは MIT です。デッキには埋め込んだエンジン・部品・テーマの MIT 表記が自動で入るので、そのまま配布できます。スライドの内容は作成者のものです。

jh-presentation

ภาพรวม

สามเสาของ PopNx MCP

ใช้ทำอะไรได้

ติดตั้ง

ก่อนติดตั้ง

ค่าที่ต้องใส่เอง

ทำอะไรได้บ้าง

ผลตรวจเบื้องต้นi

ตัวตนผู้ทำตรงกับ repo

ยังมีคนดูแล

มีสัญญาอนุญาต (license)

endpoint ตอบ

ล็อกอินแบบ OAuth

คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

เทียบกับตัวอื่นในหมวด เอกสาร ตาราง และงานออฟฟิศi

คำถามที่พบบ่อย

ตัวที่ใช้แทนได้

Agent-Native Calendar

Excel MCP Server

MCP Server for Excel

README จากผู้ทำ

jh-presentation

Why HTML instead of PowerPoint?

Features

Requirements

Quick start

Claude Desktop

Claude Code

VS Code (.vscode/mcp.json)

What the AI can do (MCP tools)

Presenting

Working in this repository

Security

License

日本語

使い方 (Claude Desktop)

VS Code (`.vscode/mcp.json`)