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

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 replit.com, checked September 2026.

The first two are all you need to start. Everything here stays inside the one browser tab, the app included once you publish it, and the GitHub copy is the one deliberate exception.

1. 01

   Start the app, ask for the database, and set the rules

   The database comes free with the workspace, so it goes in the opening message. So do the two constraints that matter most on this build.

   PromptSet up the project and the databaseCopy

   Set up a React 18 + Vite + TypeScript app with Tailwind, and add a Postgres database to this Repl, the one Replit provisions, not anything outside. Write a short notes file at the project root saying this is a subtitle studio, fixing the vocabulary as videos, tracks, captions and exports, and recording two standing rules: transcription always happens in the viewer’s browser and is never sent to this server, and the only call that leaves the app is translation through one server route. Keep the database connection details in Replit’s Secrets rather than in the code.

   The rules are worth writing into the notes file rather than a single message. A server-side transcription service is a natural suggestion for any assistant, and it would put back the cost this build exists to avoid.

2. 02

   Prove the speech model in the live preview

   One throwaway page, one captioned clip. Do it before anything depends on it, and roll back to a checkpoint if it goes sideways rather than unpicking it.

   PromptGet the speech model running in the browserCopy

   Add @huggingface/transformers and build a single page that proves in-browser transcription works: pick a local video, press a button, and get a list of lines with start and end times. 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. Then tell me how long the first load takes in the preview and how it behaves on a twenty-minute file.

   Check this in the live preview rather than trusting the description. A speech model in a browser tab is exactly the kind of thing that looks fine in code and behaves differently in a real tab.

3. 03

   Add sign-in and scope every row to its owner

   Replit’s Postgres is a plain database with no login wired into it, so the Agent writes both halves: sessions on the server, and policies the server’s identity feeds.

   PromptAdd sign-in, tables, roles and access rulesCopy

   Add email-and-password sign-up, login, logout and a server-side session, with a profile row per account. Then the tables. Videos 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. Store uploaded videos in the workspace’s object storage rather than the database, in a folder per account, and serve them only through a route that checks the owner. Add a roles table giving each account one of visitor, user, admin or demo, in its own table, never on the account record. Then turn on row-level security across every table: have the server set the current account and role as a session-local setting at the start of each request, write the policies against that setting so a person reaches only their own rows and an admin reaches everything, and show me how to verify a second account comes back empty for the first account’s videos.

   There is no ready-made login handing the database a user id here, so the server is what knows who is asking. Build that first and the policies have something to read.

4. 04

   Build the library and the editor

   The screen that carries the product. Check the preview after each change here rather than stacking several and finding out which one broke the timeline.

   PromptBuild the library and the editorCopy

   Build the library: an upload that stores the video 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 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, undo and redo, and autosave shortly after the last change. Drive all of it from one piece of caption state so the timeline, the list and the preview can never disagree, and add a styling panel whose changes show over the video immediately.

   This is the step where checkpoints earn their keep. A timeline that felt right two messages ago and does not now is a one-click problem rather than an afternoon.

5. 05

   Add translation and the exports

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

   PromptAdd translation and exportCopy

   Add one server route that calls my AI provider with the key held in Replit’s Secrets, refuses any caller without a session, 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 route 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, served the video through our own route so it stays private.

6. 06
   Destination

   Add limits, admin and the demo account, then publish

   Finish with the pieces that keep the bill and the trial honest, then publish, checking who the app is visible to before that first release, since Publishing is what sets it.

   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 database rather than in one process’s 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 job that wipes that account’s videos, tracks, logs and usage after an hour of inactivity. Then help me test 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. When it holds up, walk me through Publishing: which deployment type fits an app whose heavy work happens in the viewer’s browser, and who the app should be visible to.

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 connection and your AI provider key belong in Secrets only: never in anything the browser downloads, and never in a repository. If either gets out, treat it as compromised and rotate it the same day.

All four are Replit rather than a third party, so the choice is shape rather than vendor, and Autoscale suits most of these apps. One thing specific to this build: the speech model does not touch your deployment at all, because the browser fetches it from its own home on the first visit, so the server stays light no matter how much video people caption. Review who the app is visible to before that first release.

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.

A cheap model is plenty for most of the prompts above. Save Pro’s stronger models for the one or two spots where the extra reasoning actually pays for itself. Add any provider key through Replit’s own Secrets tool rather than hard-coding it, and keep every AI feature behind one server-side function so a single key covers the whole app.