How to build an AI subtitle generator for your business with v0

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, v0.app, v0.app and vercel.com, checked September 2026.

The database step is the one worth not skipping once your screens need real data. Everything else here takes a couple of minutes, and after that you’re just describing what you want.

1. 01

   Generate the editor before anything else exists

   Start with the screen the whole product is judged on. Placeholder captions are fine, and finding out the interaction is wrong now costs nothing.

   PromptSketch the editorCopy

   Build the editor screen for a subtitle studio: a video player 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, and undo and redo. Beside it a styling panel (font, size, colour, background, position) whose changes show over the video immediately, and an export panel with buttons for subtitle files and a captioned video. Use placeholder captions for now. I will add the real speech model next.

   Placeholder data is fine here, and only here. Everything after this step gets something real behind it.

2. 02

   Add the real speech model to the screen you just built

   This is the step that turns a convincing mock-up into a studio. Do it before the database, because if the model does not behave in the browser, the rest of the plan changes.

   PromptGet the speech model running in the browserCopy

   Add @huggingface/transformers and make the editor real: a file picker that loads a local video into the player and transcribes it in the browser into the timeline. Run onnx-community/whisper-tiny in a Web Worker so the page stays responsive, with device set to webgpu and a fallback to wasm, decode the audio in the browser and feed it to the model in thirty-second chunks, and show the model download and the transcription as two separate progress bars. All of this runs client-side. Do not add a server route that receives audio or video for transcription.

   Be explicit that no server route touches the audio. v0 will otherwise reasonably reach for a route, since routes are how it does everything else.

3. 03

   Start a new chat for the database, storage and the routes

   Saving work is a separate feature from editing, so give it its own chat. Restoring a version later then undoes the persistence work without taking the editor with it.

   PromptConnect a database and design the modelCopy

   In this chat, connect a Supabase database and create the tables and the API routes behind them. Videos, each owned by one account, with the file’s storage path, duration and detected language. Subtitle tracks, one per video and language, holding captions as timed segments plus a status and progress for translation. Usage records, an activity log, a settings table and a rate-limits table keyed by account and action. Create a private storage bucket for uploads where an account reads and writes only its own folder, and make the editor load and save a video’s tracks through the routes.

   Ask for the routes alongside the tables. A schema with nothing reading it leaves the editor exactly as unsaved as it was.

4. 04

   Add auth and roles, checked on the server and in the database

   Two layers, same rule. A route check is the first line, row-level security is the second, and it is the one that still holds when a route forgets to filter.

   PromptAdd auth and access rulesCopy

   Add authentication and the role model. Email-and-password sign-up, login, logout, a session and a profile row per account, with signed-out visitors sent to the login screen. Then four roles (visitor, user, admin and demo) held in their own table rather than on the user record, since anything on the user record can be edited by that user, plus a helper the access rules can call without recursing. Every API route must check ownership server-side rather than trusting anything the browser sends. Then turn on row-level security for every table so the database enforces the same thing: a person reaches only their own rows, an admin reaches all of them, and every insert and update carries an explicit check that the row is not being filed under someone else.

   v0 routes run on the server, so the check belongs there. A permission enforced only in the component is a permission anyone can skip.

5. 05

   Add translation and the exports, then tidy the editor with Design mode

   Translation is the first and only call that leaves the app, so it gets a route with the key handling and logging built in. Spend the time you save on a proper visual pass over the editor.

   PromptAdd translation and exportCopy

   In a new chat, add one server route that calls my AI provider with the key held in server environment variables, refuses any caller who is not signed in, and logs every call with the account, the video and the token counts. Add a "Translate" action on a track that sends its captions to that route 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 as batches finish, and polls it from the editor. Then exports: .srt, .vtt and .txt produced 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 a WebM. Tell me plainly what the captioned export needs from the storage bucket, and what making the bucket public would mean for who can open a video by its link.

   For visual fixes on the editor, select the element in the preview and use Design mode rather than describing where it sits. It is faster and it changes the real code.

6. 06
   Destination

   Add limits, admin and the demo account, then open a pull request

   The pieces that keep the bill and the trial honest come last, then walk the whole thing through and merge, which, if that branch is the linked Vercel project’s production branch, also deploys it.

   PromptAdd limits, admin, demo, and shipCopy

   Add rate limits of 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 the settings table. Add an admin page over users, videos, usage and settings, reachable only by the admin role. Add a demo role that any sign-up ending in @demo.com receives automatically, with a job that wipes that account’s videos, tracks, logs and usage after an hour of inactivity. Then help me walk the whole flow: 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. Once it holds up, publish and open a pull request for it.

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.

v0 doesn’t ship its own model for these prompts, so you bring an API key for whichever provider you want, and v0 writes the route that calls it. Start with a cheap model while you’re still iterating on the prompt itself, then swap in a stronger one for the version that ships, and keep every AI feature behind that one route so there’s only one key to rotate.