The latest articles on DEV Community by 이진욱 (@matthew_lee). https://dev.to/matthew_lee https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3842768%2Fa6b3ec01-3f0a-4f5f-babe-6187dc4cd0bd.png https://dev.to/matthew_lee en 이진욱 Thu, 26 Mar 2026 08:41:11 +0000 https://dev.to/matthew_lee/i-built-an-ai-dubbing-app-with-claude-code-agents-heres-what-i-learned-75p https://dev.to/matthew_lee/i-built-an-ai-dubbing-app-with-claude-code-agents-heres-what-i-learned-75p <h2> 1 OVERVIEW </h2> <p><strong>GitHub:</strong> <a href="https://github.com/jin-wook-lee-96/ai-dubbing" rel="noopener noreferrer">https://github.com/jin-wook-lee-96/ai-dubbing</a> ⭐</p> <p>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.</p> <h2> 2 Pipeline </h2> <p>File upload → ElevenLabs STT → GPT-4o-mini translation → ElevenLabs TTS → MP3</p> <h2> 3 Problems Worth Sharing </h2> <p><strong>1. Vercel's 4.5 MB request limit</strong><br><br> Never send the file to the API. Client uploads directly to Vercel Blob; API receives only the URL.</p> <p><strong>2. SSRF on the Blob URL input</strong><br><br> Allowlist before any fetch — <code>https:</code> protocol + hostname must end with <code>blob.vercel-storage.com</code>. Same for <code>targetLang</code> to block prompt injection.</p> <p><strong>3. Large files</strong><br><br> Files over 60s are cropped client-side using Web Audio API + MediaRecorder before upload. Works on iOS Safari via <code>webkitAudioContext</code> fallback. Server never sees the oversized file.</p> <h2> 4-Agent Claude Code Workflow </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Agent</th> <th>Role</th> </tr> </thead> <tbody> <tr> <td><code>senior-web-designer</code></td> <td>UI/UX</td> </tr> <tr> <td><code>frontend-senior-dev</code></td> <td>Components</td> </tr> <tr> <td><code>code-error-fixer</code></td> <td>Bugs &amp; build errors</td> </tr> <tr> <td><code>security-auditor</code></td> <td>OWASP, SSRF, injection</td> </tr> <tr> <td><code>senior-pm-writer</code></td> <td>Docs &amp; articles</td> </tr> </tbody> </table></div> <p><code>security-auditor</code> caught 4 issues pre-launch: unprotected DB init endpoint, hardcoded emails in source, open SSRF vector, and missing input allowlist on <code>targetLang</code>.</p> <p><strong>Bonus trick:</strong> <code>AGENTS.md</code> tells every agent "this is Next.js 16 — read <code>node_modules/next/dist/docs/</code> first." Zero deprecated API usage across the entire codebase.</p> <p><strong>Try it:</strong> <a href="https://ai-dubbing-seven.vercel.app" rel="noopener noreferrer">https://ai-dubbing-seven.vercel.app</a><br><br> <strong>Star it:</strong> <a href="https://github.com/jin-wook-lee-96/ai-dubbing" rel="noopener noreferrer">https://github.com/jin-wook-lee-96/ai-dubbing</a> ⭐</p> nextjs ai webdev claudecode