DEV Community

Cover image for I Built an AI Dubbing App with Claude Code Agents — Here's What I Learned
이진욱
이진욱

Posted on

I Built an AI Dubbing App with Claude Code Agents — Here's What I Learned

1 OVERVIEW

GitHub: https://github.com/jin-wook-lee-96/ai-dubbing

Upload audio or video → get a dubbed MP3 in 7 languages. Built with Next.js 16, ElevenLabs STT/TTS, GPT-4o-mini, and a 5-agent Claude Code workflow.


2 Pipeline

File upload → ElevenLabs STT → GPT-4o-mini translation → ElevenLabs TTS → MP3


3 Problems Worth Sharing

1. Vercel's 4.5 MB request limit

Never send the file to the API. Client uploads directly to Vercel Blob; API receives only the URL.

2. SSRF on the Blob URL input

Allowlist before any fetch — https: protocol + hostname must end with blob.vercel-storage.com. Same for targetLang to block prompt injection.

3. Large files

Files over 60s are cropped client-side using Web Audio API + MediaRecorder before upload. Works on iOS Safari via webkitAudioContext fallback. Server never sees the oversized file.


4-Agent Claude Code Workflow

Agent Role
senior-web-designer UI/UX
frontend-senior-dev Components
code-error-fixer Bugs & build errors
security-auditor OWASP, SSRF, injection
senior-pm-writer Docs & articles

security-auditor caught 4 issues pre-launch: unprotected DB init endpoint, hardcoded emails in source, open SSRF vector, and missing input allowlist on targetLang.

Bonus trick: AGENTS.md tells every agent "this is Next.js 16 — read node_modules/next/dist/docs/ first." Zero deprecated API usage across the entire codebase.


Try it: https://ai-dubbing-seven.vercel.app

Star it: https://github.com/jin-wook-lee-96/ai-dubbing

Top comments (0)