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

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 bolt.new, checked September 2026.

The GitHub step comes before Bolt exists for you at all. Everything after it happens inside the browser tab Bolt opens, with no install.

1. 01

   Create the project online, import it, then prove the speech model

   Bolt has no upload button, so the project has to exist as an online repository first. Once it is in, spend the first real prompt on the speech model rather than on scaffolding you can already see.

   PromptSet up and prove transcription worksCopy

   This project is a subtitle studio. Set it up as React 18 + Vite + TypeScript with Tailwind, and keep this vocabulary throughout: videos, tracks, captions, exports. Two standing rules for the whole build: transcription always happens in the viewer’s browser and is never sent to a server, and the only call that leaves the app is translation through one server-side function. Prove the first rule now with one throwaway page: pick a local video, press a button, and get a list of lines with start and end times. Use the whisper-tiny model from @huggingface/transformers in a Web Worker, with the graphics chip where the browser allows it and a fallback where it does not, in thirty-second chunks, and show the download and the transcription as two separate progress bars.

   Keep the repository private. Bolt commits to it automatically as you build. The preview runs the speech model in a real browser, so expect the first load to take a moment there too.

2. 02

   Clear the context, then connect the database and storage

   The database conversation has nothing to do with the speech model conversation you just had, so clear the context first. Bolt reloads the whole project each message, and a clean slate makes this one cheaper.

   PromptConnect a database and design the tablesCopy

   Connect a database and build the tables. 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 add a profile row per account.

   Clearing the context between unrelated features is Bolt’s own advice, and it is the single easiest way to slow the token burn.

3. 03

   Point one prompt at the database layer and lock it down

   Name the layer rather than letting the prompt range over the whole project. The rule is simple here, which leaves no excuse for getting it wrong.

   PromptAdd auth and access rulesCopy

   Working on auth and the database layer only. Add email-and-password sign-up, login, logout, a persisted session and a profile per account, with signed-out visitors sent to the login screen. Add four roles (visitor, user, admin and demo) in their own table rather than on the user account, because anything on the account is editable by its owner, plus a helper the access rules can call without recursing. Then row-level security on every table: a person reaches only their own rows, an admin reaches everything, and every insert and update carries an explicit check that the row is not being filed under someone else. Show me how to verify a second account comes back empty for the first account’s videos.

   Naming the layer keeps the prompt narrow, which Bolt charges you less for and which makes the result easier to check.

4. 04

   Talk the editor through in Plan Mode before it is written

   This is the largest and most expensive-to-redo screen in the build. Agreeing the caption state before Bolt writes a line is exactly what Plan Mode is for.

   PromptBuild the library and the editorCopy

   Use Plan Mode for this one. I need the library and the editor. 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 their status, and a detail page that runs the transcription from step 01 and saves the result as the video’s first track. 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, undo and redo, and autosave shortly after the last change, all driven from one piece of caption state so the timeline, the list and the preview never disagree, plus a styling panel whose changes show over the video immediately. Talk me through the state shape first, then build it.

   Plan Mode costs a message and can save a rebuild. An editor whose caption state is spread across three places is the rebuild it saves.

5. 05

   Add translation and the exports, and check them in the live preview

   Translation is the first and only call that leaves the app, so it comes with the key handling and logging built in. Then export something real in the preview: the preview is the running app, so the file it produces is a file you can open.

   PromptAdd translation and exportCopy

   Add one server-side "ai" function on the database side that calls my AI provider with the key held in its secrets, 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: send its captions to that function ten at a time with their timestamps, ask for the same lines in the chosen language with the timestamps untouched, return immediately, write progress to the new track as batches finish, and poll it from the editor. Then exports: .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 a WebM. Tell me plainly what that export needs from the storage bucket, and what making the bucket public would mean for who can open a video by its link.

6. 06
   Destination

   Add limits, admin and the demo account, then ship it

   The pieces that keep the bill and the trial honest come last. Click the whole thing through as a stranger, then publish, to Bolt’s own hosting by default, or to Netlify if you would rather keep the domain there.

   PromptAdd limits, admin, demo, and publishCopy

   Add the last three pieces. 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. An admin console over users, videos, usage and settings, restricted to the admin role. And a demo role that any sign-up ending in @demo.com receives automatically, with a function that wipes that account’s videos, tracks, logs and usage after an hour of inactivity. Then walk me through the full flow in the preview: 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 once it holds up, publish 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.

Pick a lighter model for the high-volume prompts above and save a stronger one for wherever the reasoning actually matters. That is the same token-budget logic as the rest of this page, applied to the app’s own AI calls instead of the build itself. When Bolt flags a missing secret, add the key through its secrets settings instead of pasting it into the chat, and keep every AI feature behind one server-side function so there’s only one key to manage.