Claude Made an 18-Minute Tutorial of My App

I thought that developing and rolling out an internal AI assistant would be the impressive part. Turns out that the tutorial and user guide created mostly by Claude is what blew me away.

Claude clicked through every screen of our internal application, typed the demo prompts, narrated every section in a voice that wasn't mine, built the branded title cards, and transcribed the whole thing in two languages. For the length of the shoot I mostly sat there and watched my own app give itself a tour.

We needed onboarding material for MemodoAI, the AI assistant we run internally at work (a self-hosted LibreChat fork). The ask: a walkthrough video and a written guide so that I would not get stuck doing tech support for my colleagues. The interesting part was how much of it I could hand off, and the two bits I couldn't.

The tutorial itself walks through our actual internal product, so I'm not putting all eighteen minutes on YouTube. What's below is a short montage: the intro and outro cards, the transition bumpers, and clips from the walkthrough. Enough to show what Claude built.

Don't see the player? Watch it on YouTube.

What we actually built

Two deliverables, one source of truth.

The source of truth is a shot list: every section broken into Action (what to click or type), Expected UI (what should be on screen after), and Capture (the screenshot or chapter name). When the product UI changes, you edit that one file and re-shoot only the sections it touched. The video and the written guide both read from it, so they can't drift apart. That single decision is the reason a video and a guide didn't turn into two separate maintenance burdens.

Everything downstream hangs off that file: the screenshots, the narration script, the chapter list, the captions.

A documentary, not an animated movie

Here's the mental model that made the rest fall into place. A product tutorial is not a motion-graphics piece, it's a documentary screen recording with a thin layer of branded chrome wrapped around it.

That reframing matters because it tells you where to spend effort. Three tracks get composited at the end:

• The documentary track is the live screen recording. Roughly 90% of the runtime.
• The decoration track is the branded intro, the section title cards, the outro. Maybe 10% of the runtime, and it carries something like 90% of the perceived polish.
• The audio track is the narration, one file per section.

Each track has its own little pipeline, so I could re-render narration without re-shooting, or swap a title card without re-cutting. Keeping them independent is what made iteration cheap.

Claude drove the live product

We connected Claude Code to the already-running, already-authenticated browser through the Claude-in-Chrome extension. I picked the extension over Playwright on purpose: the session was already logged in, so there was no auth setup to babysit. Claude could just act on the live product.

As it surveyed the live product, clicking through every screen to see which features were actually switched on in our deployment, it grabbed a region screenshot of each one at a fixed 1440×900 so everything lined up. We'd settled on a fifteen-section structure, and the thirty-two annotated PNGs came out numbered to match it. Those screenshots are what the written guide was built from.

For the video itself, that shot list (a single markdown file, recording-script.md) doubled as Claude Code's task list. I pointed Claude Code at it and it worked straight down the rows: read each Action, perform the click or keystroke in the live browser through the extension, check the result against the Expected UI, then move to the next row. A plain markdown file as the script, a real logged-in product as the runtime.

The narration was done by ElevenLabs text-to-speech. Eighteen per-section MP3s, about twenty minutes total, rendered from a script written to be spoken rather than read (short sentences, punctuation doing the work of pacing). The full render of a ~17,000-character script ran about a dollar. Fixing one sentence later costs cents.

10% makes it look professional

The branded chrome came out of Claude Design: a logo-in intro card, an outro, and fourteen section title cards. This is the decoration track, the part that turns a competent screen recording into something that looks deliberately produced. No motion-graphics tool, no designer in the loop, generated straight against the brand.

What stayed in my hands

Two things, and I'll name both, because "Claude made the video" quietly skips over them.

The first was pushing record. I tried to automate even that and lost. An early attempt fired screencapture -v in the background and let Claude run the whole walkthrough; the take vanished, because that tool doesn't flush its file when another process kills it, so a clean twelve-minute run produced nothing. The split that worked: Claude owns every bit of on-screen navigation, a human owns the record button in OBS. Claude walks the script start to finish, I start and stop the recording. (There's a more automated future where OBS gets scripted over its websocket API with named chapter markers. Worth it the day this becomes a recurring deliverable. It isn't yet.)

