gptme/gptme-contrib/agentic-presentation

Agentic Presentation

Turn structured slide JSON into a standalone HTML deck that opens in any browser, offline.

When to Use

Use for: notes, research summaries, demos, or technical explanations that should be delivered as slides.

Do not use for: full web apps, long-form blog posts, or hosted dashboards.

Bundled Files

Workflow

1. Convert source notes into slide-deck JSON that conforms to presentation.schema.json.
2. Keep slide count tight: one idea per slide, short text, code blocks only when they teach the point.
3. Use these MVP slide types: title-slide, content, code-reveal, code-and-text, image, gallery.
4. Use these MVP animations: fade-in, slide-in, line-reveal. zoom and spin are schema-reserved but should stay rare.
5. Render locally — three ways (paths shown from the repo root):

# Quick path: render + open in browser
python3 skills/agentic-presentation/present.py deck.json --live
 
# Explicit path: render to a named file
python3 skills/agentic-presentation/present.py deck.json -o /tmp/slides.html
 
# Low-level: call the generator directly
python3 skills/agentic-presentation/generate_presentation_html.py \
  skills/agentic-presentation/examples/agentic-presentation-demo.json \
  -o /tmp/agentic-presentation-demo.html

The rendered HTML has built-in keyboard navigation: → or Space / Enter to advance, ← to go back.

Output Contract

• The generated file must be standalone HTML with inline CSS and JavaScript.
• Do not depend on CDNs for the MVP path; offline rendering is a hard constraint.
• Keep generated HTML below 500KB for ordinary decks. Use --max-kb to enforce the limit.
• Escape all user-provided text through the generator; do not hand-write HTML fragments inside slide JSON.

Authoring Guidance

Good slide JSON is compact and structured:

{
  "id": "code",
  "type": "code-reveal",
  "title": "Generator shape",
  "language": "python",
  "code": "deck = load_presentation(path)\nhtml = render_html(deck)",
  "animations": [{"type": "line-reveal", "target": "code"}]
}

Use content slides for prose and bullets. Use code-and-text only when the prose and code need to be compared side by side. Use image slides only when the image is the point, not decoration.

Verification

Rendering needs only the Python standard library. The tests additionally need pytest and jsonschema.

# Run the focused tests after changing the generator or schema
uv run --with pytest --with jsonschema pytest skills/agentic-presentation/tests/ -q

For visual verification, render the demo and open the HTML file in a browser. Check keyboard navigation, the slide counter, and the three MVP animations.

Related

• Skills README - Skills system overview