Dev Cast — AI MR Demo Recorder

Stop writing "see attached video" in your MRs. Dev Cast records your feature automatically, generates an AI walkthrough, and posts both to your merge request — with all sensitive data masked.

Get started on GitLab →by Prajyoth Thungathurthi

Why add Dev Cast to your workflow?

Every MR gets a demo video

Reviewers see exactly what changed — no more "works on my machine" or stale screenshots.See what gets posted →

Secrets never leak

Tokens, passwords, and API keys are automatically masked in recordings. URL sanitization and frame-level secret detection run on every capture.Read about security →

AI writes the summary for you

Claude or GPT-4 watches the recording events and generates a step-by-step walkthrough, changelog, or technical summary.See AI demo mode →

Dashboard Preview

This is the Dev Cast management UI — browse recordings, build workflows, and configure integrations. All data below is mocked for demonstration.

Add Dev Cast to your CI pipeline — every MR gets a demo video with secrets masked

Token masking, URL sanitization, and frame-level secret detection are built in. Works with GitLab CI, GitHub Actions, and Jenkins.

Total Recordings

Active Workflows

MRs Updated

Housing Module Demo

completed

May 28, 10:30 AM0:45

Search Feature Demo

completed

May 27, 02:15 PM0:32

Dashboard Redesign

processing

May 28, 11:00 AM—

Auth Flow Recording

failed

May 26, 09:45 AM0:12

Settings Page Demo

recording

May 28, 11:30 AM—

Set it up in 3 minutesfull instructions →

1. Install Dev Cast

npm install git+https://code.roche.com/thungatp/dev-cast.git

2. Install Playwright & scaffold config

npx playwright install chromiumnpx mr-cast init

3. Authenticate (if your app uses SSO)

npx mr-cast auth http://localhost:4200 -o .dev-cast/auth-state.json

4. Record — manual or AI-generated

# AI workflow from your git diffnpx mr-cast demo --base-url http://localhost:4200# or record a single URLnpx mr-cast record --url http://localhost:4200/my-page

See the full SETUP.md for auth options, environment variables, CI/CD config, and troubleshooting.

Add it to your CI pipelineCI/CD docs →

GitLab CI

Add a record-demo stage that runs on every MR.

View .gitlab-ci.yml example →

GitHub Actions

Trigger on pull_request events with the reusable action.

View workflow YAML →

Jenkins

Run in a Playwright Docker container with changeRequest() trigger.

View Jenkinsfile →

Define what to recordfull syntax reference →

# .dev-cast/workflows/feature-demo.yml
name: "Feature Demo"
steps:
  - id: login
    action: { type: navigate, url: "${APP_URL}/login" }
  - id: fill-email
    action: { type: type, selector: "#email", text: "demo@example.com" }
  - id: submit
    action: { type: click, selector: "#submit" }
  - id: verify
    action: { type: wait, selector: ".dashboard" }
  - id: screenshot
    action: { type: screenshot, name: "dashboard" }
output:
  video: { format: mp4, chapters: true }
  gif: { enabled: true }
  summary: { template: walkthrough, model: claude }
  upload: { target: auto-detect }

security:
  maskPatterns:
    - name: api-tokens
      pattern: "Bearer [A-Za-z0-9._\\-]+"
    - name: passwords
      selectors: ["input[type=password]"]

Security built insecurity docs →

Recording your app means capturing what's on screen — Dev Cast makes sure nothing sensitive ends up in the video or MR comment.

✓

Token masking — Bearer tokens, API keys, and custom patterns are redacted from all outputs

✓

URL sanitization — Query params with tokens or session IDs are stripped before upload

✓

Frame-level detection — Each captured frame is scanned for secrets before encoding

✓

Password field masking — CSS selectors target password inputs so typed values never appear

How it worksdetailed walkthrough →

CLI parses flags → loads config → calls SDK
  │
  ├─ Core (Playwright)    Record browser interactions as video
  ├─ Video (ffmpeg)       Compress, add chapters, generate GIF
  ├─ AI (Claude/GPT-4)    Analyze events → generate walkthrough
  └─ Integrations         Upload to GitLab MR / GitHub PR / Jira / Slack

What your reviewers seeexample MR comment →

Demo Recording

🎬 Watch Demo (1:23) · GIF Preview

Feature Summary

Added Housing Dashboard with create/edit flows
Implemented form validation handling
Included responsive mobile layout

Steps Recorded

Open Login Page
Enter Credentials
Submit Login
Navigate to Dashboard
Create New House

✅ Playwright flow executed successfully

✅ All assertions passed

✅ No secrets detected in recording

Add Dev Cast to your project today

Three commands to set up, one YAML file to configure, and every MR gets a demo video with an AI-generated walkthrough — with all secrets automatically masked.

Quick Start Guide →CI/CD Setup →Workflow Syntax →

Created byPrajyoth Thungathurthi. Source code and full documentation atcode.roche.com/thungatp/dev-cast. This showcase page uses mock data to demonstrate the dashboard UI.