Record how people actually work. Let AI extract every step. Get structured automation specs.
|
Share your screen and narrate your workflow. RecordFlow captures video, audio, screenshots, and real-time voice transcription simultaneously. |
Two AI models work together. Gemini 2.5 Flash watches your screen frames and extracts structured steps. Claude Sonnet 4.6 detects gaps and generates targeted follow-up questions. |
Get a complete breakdown: every step classified by automation potential, tools detected, data sources mapped, and a build spec ready for any builder. |
- Briefing System — Paste a discovery call transcript before recording. AI extracts context, tools, pain points, and generates a watch list so it knows what to look for.
- Screen + Voice Capture — Browser-based recording with
getDisplayMedia+getUserMedia. Web Speech API provides live transcription. No plugins needed. - Dual AI Pipeline — Gemini handles vision-heavy tasks (frame analysis, step extraction) at $0.30/1M tokens. Claude handles reasoning tasks (gap detection, briefing analysis) at $3/1M tokens.
- PII Redaction — Frames pass through OCR-based PII detection before storage. Emails, phone numbers, credit cards, and SSNs are automatically redacted with black overlays.
- Smart Follow-Ups — AI spots what's missing in the recorded process and generates questions tied to specific steps.
- Agent Instructions — Generate structured, per-project agent instructions with confidence levels and gap warnings. Export as JSON or Markdown.
- Build Spec Export — Generates automation specifications with time savings estimates, complexity breakdowns, and recommendations. Export as JSON, Markdown, or PDF.
- Analysis Progress — Real-time 4-stage progress tracking (frames → steps → gaps → follow-ups) with error recovery and retry support.
- Post-Recording Notes — Add typed notes after recording finishes. Re-analyze sessions with additional context at any time.
- Shareable Recording Links — Send a link to anyone. They record their screen without needing an account.
┌─────────────────────────────┐
│ Recording (every 7s) │
│ Screen frames + narration │
└──────────────┬──────────────┘
│
▼
┌─────────────────────────────┐
│ PII Redaction │
│ OCR → detect → black-box │
└──────────────┬──────────────┘
│
┌──────────────┴──────────────┐
│ │
▼ ▼
┌───────────────────┐ ┌───────────────────┐
│ Gemini 2.5 Flash │ │ Voice Narration │
│ Frame Analysis │ │ Timestamp-matched │
└────────┬──────────┘ └────────┬──────────┘
│ │
└───────────────┬───────────────┘
│
▼
┌─────────────────────────────┐
│ Gemini 2.5 Flash │
│ Step Extraction │
│ (merges frames + narration) │
└──────────────┬──────────────┘
│
▼
┌─────────────────────────────┐
│ Claude Sonnet 4.6 │
│ Gap Detection │
│ (compares vs briefing) │
└──────────────┬──────────────┘
│
▼
┌─────────────────────────────┐
│ Gemini 2.5 Flash │
│ Follow-Up Generation │
└──────────────┬──────────────┘
│
▼
┌─────────────────────────────┐
│ Agent Instructions │
│ + Build Spec Generation │
└─────────────────────────────┘
Narrations from voice transcription are matched to frames by timestamp proximity (10s window) before step extraction. The pipeline tracks progress across 4 stages with automatic error recovery.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) / React 19 / TypeScript |
| Styling | Tailwind CSS v4 — dark theme, green accent #22c55e |
| Database | Supabase (PostgreSQL + Storage) |
| AI — Vision | Gemini 2.5 Flash ($0.30/1M tokens) |
| AI — Reasoning | Claude Sonnet 4.6 ($3/1M tokens) |
| PII Detection | tesseract.js (OCR) + sharp (image redaction) |
| PDF Export | @react-pdf/renderer |
| Validation | Zod |
src/
├── app/
│ ├── api/ # API routes
│ │ ├── analyze/ # Analysis pipeline + progress
│ │ ├── projects/ # Projects, briefings, instructions, specs
│ │ └── sessions/ # Sessions, frames, steps, follow-ups, narrations
│ ├── dashboard/ # Project list → project detail → session detail
│ └── record/ # Browser-based recording interface
├── lib/
│ ├── ai/ # AI providers, prompts, analysis pipeline, instructions
│ ├── pii/ # PII detection (OCR) + redaction (sharp)
│ ├── spec/ # Build spec generator + PDF export
│ ├── types.ts # TypeScript interfaces
│ ├── validations.ts # Zod schemas
│ └── supabase.ts # Database client
supabase/
└── migrations/ # SQL schema (5 tables + analysis tracking)
- Node.js 18+
- A Supabase project (free tier works)
- Anthropic API key
- Google AI API key
git clone https://github.com/kaantaskentt/recordflow.git
cd recordflow
npm install- Create a new project at supabase.com
- Go to SQL Editor and run the migration files in order:
supabase/migrations/001_initial.sql supabase/migrations/002_project_tags.sql supabase/migrations/003_analysis_status.sql supabase/migrations/004_agent_instructions_and_intermediate.sql - Go to Storage and create a bucket called
recordings(set to public) - Copy your Project URL and anon key from Settings > API
cp .env.local.example .env.localFill in your keys:
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
ANTHROPIC_API_KEY=your-anthropic-api-key
GOOGLE_AI_API_KEY=your-google-ai-api-keynpm run devOpen http://localhost:3000. Create a project, paste a briefing transcript, create a session, record your screen, and watch the AI analysis run.
Recording requires getDisplayMedia and MediaRecorder APIs.
| Browser | Supported |
|---|---|
| Chrome | Full support |
| Edge | Full support |
| Firefox | Partial (no system audio) |
| Safari | Limited |
MIT
Built with Gemini + Claude