The second was the edit, and this is the one I don't want to undersell. The three tracks don't snap together on their own. I assembled them in Shotcut: the screen recording on video, a title card in front of each chapter, intro and outro on the ends, and then the slow part, sliding all eighteen narration clips until each line of voiceover lands on the click it's describing. If you cut video for a living, this is just the job, nothing exotic. If you don't, here's the honest version: it's a real full day of nudging clips a few frames at a time and re-watching to check the sync. Claude produced every ingredient. Plating it was still me at the timeline.

The actual edit, and the part I did by hand. The top video track is the screen recording chopped into sections; the green strips below are the eighteen narration files (section-01.mp3, section-02.mp3...); the colored pins are chapter markers. Lining the green up with the blue is the time sink.

The transcription

I transcribed the final edited cut with whisper.cpp, not a separate audio export, so the timestamps line up with the exact video the chapters point at. One run produced SRT and VTT captions, plain text, and token-timed JSON, in both English and German, plus the fifteen-entry chapter list that drives the clickable chapters in the in-app player.

Where it lives now

The video, the transcript, the chapters, and the written guide all surface inside MemodoAI. The written guide itself is a self-contained bilingual HTML page that Claude Design built from the same Markdown draft and the same screenshots: one file, all assets inlined, English and German.

The written guide: the same fifteen sections as the video, polished by Claude Design into one self-contained, bilingual (EN/DE) page.

All of it comes together on one page in the product: the video up front, the chapter list beside it, and the captions, transcript, and written guide a click away, each in English or German.

• A. Chapter list. Click any entry to jump to that point in the video.
• B. Captions. English and German.
• C. Full transcript. English and German.
• D. Written guide. English and German.

The shot list, narration script, screenshots, and the little tooling scripts (the TTS renderer, the whisper wrapper) all live in the repo if you want to see the actual machinery: docs/memodo-ai-tutorial on GitHub.

One person did all of this

Step back from the video for a second, because it sits on top of something much bigger.

Before any of this onboarding material existed, I'd already built MemodoAI itself: a Dockerized internal AI assistant with logging, monitoring, and observability, with security and PII detection on the data moving in and out, able to read most Microsoft Office documents, and wired into our Microsoft 365 environment. That's the real product. The eighteen-minute tutorial and the bilingual guide were what I bolted on top once it was running.

One person did both. A few years ago that sentence needs a backend engineer, a DevOps hire, a security reviewer, a technical writer, a screencaster, a voice actor, and a motion designer. I did it as a one-man army, because Claude collapsed most of those roles into "decide what you want, then check the work."

I'm not pretending it ran itself. I made the architecture calls, I caught what came back wrong, I pushed the record button and cut the video together. But the distance between what one motivated person can ship and what used to take a whole team has mostly closed. I wouldn't hand this video to a client. For internal onboarding, though, it's better than anything I could have made alone, and it took a fraction of the time.

How to make your own

If you want to build the same thing, here's the whole pipeline, start to finish.

1. Survey the product live, and grab the screenshots while you do. Connect Claude Code to your real, logged-in app through the Claude-in-Chrome extension and have it walk the whole interface with you. Settle on a section structure (I used fifteen), and in that same live pass capture a region screenshot of each screen. Those screenshots are what the written guide gets built from later.
2. Write the shot list. One file, one row per step: the action to take, the UI you expect after it, and the asset to capture (a screenshot name or a chapter title). This is the single source of truth that keeps the video and the guide in sync.
3. Write the narration script. One block per section, written to be spoken rather than read: short sentences, punctuation for pacing, no "click here." Flag the production cues so they don't get read aloud.
4. Render the narration. Send the script to a text-to-speech API (I used ElevenLabs) for one audio file per section. Changing a line later is a cheap re-render.
5. Record the screen. Have Claude drive the browser through the shot list from start to finish while a human works the record button in OBS. Capture one clean take; all the assembly happens afterward.
6. Make the branded chrome. Generate the intro card, the outro, and one title card per section in Claude Design, against your brand. This is the thin layer that makes the whole thing look produced.
7. Cut the video. In an editor (I used Shotcut), put the screen recording on one track and the narration on another, drop a title card in front of each section, and slide the audio until the voice lands on the action it describes.
8. Transcribe the final cut. Run the finished video through whisper.cpp for captions, a plain transcript, and a chapter list. Repeat for a second language if you want one.
9. Write and polish the guide. Draft the walkthrough in Markdown against the same screenshots, then hand the draft and the images to Claude Design to export one self-contained HTML page.
10. Put it where people already are. Drop the video, transcript, chapters, and guide somewhere your users already look. For us that's a page inside the product itself.