Lovable prototype to HeyGen client demo video in 20 minutes
A repeatable pipeline that takes a working Lovable prototype, captures the key screens, and produces a narrated HeyGen walkthrough video with an AI presenter. For freelancers who are sick of recording their own screen at 11pm.
- Time saved
- Saves 3-4 hrs per demo
- Monthly cost
- ~£40 / $50 (Lovable Pro + HeyGen Creator)/mo
- Published
You are a freelance designer or an indie founder. You just finished a prototype in Lovable and the client wants to see it tomorrow morning. The old workflow: open OBS, fumble the microphone levels, record yourself clicking through the prototype, stumble over a word somewhere in the middle, record it again, edit out the pauses, export, upload, paste the link into an email.
This workflow replaces all of that with a short automated pipeline. You capture the key screens from your Lovable prototype, hand them to HeyGen with a short script, and HeyGen generates a narrated walkthrough with a professional AI presenter in the corner of each slide. The whole pipeline takes about 20 minutes to set up once, then about two minutes of active effort per future demo.
What you'll build
A repeatable process that:
- Takes screenshots from a Lovable prototype's preview URL
- Writes a short per-screen narration script
- Submits everything to HeyGen via its API to generate a video with an AI presenter
- Returns a download URL you can share with the client or embed in a project page
- Total output: a 2-4 minute walkthrough video, 1080p, with captions and a consistent narrator voice
Prerequisites
- A Lovable account. The free tier is enough if your prototype is public; you will need a paid plan if the preview is behind auth or uses a custom domain.
- A HeyGen account on the Creator plan or higher. The free plan does not include API access, so the automated version of this workflow requires at least the £24/month Creator tier. Manual submission via the HeyGen web interface works on the free plan but you lose most of the automation.
- A HeyGen API key. Get this from Settings → API → Generate Key in the HeyGen dashboard.
- Python 3.10 or higher. The code below uses
requestsand nothing else, so you don't need any exotic dependencies. - A folder to store screenshots and generated scripts. Anywhere on your machine is fine for the first run; a shared cloud folder is better once you do this more than once.
- About 30 minutes the first time, mostly spent picking an avatar and voice in HeyGen that you are happy to use across all your client demos.
How to build it
Step 1: Capture your Lovable prototype screens
Open your Lovable project and click Share → Copy preview link. The preview URL will look something like https://preview--yourproject.lovable.app. Open it in a fresh browser window so you have a clean frame.
You want roughly 3 to 5 screenshots covering the key parts of the prototype. For most client demos, that is:
- The landing or entry screen
- The main workflow or feature view
- A settings or configuration page
- A results or output view
- Any hero moment you specifically want the client to see
Use your browser's full-page screenshot tool. In Chrome: cmd-shift-P (or ctrl-shift-P on Windows), then type "capture full size screenshot". Save each one to a folder like ./demo-screens with a numbered name:
demo-screens/
01-landing.png
02-workflow.png
03-settings.png
04-results.png
The numbered prefix matters because the next step processes them in alphabetical order.
Step 2: Write a per-screen script
Alongside your screens folder, create a plain text file called script.txt with one short paragraph per screen, separated by blank lines:
This is the landing page your team will see when they log in. We have kept it minimal on purpose, with the three most common actions surfaced right at the top.
Here is the main workflow view. Drag any item from the left panel into the timeline to start building out a sequence. You can duplicate, reorder, and preview inline without leaving the page.
Settings lets you customise the notification preferences, connect your existing tools, and invite teammates. We have pre-filled the common options based on the brief.
Finally, the results view. Anything generated by the workflow lands here, with full history, export options, and shareable links for each item.
Keep each paragraph to two or three sentences. HeyGen will render this as roughly 15-25 seconds of narration per screen, which is the pacing that keeps clients watching.
Step 3: Pick an avatar and voice in HeyGen
Before you run the automation, go into HeyGen once, manually, and settle on an avatar and voice you are happy to use for every client demo going forward. Consistency matters here. If every demo uses a different presenter, clients notice.
Log into HeyGen, click Create Video → Avatar Video, pick an avatar from the gallery (the free public avatars are fine for most work, or you can create a custom avatar of yourself on the Creator plan and up), and pick a voice from the Voices library. Note the avatar_id and voice_id shown in the URL or the inspection panel when you select them. You will need these in the script below.
For most demo work I recommend a neutral business voice in your target language. If your client is in the UK, pick a British English voice. If they are in the US, pick an American one. HeyGen's British voices on Nova and Sonia are solid for UK audiences.
Step 4: Submit the video to HeyGen
Here is the Python script that ties it all together. It reads your script file, uploads each screenshot to HeyGen as a background image, builds a video payload with one scene per screen, and polls until the video is rendered.
import os
import time
import requests
from pathlib import Path
HEYGEN_API_KEY = os.environ["HEYGEN_API_KEY"]
BASE_URL = "https://api.heygen.com/v2"
AVATAR_ID = "your_avatar_id_here"
VOICE_ID = "your_voice_id_here"
def upload_asset(image_path: Path) -> str:
"""Upload an image to HeyGen and return the asset URL."""
with open(image_path, "rb") as f:
response = requests.post(
f"{BASE_URL}/asset/upload",
headers={"X-Api-Key": HEYGEN_API_KEY},
files={"file": (image_path.name, f, "image/png")},
)
response.raise_for_status()
return response.json()["data"]["url"]
def load_script(script_path: Path) -> list[str]:
"""One paragraph per scene, blank-line separated."""
text = script_path.read_text(encoding="utf-8")
return [p.strip() for p in text.split("\n\n") if p.strip()]
def build_scenes(screens: list[Path], scripts: list[str]) -> list[dict]:
assert len(screens) == len(scripts), (
f"Script has {len(scripts)} paragraphs but "
f"{len(screens)} screenshots. These must match."
)
scenes = []
for screen, narration in zip(screens, scripts):
background_url = upload_asset(screen)
scenes.append({
"character": {
"type": "avatar",
"avatar_id": AVATAR_ID,
"avatar_style": "circle",
"scale": 0.8,
"offset": {"x": 0.35, "y": 0.35},
},
"voice": {
"type": "text",
"input_text": narration,
"voice_id": VOICE_ID,
},
"background": {
"type": "image",
"url": background_url,
},
})
return scenes
def create_video(scenes: list[dict], title: str) -> str:
payload = {
"title": title,
"caption": True,
"dimension": {"width": 1920, "height": 1080},
"video_inputs": scenes,
}
response = requests.post(
f"{BASE_URL}/video/generate",
headers={
"X-Api-Key": HEYGEN_API_KEY,
"Content-Type": "application/json",
},
json=payload,
)
response.raise_for_status()
return response.json()["data"]["video_id"]
def poll_for_completion(video_id: str) -> str:
"""Poll every 15 seconds until the video is ready."""
while True:
response = requests.get(
f"{BASE_URL}/video_status.get?video_id={video_id}",
headers={"X-Api-Key": HEYGEN_API_KEY},
)
data = response.json()["data"]
status = data["status"]
if status == "completed":
return data["video_url"]
if status == "failed":
raise RuntimeError(f"HeyGen rendering failed: {data.get('error')}")
print(f" …{status}, waiting 15s")
time.sleep(15)
if __name__ == "__main__":
screens_dir = Path("./demo-screens")
script_path = Path("./demo-screens/script.txt")
screens = sorted(screens_dir.glob("*.png"))
scripts = load_script(script_path)
print(f"Building video from {len(screens)} screens")
scenes = build_scenes(screens, scripts)
video_id = create_video(scenes, title="Client Demo - Project Alpha")
print(f"Video ID: {video_id}")
video_url = poll_for_completion(video_id)
print(f"\nDone. Video URL: {video_url}")
Save this as demo.py, set HEYGEN_API_KEY in your environment, and run it. Rendering a 2-minute video with four scenes typically takes 3-5 minutes, so do not leave the script polling in your terminal, put it in the background and check the output when it returns.
Step 5: Share with the client
The video_url HeyGen returns is a direct MP4 download. You have a few options for sharing it:
- Download the file and host it on your own project page. This is the most stable option but costs you storage.
- Use the
video_urldirectly in an email. HeyGen URLs are public and don't expire quickly, but they are not branded with your name. - Upload the downloaded file to Loom or a Vimeo unlisted link for a cleaner review experience with comments.
For most client work, option 3 is the best balance. Loom's review interface lets the client leave timestamped comments without needing an account.
Cost breakdown
- Lovable Pro: £16/mo (only needed if your prototype is private or uses a custom domain)
- HeyGen Creator: £24/mo (needed for API access and most avatar customisation)
- Total: £24 to £40/mo depending on whether you already pay for Lovable Pro
Per-demo cost: effectively zero once the subscriptions are running. HeyGen's Creator plan includes 15 credits per month, which works out to roughly 15-30 minutes of rendered video, or about 10 demo videos of average length. If you ship more than ten demos a month, the Business plan at £72/mo is where the maths tips.
Who this isn't for
The AI presenter is not a replacement for a real screen recording of you talking through a prototype, and for some client relationships it will read as impersonal. The clients most likely to love this workflow are ones you already have a direct working relationship with, who just want a shareable artefact to forward to their team. For pitch work, first-touch clients, or anything where the demo video is doing the work of selling you personally, record it yourself. Save this automation for the repeat work.
There is also an industry split worth naming. HeyGen's avatars have a detectable AI-presenter quality that traditional enterprise clients often react badly to. Legal, finance, insurance, professional services: test this on one client before rolling it out across the portfolio. Startups, creative agencies, and modern tech clients tend not to notice or not to care.
More Recipes
Automated Podcast Production Workflow
Automated Podcast Production Workflow: From Raw Audio to Published Episode
Build an Automated YouTube Channel with AI
Build an Automated YouTube Channel with AI
Medical device regulatory documentation from technical specifications
Medtech companies spend significant resources translating technical specs into regulatory-compliant documentation.