Choose a capture resolution and recording mode, then either save a quick MP4 or import a clean .f0rec package into a Flowgen project and edit its cursor, zooms, markers, narration, and cuts in the native Compositor.
Where: External MCP host connected to f0 → call f0_record; for editable work continue with flowgen_open_compositor or retry with f0_import_recording_to_flowgen.
Before you start
- Connect an authenticated f0 MCP server and use the Electron desktop recorder. Ask the user to choose the output resolution before calling f0_record.
Key ideas
- Resolution is an explicit capture choice: The recorder requires a preset or custom even pixel dimensions. Retina capture separates the CSS viewport used for click coordinates from the requested output pixel size.
- Quick MP4 and editable package are different outputs: Quick mode writes a cursor-baked MP4 plus its cursor sidecar. Editable mode writes a .f0rec package with clean video, separate pointer/click data, and capture metadata.
- Editable mode can create a Flowgen Compositor project: The default destination imports the package into a new Flowgen project and videoCompose node, preserving cursor and zoom editing. Download destination keeps only the package.
Steps
- Ask the user to choose a resolution. Select a supported preset such as 16:9-4k or 9:16-1440p, or choose custom and provide even width/height values from 1440 through 4096.
- Prepare ordered recording steps. Include a 10-second wait before the first mouse movement and after navigation so the page has time to settle. Label important non-wait steps to create timeline markers.
- Call f0_record with the chosen resolution and captureMode quick or editable. Choose project mode with a projectId or app mode to begin at a dashboard/startPath route.
- For quick mode, review the returned MP4 and cursor sidecar. For editable mode, confirm the returned package path and import result; default destination flowgen returns projectId, nodeId, and layerId.
- Open the resulting videoCompose node with flowgen_open_compositor and read the root and recording compositions before editing. Use stable layer IDs, the returned document revision, and the captured dimensions.
- Use split/trim to isolate an unwanted span, ripple-delete to close the gap, and retime to change speed and duration together. Re-read the document after structural edits.
- Use the recording-edit tool to add/update/remove/disable zooms and adjust cursor settings. Treat zoom timing as source-local seconds and focus coordinates as capture pixels.
- Add narration, titles, music, and effects on separate editable layers. Inspect audio and frames around every cut before rendering.
- If capture succeeds but import fails, retain the returned .f0rec package and call f0_import_recording_to_flowgen with its path; recording does not need to be repeated.
Resolution presets
- 16:9-4k — 3840×2160; 16:9-1440p — 2560×1440.
- 9:16-4k — 2160×3840; 9:16-1440p — 1440×2560.
- 1:1-4k — 2160×2160; 4:3-4k — 2880×2160.
- custom — even width and height, each 1440–4096.
- The 4K editable presets create a half-size output canvas to leave source pixels for a 2× zoom. The recorder refuses to silently upscale if the capture surface provides fewer pixels than requested.
What an editable .f0rec contains
- screen.mp4 without the AI cursor baked in.
- mouse.jsonl with capture-space pointer samples and clicks.
- meta.json with the recording dimensions and package metadata.
- Successful labeled steps become Compositor markers at encoded video times.
- The tutorial capture has no audio track; narration is added separately in the Compositor.
Editing the recording
- Split/trim for a precise span; ripple delete closes a gap.
- Retime changes playback speed and duration together while preserving the source interval.
- Recording zoom times are source-local seconds; focus x/y are in capture pixels.
- The recording summary exposes zoom IDs, cursor settings, source dimensions, and capture size for safe tool calls.
Tips
- Prefer a 4K preset when the tutorial needs visible zooms into a standard HD or portrait deliverable.
- Keep each user-facing action as its own short labeled step so the marker lane is useful during editing.
- Before export, review at least one frame before and after every split and listen to the final mix if you added audio.
Limitations and important notes
- Captures are silent; tutorial narration is not recorded by the MCP screen recorder.
- Editable import and local package reading require the desktop Electron recorder.
- Custom dimensions must be even integers in the supported range.
- If the local import fails, the retry works only while the .f0rec package remains accessible at its returned path.
Troubleshooting
f0_record refuses to start.
Provide a user-chosen resolution. For custom, verify width and height are even integers between 1440 and 4096.
The capture looks soft after zooming.
Choose a 4K capture preset before recording and ensure the output canvas leaves the intended 2× zoom headroom.
The Flowgen project was not created.
Use the returned packagePath with f0_import_recording_to_flowgen; the existing capture package avoids repeating the recording.