Auto-generate a searchable help video library for an app
A lot of you asked how I created my how-to video library, so here’s a @Replit agent prompt you can copy for an auto-generated help video library for your app: "Build a searchable /help page of tutorial videos that are GENERATED by code, not recorded by hand: 1Add a demo mode (?demo=1) with seeded…. Task: Suggested implementation: Use Replit Agent to build a code-generated help video library. The workflow defines videos as scenes with routes, narration scripts, and cursor movements. Playwright records the app, TTS generates audio, and ffmpeg adds captions. Outputs include MP4s, transcripts, and a manifest.json for a searchable /help page. Human role: Review generated scripts and verify video quality before publishing.; tools: Replit Agent. Human role: The original post does not say how a person stayed involved.; limitations: Prerequisites include a working app with a demo mode (?demo=1) using seeded fake data to prevent DB writes. Integration uncertainty exists regarding the reliability of automated TTS and Playwright recording. Operating costs involve compute resources for video generation. Human approval is required for script accuracy and visual quality. Source reliability is secondary..
Tools
Published on Agent Work Atlas:
Overview
A lot of you asked how I created my how-to video library, so here’s a @Replit agent prompt you can copy for an auto-generated help video library for your app: "Build a searchable /help page of tutorial videos that are GENERATED by code, not recorded by hand: 1Add a demo mode (?demo=1) with seeded…
Workflow
Suggested implementation: Use Replit Agent to build a code-generated help video library. The workflow defines videos as scenes with routes, narration scripts, and cursor movements. Playwright records the app, TTS generates audio, and ffmpeg adds captions. Outputs include MP4s, transcripts, and a manifest.json for a searchable /help page. Human role: Review generated scripts and verify video quality before publishing.
Reported result
Actual outcomes are unknown as the source post does not report measured results or failures. Proposed acceptance check: Verify that the /help page loads correctly, search matches transcripts, and videos are fully keyboard accessible. Confirm that builds are resumable and frame-checks pass for all generated MP4s.
Human role
The original post does not say how a person stayed involved.
Limitations
Prerequisites include a working app with a demo mode (?demo=1) using seeded fake data to prevent DB writes. Integration uncertainty exists regarding the reliability of automated TTS and Playwright recording. Operating costs involve compute resources for video generation. Human approval is required for script accuracy and visual quality. Source reliability is secondary.
Try it
Act as a developer using Replit Agent. I want to build a searchable /help page for [replaceable app name] where tutorial videos are generated by code, not recorded manually. Steps: 1. Add a demo mode (?demo=1) with seeded fake data, ensuring no database writes occur. 2. Define video scenes in code: specify routes, narration scripts, and scripted cursor movements. 3. Use Playwright to record the app, TTS for narration, and ffmpeg to bake in captions and stitch scenes. 4. Output MP4 files, transcripts, and a manifest.json that the help page reads. 5. Ensure builds are resumable and perform frame-checks on every video. Make search match transcripts and ensure full keyboard accessibility. Deliverables: A working /help page, generated video assets, and the code implementation. Quality Check: Run a dry build for one sample video. Verify the MP4 plays, captions are synced, and the transcript is searchable. Do not publish until I confirm the sample output is correct. If inputs are missing, ask for the app's route structure and desired narration tone.
Source reports are not independently verified. Publication date is the catalog publication date, not the original article date.