How to hand a demo-builder guide to Claude or Copilot to generate demo files, and how the widget UI replaces the terminal for cleaner on-stage control.
Takeaway 01
The demo builder guide is the file you hand to any AI agent to author demo scripts for you.
Takeaway 02
The widget UI is a chrome-free presenter view with timer and next/back/skip controls.
Takeaway 03
Screenshots at each demo stop point exist for debugging, not for the audience.
The Demo Builder Guide
The demo builder guide is a single Markdown-style file the author maintains in the repo. It documents the demo file format end-to-end: what an action is, what a prompt is, how sections work, how variables resolve. You give this file to your AI agent and the agent now knows how to write a demo for you.
The builder guide is the spec. With it, Claude or Copilot can generate working demo files from a conversation about what you want to show.
AI-Authored Demos
The workflow: you describe the demo you want in plain English. Claude reads the builder guide. You go back and forth on what to show and what to skip. Then Claude emits a complete demo file in the right format. You drop it in the demos folder and the launcher picks it up.
The author calls this powerful for himself. He says: "I really want to do a demo where I show off this thing" — and AI builds the script. The human stays at the requirements level.
AI authoring is not "AI runs my demo." The script still executes deterministically through the runner. AI only writes the file — the runner is the same deterministic engine.
The Widget UI Alternative
Beyond the terminal, the runner offers a widget UI: a small floating window that shows the current step, a running timer, and explicit next / back / skip / pause buttons. It is the same engine behind the scenes — just a cleaner presenter surface.
A widget on stage is less distracting than a terminal. The audience sees the SharePoint browser; the presenter sees the widget on a secondary display.
You launch it by running setup-and-demo against a widget-enabled demo. The widget opens; you resize it however you want.
Vertical and Horizontal Layouts
The widget supports both a tight vertical layout and a thin horizontal one. The vertical works on a sidebar; the horizontal lives along the top or bottom of the screen. The author notes the horizontal is useful on a laptop where there is no second display.
Layout flexibility matters because every venue has a different display setup. The widget adapts to the geometry available.
End Screenshots for Debug
At the end of a demo, the runner can take a screenshot. The author uses this for debugability, not as audience material — when he is building a demo, the end screenshot tells him "the run completed and the state looked like this."
Per-step screenshots also exist for the same reason. When iterating on a demo file, the author does not have to watch the whole run — he scans the snapshots.
This complements the --record flag from Video 07. --record snaps screenshots for backups; the debug screenshots are for the author iterating on the demo file itself.
The end-screenshot feature is not a replacement for OBS video recording. It is a single still at the final state, captured to confirm the demo ran to completion.
Flashcards — Guide 03
03 · Advanced
Demo Builder Guide
tap to reveal →
A single file in the repo that documents the demo script format. Hand it to any AI agent and the agent can author working demo files from a conversation.
← tap to flip back
03 · Advanced
AI-Authored Demo
tap to reveal →
A demo file generated by Claude or Copilot from a plain-English description plus the builder guide. The runner still executes it deterministically.
← tap to flip back
03 · Advanced
Widget UI
tap to reveal →
A floating presenter window with the current step, a running timer, and next / back / skip / pause buttons. Cleaner alternative to running the demo from a terminal.
← tap to flip back
03 · Advanced
Vertical / Horizontal Layout
tap to reveal →
Two widget layouts. Vertical fits a sidebar; horizontal fits a thin strip on top or bottom — useful on a laptop with no second display.
← tap to flip back
03 · Advanced
Debug Screenshot
tap to reveal →
An end-of-demo or per-step still captured for the author to verify the run completed. Lets you iterate on demo files without watching every run live.