Skip to content
ScreenCI

Generating Videos

With current AI and codegen tools, creating product videos or at least first drafts is usually faster then writing by hand.

Once you have a draft, continue with Video Script Basics to clean up the script, structure the flow, and add ScreenCI narration and camera helpers.

You will learn

AI generation based on source code

This is often the most suitable path when the app you want to show already lives in the same repository, because ScreenCI handles AI-generated scripting especially well in that setup.

Good setup:

  • initialize ScreenCI inside the existing repository
  • accept the ScreenCI skill install during screenci init, or run npx -y skills add screenci/screenci --skill screenci -y later
  • point the agent at the routes and components that define the flow
  • ask it to verify the result with screenci test

Example prompt for a repo-based workflow:

create a screenci video for the onboarding flow in english and spanish.
Inspect @src/routes/onboarding and @src/components/signup-form.tsx.

The agent should verify the script with npx screenci test and the final recording can be recorded via npx screenci record.

AI generation based on URL with playwright-cli

Use this path when you want to create a video from a live site and or if you do not have the application source code easily available. Here we guide the agent to inspect the real site and write the video script based on that.

Good setup:

  • initialize a standalone ScreenCI project
  • accept the ScreenCI skill install during screenci init, or run npx -y skills add screenci/screenci --skill screenci -y later
  • accept the optional playwright-cli install during screenci init, or run npx -y skills add screenci/screenci --skill playwright-cli -y and install @playwright/cli later

Example prompt for a deployed-site workflow:

Create a screenci video for https://screenci.com that shows
how to find the documentation. Use playwright-cli.

Again, the agent should verify the script with npx screenci test and the final recording can be recorded via npx screenci record.

Playwright codegen

You can also leverage Playwright’s test generator / codegen tool. Use it when you want to manually click through the exact flow in the browser.

For example you could run:

Terminal window
npx playwright codegen https://screenci.com

This opens a browser window and the Playwright Inspector. As you click, type, and navigate, it generates Playwright actions for the flow.

The output is not a final ScreenCI video yet, but to make it work with ScreenCI you should:

  • copy the code to some /videos/*.video.ts file
  • change test to video
  • add narration using createNarration

Then you can follow the npx screenci test and npx screenci record flow.