An AI-powered tool for creating tutorial videos from your iOS app codebase. Analyzes your Expo or React Native project and generates video content plans, then orchestrates the full video creation pipeline.
- AI Content Generation: Analyzes your codebase to generate tutorial video ideas
- Video Pipeline: Plan → Script → Record → Composite
- Smart Onboarding: Automatically checks and installs required tools
- API Key Management: Securely stores OpenRouter and ElevenLabs API keys
- Project Configuration:
.instructionsfolder for project-specific settings
# Clone and installcd instructionsCreator/cli
bun install
# Optional: Link globally for use anywhere
bun link- macOS with Xcode installed
- Xcode Command Line Tools:
xcode-select --install - Node.js 18+ and Bun (for running from source)
- FFmpeg (auto-installed during onboarding)
- AXe CLI (auto-installed during onboarding)
- API keys from OpenRouter and ElevenLabs (configured during onboarding)
screenwright onboardThis will:
- Check for required tools (Xcode, FFmpeg, AXe CLI)
- Install missing tools automatically
- Prompt for API keys (OpenRouter, ElevenLabs)
- Store configuration in
~/.screenwright/config.json
Example:
$ screenwright onboard
Tool Check Results:
✓ Xcode (/Applications/Xcode.app)
✓ simctl
✓ FFmpeg (7.1.1)
✗ AXe CLI
Install: npm install -g @axe-devtools/cli
Installing Missing Tools...
✔ AXe CLI installed
==================================================
API Keys Configuration
==================================================
Screenwright uses AI services for video creation.
OpenRouter API Key (for AI planning and script generation)
Get your key at: https://openrouter.ai/keys
This is used for: Planning, Script generation
Cost: ~$0.01 per video (varies by model)
Enter OpenRouter API Key (or press Enter to skip): [sk-or-...]
ElevenLabs API Key (for AI voiceover generation)
Get your key at: https://elevenlabs.io/app/settings/api-keys
This is used for: Voiceover audio generation
Cost: ~$0.30 per 1k characters (varies by voice)
Enter ElevenLabs API Key (or press Enter to skip): [xxxxxxxx...]
✔ API keys saved!
Onboarding Complete!
Next steps:
screenwright init Initialize a project
screenwright content generate Generate content ideasOnboarding Options:
--skip-tools- Skip tool checking and only configure API keys--skip-keys- Skip API key configuration--force- Re-run onboarding even if already completed
cd /path/to/your/project
screenwright initThis creates a .instructions folder in your project root with:
config.json- Your project configuration.gitignore- Ensures cache files aren't committedvideos.json- Stores content ideas and videos
Set up Screenwright - check tools, install dependencies, and configure API keys.
screenwright onboard [options]Options:
-s, --skip-tools- Skip tool checking and only configure API keys-k, --skip-keys- Skip API key configuration-f, --force- Re-run onboarding even if already completed
Show or update API keys configuration.
screenwright config:keys # Show API key status
screenwright config:keys --update # Update API keysInitialize the .instructions folder in your project.
screenwright init [--force]Options:
-f, --force- Reinitialize even if.instructionsalready exists
What it does:
- Detects your project type (Expo, React Native, or native iOS)
- Creates
.instructions/config.jsonwith default preferences - Creates
.instructions/.gitignoreto exclude cache files
Manage .instructions configuration.
screenwright config # Show configuration summary
screenwright config --show # Show full configuration
screenwright config --get <key># Get a configuration value
screenwright config --set <key>=<value># Set a configuration valueShow information about the current project.
screenwright infoGenerate video content ideas by analyzing your project codebase.
screenwright content generate [options]Options:
-n, --max-ideas <number>- Maximum number of ideas to generate (default: 10)-c, --max-categories <number>- Maximum number of categories (default: 3)
What it does:
- Analyzes your project structure to identify features and screens
- Generates tutorial video ideas organized by category
- Saves ideas to
.instructions/videos.json
Example:
$ screenwright content generate
Generating content ideas...
✓ Generated 8 content ideas!
Generated Categories:
Getting Started
Learn the basics of using MyApp
• Getting Started with MyApp
A quick introduction to MyApp and its main features
Core Features
Learn how to use MyApp's main features • Creating a Post Learn how to create and share posts on MyApp • Searching for Content Learn how to search and find content on MyAppList all generated content ideas.
screenwright content list [options]Options:
-c, --category <name>- Filter by category
List all videos.
screenwright videosCreate a new video from a content idea.
screenwright video create <ideaId>Show detailed status of a video.
screenwright video status <videoId>Generate recording plan using AI (analyzes simulator, tests interactions).
screenwright video plan <videoId>Generate voiceover script with precise timestamps.
screenwright video script <videoId>Record the video on simulator.
screenwright video record <videoId>Combine video and audio.
screenwright video composite <videoId>Run all stages (plan, script, record, composite).
screenwright video all <videoId>This runs the complete video creation pipeline:
- Plan: Uses AI to analyze the simulator and generate a detailed recording plan
- Script: Generates a voiceover script with precise timestamps
- Record: Executes the recording on the simulator
- Composite: Combines the video with AI-generated voiceover
Delete a video.
screenwright video delete <videoId>The video creation system consists of four stages, each building on the previous:
- AI Agent: Uses OpenRouter API with vision capabilities
- Process:
- Takes screenshots of the simulator
- Lists UI elements with coordinates
- Tests each interaction (tap, swipe, type)
- Generates a detailed recording plan with exact coordinates
- Output: Recording plan with setup steps and recording steps
- AI Agent: Uses OpenRouter API
- Process:
- Analyzes the recording plan
- Generates a natural, conversational voiceover script
- Calculates precise timestamps for each action
- Output: Voiceover script with timestamped actions
- Tool: Uses AXe CLI for simulator control
- Process:
- Executes setup steps before recording
- Starts screen recording
- Executes actions at precise timestamps
- Stops recording
- Output: Silent video file
- Tool: Uses FFmpeg
- Process:
- Generates AI voiceover using ElevenLabs
- Combines video and audio
- Outputs final video file
- Output: Final video with voiceover
Required API Keys:
OPENROUTER_API_KEY- For AI agents (planner, scriptwriter)ELEVENLABS_API_KEY- For voiceover generation
Stored in your project root:
{
"version": "1.0.0",
"projectPath": "/Users/john/my-app",
"projectType": "expo",
"createdAt": "2024-01-15T10:30:00.000Z",
"lastUpdated": "2024-01-15T10:30:00.000Z",
"preferences": {
"defaultDevice": "iPhone 15 Pro",
"defaultUseCache": true,
"defaultClean": false
}
}API keys stored globally:
{
"openrouterApiKey": "sk-or-...",
"elevenlabsApiKey": "...",
"onboardedAt": "2024-01-15T10:30:00.000Z"
}Screenwright also provides an SDK for programmatic access:
npm install @screenwright/sdkimport*asscreenwrightfrom'@screenwright/sdk';// Generate content ideasconstcategories=awaitscreenwright.generateAndSaveContentIdeas(projectPath,{maxIdeas: 10,maxCategories: 3});// Create a videoconstvideo=awaitscreenwright.createVideo(projectPath,idea);// Check video statusconststatus=awaitscreenwright.getVideo(projectPath,videoId);# Build SDKcd sdk && bun run build
# Build CLIcd cli && bun run buildcd cli
bun run devinstructionsCreator/
├── sdk/ # @screenwright/sdk
│ ├── src/
│ │ ├── index.ts # Main exports
│ │ ├── types.ts # Core types
│ │ ├── types-video.ts # Video types
│ │ └── utils/
│ │ ├── detect.ts
│ │ ├── config.ts
│ │ ├── video-storage.ts
│ │ ├── content-generator.ts
│ │ └── onboard.ts
│ ├── dist/ # Built SDK
│ ├── package.json
│ └── tsconfig.json
└── cli/ # screenwright CLI
├── src/
│ └── cli.ts # CLI entry point (uses SDK)
├── dist/ # Built CLI
└── package.json
# 1. First-time setup
screenwright onboard
# 2. Initialize projectcd my-expo-app
screenwright init
# 3. Generate content ideas
screenwright content generate
# 4. List content ideas
screenwright content list
# 5. Create a video from an idea
screenwright video create idea_xxxxx
# 6. Generate recording plan
screenwright video plan video_xxxxx
# 7. Generate script
screenwright video script video_xxxxx
# 8. Record the video
screenwright video record video_xxxxx
# 9. Composite final video
screenwright video composite video_xxxxx
# OR run all stages at once
screenwright video all video_xxxxxxcode-select --install
xcode-select -pScreenwright looks for specific project indicators:
- Expo:
package.jsoncontains"expo"dependency ORapp.jsonexists - React Native:
package.jsoncontains"react-native"dependency - Native iOS:
ios/directory contains.xcodeprojor.xcworkspace
# Check API key status
screenwright config:keys
# Update API keys
screenwright config:keys --updateMIT
Built with:
- Commander.js - CLI framework
- Chalk - Terminal styling
- Ora - Terminal spinners
- Bun - JavaScript runtime