I used Claude Code + Codex to build most of a full AI karaoke video editor

I wanted to share a project I’ve been building almost entirely with LLM help, mainly Claude Code and Codex.

The app is called Karaoke Studio: https://karaokestudio.pro/

https://reddit.com/link/1tc644k/video/tdqyyvohtx0h1/player

It is free to try. Paid tiers exist, but the point of this post is more about the AI-assisted build process than promotion.

What I built:

Karaoke Studio is a browser-based karaoke video editor. The goal is to let someone upload a song or video and turn it into a finished karaoke video, not just an instrumental audio file.

The current workflow is:

1. Upload audio or video

2. Run vocal separation

3. Generate or import synced lyrics

4. Analyze beats / BPM / chords

5. Style karaoke captions

6. Edit everything on a timeline

7. Export a finished MP4 for YouTube, TikTok/Reels/Shorts, events, or practice

Technical stack:

- Next.js 16 App Router

- TypeScript

- React

- Prisma

- Neon Postgres

- NextAuth

- Vercel

- Vercel Blob for larger uploads

- Stripe / subscription logic

- WebCodecs-based browser rendering/export path

- Media extraction in the browser

- BS-RoFormer for vocal/stem separation on the backend

- Whisper for transcription / lyric timing

- Beat detection

- BPM analysis

- Chord detection

- Multi-track timeline editor

- Caption track system

- Karaoke-specific caption styles

- SEO/AEO pages with markdown twins and llms.txt

How I used Claude Code:

Claude Code was best for large codebase work. I used it like a senior pair programmer inside the repo.

Examples:

- mapping the existing editor architecture

- tracing Redux/project state issues

- finding why pages had huge blank gaps

- fixing landing page layout and scroll positioning

- cleaning up SEO metadata, canonicals, sitemap, robots, and structured data

- adding Google Analytics correctly with consent mode

- adding funnel tracking for signup -> project open -> upload -> karaoke create -> export

- adding Prisma models and migration for funnel events

- simplifying confusing UI flows

- removing customer-facing ONNX / quick preview options

- checking production deploy readiness

- writing deployment docs

- debugging Vercel build issues

- reviewing CSP/security headers

- making the app more crawler/indexing friendly

Claude was especially good when I gave it screenshots and said “this feels wrong, find where the UI layout is breaking.” It would

inspect the codebase, find the actual component/CSS/state issue, and patch it.

How I used Codex:

Codex was very useful for more engineering-heavy tasks where I wanted direct code edits, verification, terminal work, and deployment flow.

Examples:

- running local checks

- editing TypeScript files directly

- applying scoped patches

- running `tsc`, production checks, and Next builds

- deploying to Vercel production

- verifying live production HTML with `curl`

- confirming GA tag output

- checking git state and committing/pushing changes

- adding AEO markdown routes inspired by Dualmark

- adding `/llms.txt`

- adding markdown versions of high-intent SEO pages

- removing local ONNX preload code

- cleaning up route-handler typing issues from Next.js

The most useful part was not asking the LLM to “build an app” in one prompt. It was more like:

- inspect this bug

- explain the architecture

- make a minimal patch

- run checks

- deploy

- verify production

- repeat

Things the LLMs helped build or fix:

- Landing page conversion copy and layout

- Pricing anchor scroll behavior

- FAQ/footer visibility issues

- SEO metadata and sitemap cleanup

- Google Analytics installation

- Production Vercel deployment flow

- Funnel analytics in the database

- Editor menu simplification

- Karaoke creation flow

- Upload tracking

- Export tracking

- AEO/LLM-readable markdown pages

- Security header review

- CSP updates

- Indexed/private route noindex behavior

The biggest lesson:

LLMs were not magic when the task was vague. They became extremely effective when I treated them like repo-aware engineers and gave them concrete feedback:

- “This page has a blank gap”

- “This menu confuses users”

- “This is not detected by Google Analytics”

- “This route fails Vercel build”

- “Remove this option everywhere it is exposed”

- “Deploy and verify production”

The human part was still important. I had to decide what the product should do, test the UX, reject confusing options, approve copy, check screenshots, and decide when something was good enough for users.

But honestly, most of the implementation work was LLM-driven.

What surprised me:

The LLMs were strongest at boring-but-important production work:

- SEO

- analytics

- migrations

- deployment

- broken layouts

- route handling

- TypeScript errors

- CSP/security cleanup

- funnel tracking

They were weaker when I asked for “make it better” without giving specific constraints or screenshots.

If anyone is building with Claude Code / Codex, my main recommendation is:

Don’t ask it to generate a project from scratch and disappear. Keep it in a tight loop:

1. inspect

2. plan

3. patch

4. run checks

5. verify in browser or production

6. commit

7. repeat

That workflow got me much further than one-shot prompting.

Happy to answer technical questions about the build process, what worked, what failed, or how I split work between Claude Code and Codex.