How to build an AI subtitle generator for your business with Claude Code

Rule of thumb: if you caption a handful of your own videos a month, do not build this. Rev’s 45 free minutes or Descript’s free hour covers you, and the rented models are more accurate than the one that runs in a browser. If you caption for clients, for a team or for other people’s uploads, the minutes are the bill, and owning the studio turns a meter into a fixed cost. The honest middle case is a product whose users need high accuracy on difficult audio, and there the right answer is to build the studio and swap in a larger speech model, accepting a longer first download in return.

* Unlike most apps in this catalogue, this one keeps large files: the videos people upload live in storage until you delete them. Supabase Free includes 1 GB of file storage and 5 GB of egress a month, and pauses a project after a week without activity. Pro, from $25/mo, includes 100 GB of storage and 250 GB of egress, then charges $0.0213 per GB stored and $0.09 per GB served, and keeps a daily backup for 7 days. A retention rule that deletes a video a month after its last export is the cheapest decision on this page.

Prices and rates from supabase.com, developex.com and claude.com, checked September 2026.

Nothing here is worth memorizing. These four just need to exist on your machine. From step 01 on, you say what you want and Claude Code runs the commands.

1. 01

   Set up the project

   An empty app running against your own database, plus a notes file so Claude Code keeps the one rule this build depends on in front of it.

   PromptSet up the projectCopy

   Set up a new React 18 + Vite + TypeScript project with Tailwind and the Supabase JS client. Read VITE_SUPABASE_URL and the publishable key (the sb_publishable_… key, which replaces the older anon key) from .env, and add .env to .gitignore in the same step so neither value reaches GitHub. Add a typed Supabase client under src/lib, then write a short CLAUDE.md describing the stack and the vocabulary for a subtitle studio (videos, tracks, captions, exports) and recording two standing rules: transcription always runs in the visitor’s browser and is never sent to a server, and the only call that leaves the app is translation through one server-side function.

   Write the browser-only rule down now. A server-side transcription service is the first thing any assistant will reasonably suggest later, and it would put back the per-minute bill this whole build exists to avoid.

2. 02

   Prove transcription works in the browser before building anything on it

   Load the speech model into the page and caption one clip with it. No library, no editor, no design: a file in, timed lines out. If this step is going to fight you, find out now.

   PromptGet the speech model running in the browserCopy

   Add @huggingface/transformers and build one throwaway page that proves in-browser transcription works: a file picker for a local video, a button, and a list of lines with start and end times when it finishes. Run the model in a Web Worker so the page stays responsive, load onnx-community/whisper-tiny with device set to webgpu and fall back to wasm when WebGPU is unavailable, decode the audio in the browser and feed it to the model in thirty-second chunks, and show the model download progress separately from the transcription progress. Tell me how long the first load takes on this machine and what happens on a twenty-minute file.

   Ask for observations, not just code. What you want out of this step is a feel for the first-load wait and a number for your length ceiling, and the only way to get either is to run it.

3. 03

   Add accounts, the data model and the rules that keep them apart

   Now the ordinary application work. Sign-in, the tables, storage for the uploads, and access rules so one person’s videos are theirs alone.

   PromptAdd auth, tables, storage and access rulesCopy

   Add Supabase Auth with email and password: sign-up, login, logout, a persisted session, a profiles row per account, and a useUser hook. Then the data model as migrations. A videos table owned by a user with the file’s storage path, duration and detected language. A subtitles table holding one track per video and language with its captions as timed segments and a status and progress for translation. Tables for usage_tracking, activity_logs and system_settings, and a rate_limits table keyed by account and action. Add an app_role enum of visitor, user, admin and demo with a user_roles table kept out of the user’s own metadata so nobody can promote themselves, and a SECURITY DEFINER has_role function. Create a private storage bucket for uploads with policies so an account reads and writes only its own folder. Then enable row-level security on every table so a user reaches only their own rows and an admin reaches everything, with explicit WITH CHECK clauses on insert and update, and show me how to verify a second account gets nothing back for the first account’s videos.

   Keep the bucket private for now. Step 05 explains why a captioned-video export may push you to make it public, and that is a decision to take with the trade-off in front of you rather than by default.

4. 04

   Build the library and the timeline editor

   The screen the product lives or dies on. Ask for the editor with a real transcript behind it, and spend the time getting the dragging and the timing right before anything else arrives.

   PromptBuild the library and the editorCopy

   Build the library: an upload that stores the video in the bucket and creates its row, a list of the signed-in person’s videos with status (uploaded, transcribed, translated, exported), and a detail page that runs the transcription from step 02 and saves the result as the video’s first track. Then the editor: the video playing above a horizontal timeline of captions, each draggable to retime and editable in place, with split and merge, keyboard shortcuts for play, pause and next caption, undo and redo, and autosave a few seconds after the last change. Keep the captions in one place so the timeline, the list and the preview never disagree. Add a styling panel (font, size, colour, background, position) whose changes show over the video immediately.

   The bug to watch for is caption state kept in two places. A preview that shows a line the timeline has already moved is the symptom, and it gets much more expensive to fix once translation reads the same state.

