devsfield

Inspiration

I've lost multiple hackathons not because my code was weak, but because my demo video was. In all my hackathon projects — the pattern was the same every time: strong submission, poor presentation. I'd spend days building a solid product then rush a screen recording at midnight that did it no justice.

I realized this isn't just my problem. Most developers are builders, not storytellers. We know our product inside out but struggle to present it in 60 seconds in a way that makes judges care. Devfields exists to close that gap.

What it does

Devfields takes two inputs — a GitHub repository URL and a deployed app URL — and automatically generates a professional, narrated demo video.

It reads your repo via the GitHub API (README, file tree, source files) and plans a time-budgeted shot list with DeepSeek-V3.2. A Playwright-controlled headless browser then actually navigates your live deployed app beat by beat, using Claude Sonnet 4.6 (falling back to Gemini Flash-Lite) to visually ground each action against the real page — including signing into a demo account if your app is behind auth. Each segment's real on-screen observation grounds a narration line, which is converted to voice, synced to its screen clip with FFmpeg, and concatenated into a final MP4. Every asset is uploaded to Backblaze B2 with a SHA-256 provenance manifest.

No recording setup. No video editing. No designer. Just your repo and your deployed URL.

How we built it

• Frontend: Next.js 14 (App Router) + TypeScript, deployed on Vercel
• Backend: FastAPI + Python 3.11, deployed on Railway
• Repository analysis: GitHub REST API — fetches README, file tree, key source files, and framework detection; DeepSeek-V3.2 (via GMI Cloud) turns that into a prioritized, time-budgeted shot list
• Live app analysis: Playwright (headless Chromium) actually browses the deployed app beat by beat and records it — not static screenshots. Claude Sonnet 4.6 (via GMI Cloud, falling back to Gemini Flash-Lite) visually grounds each planned action against the real page
• Script generation: DeepSeek-V3.2 via GMI Cloud writes one narration line per segment, word-fitted to that segment's real recorded duration
• Voice generation: Genblaze SDK orchestrating MiniMax TTS (speech-01-turbo / 2.6-turbo) via GMI Cloud's GMICloudAudioProvider — one clip per segment, generated in parallel
• Title card: Genblaze SDK orchestrating Seedream 5.0 Lite via GMI Cloud's GMICloudImageProvider
• Video assembly: FFmpeg splits, pads, and merges each segment's screen clip with its voiceover, then concatenates into the final MP4
• Storage: Backblaze B2 via Genblaze's S3StorageBackend (hierarchical key layout), with a SHA-256 provenance manifest generated per job

Challenges we faced

Keeping the narration honest to what was actually visible was the hardest part — a generic script that could apply to any app was useless; it had to be grounded in what the browser agent actually observed on each screen.

The second challenge was timing: the planner estimates each line's word count from a fixed speaking pace, but the real TTS voice speaks faster or slower depending on the line. Rather than only catching a mismatch after the whole video failed to assemble, we measure each clip's actual duration right after it's generated and re-synthesize on the spot if it's outside tolerance — before assembly ever sees it.

What we learned

A demo is not a recording of your product. It is an argument for why your product matters. The script is the pitch, the visuals are the evidence, and the voice is the delivery. Getting an AI to understand that distinction — and generate accordingly — is a genuinely hard problem.

What's next

• Multi-scene timeline editor so developers can reorder, trim and customize scenes before final render
• One-click export directly to Devpost, YouTube and LinkedIn
• Team collaboration so multiple founders can contribute to the same demo project
• Custom branding — logo overlays, color themes and intro/outro templates
• Analytics dashboard to track how many people watched your demo and for how long
• Support for mobile app demos via uploaded screen recordings fed into the same AI narration pipeline

Built With

• api
• b2
• backblaze
• css
• deno
• genblaze
• github
• node.js
• react
• supabase
• tailwind
• typescript
• vercel