5. 05

   Add translation and the exports

   Translation is the first and only call that leaves the app, so it comes with the key handling and the logging built in. Then the four ways a finished track gets out.

   PromptAdd translation and exportCopy

   Add one server-side "ai" edge function that calls my AI provider with the key held in function secrets, refuses any caller without a valid session, and logs every call to usage_tracking with the account, the video and the token counts. Add a "Translate" action on a track that sends its captions to that function ten at a time with their timestamps, asks for the same lines in the chosen language with the timestamps untouched, returns immediately, writes progress to the new track’s row as batches finish, and has the editor poll it. Then exports: a function that produces .srt, .vtt and .txt from any track with no AI involved, and a captioned-video export in the browser that draws the styled captions over the video on a canvas and records the result as a WebM. Tell me plainly what the captioned export needs from the storage bucket to work, and what changing the bucket to public would mean for who can open a video by its link.

   Ask that last question on purpose. The template this guide sits beside made its bucket public for exactly this reason, and the right answer for you depends on whose videos these are.

6. 06
   Destination

   Add limits, the admin console and the demo account, then use it as a stranger would

   Finish with the pieces that keep the bill and the trial honest, then open a private window and try to caption something you should not be able to reach.

   PromptAdd limits, admin, demo, and testCopy

   Add three more pieces. Rate limits: ten uploads, twenty transcriptions, thirty translations and fifty exports per account per hour, counted in the rate_limits table rather than in memory, with quota costs read from system_settings so I can change them without a deploy. An admin console over users, videos, usage and settings, readable only by the admin role. And a demo role: any sign-up with an address ending in @demo.com gets it automatically, and a function wipes that account’s videos, tracks, logs and usage after an hour of inactivity. Then run the app and walk me through the whole thing: sign up as a demo account and caption a short clip, translate it, export a .srt and a captioned video, then sign up as a second real account and confirm it sees none of the first account’s videos, and fix whatever breaks on the way.

Review the access rules (row-level security policies) on every table. For each one, tell me in simple terms who can view, add, edit, and delete records, confirm that people can only reach their own data while the right roles can reach more, and flag anything left open that shouldn’t be.

One rule outranks everything above it: the database service key and your AI provider key live on the server and nowhere else, which means never inside the app people download and never inside a repository. If either gets out, treat it as compromised and rotate it the same day.

Two questions decide this, and speed is not one of them. Does the plan allow commercial use, which Vercel’s Hobby tier does not. And does a link straight to one video open the editor for somebody who has never visited, because a link to a specific video is exactly what a person pastes to a colleague. The speech model does not touch your host at all: the browser fetches it from its own home on the first visit and keeps it.

Add one server-side "ai" function that talks to my AI provider, with the key held in server secrets and never anywhere the browser can reach, and make it refuse any caller who is not signed in. Then add a "Translate" action on a subtitle track: send the lines to that function ten at a time with their timestamps, ask for the same lines in the target language with the timestamps untouched, and save the result as a new track linked to the original. Return immediately, write progress to the track row as batches finish, and have the editor poll it so the person sees a bar rather than a spinner. Log every call with the account, the video and the token counts.

Change language detection to work from the first thirty seconds of the transcript rather than from the file name. Send that text to the ai function and ask for a two-letter language code, show the result in the editor as an editable field with a note saying it was detected, and use the person’s choice for translation from then on. Fall back to the file name only when no transcript exists yet.

Add a "Tidy captions" action that sends the track to the ai function and asks for the same lines with punctuation and capitalisation fixed, filler words removed, and any line longer than 42 characters split at a natural break, keeping every start and end time and never changing the meaning. Show the result as a proposal the person accepts or rejects line by line, and keep the original track untouched until they accept.

Add a panel on the export screen that sends the finished transcript to the ai function and returns a short summary, five to eight chapter markers with timestamps, and a handful of tags. Present all of it as editable drafts the person can copy, and let them regenerate any one part on its own without redoing the rest.

Each prompt above picks the model that fits the job. As a rule of thumb, that is Haiku for high volume, Sonnet for everyday writing, and Opus for deeper reasoning. Model names move faster than this page does, so check the current list in the Claude docs (linked in the references below) before you build. Send every one of these prompts through that same ai function, so one key and one set of rules governs all of them.