cd /news/developer-tools/how-i-built-captrix-ai-with-codex-an… · home topics developer-tools article
[ARTICLE · art-54886] src=dev.to ↗ pub= topic=developer-tools verified=true sentiment=↑ positive

How I Built Captrix AI with Codex and TestSprite

A developer built Captrix AI, a browser-based caption studio for short creator videos, during the TestSprite Hackathon Season 3. The tool uses OpenAI Codex, Next.js, React, TypeScript, Tailwind CSS, Hugging Face Transformers, and browser media APIs to turn speech into editable captions with adjustable timing, styles, and platform-specific export. The developer followed a maker-checker testing loop to catch issues early, treating testing as part of product development.

read1 min views1 publishedJul 10, 2026

I built Captrix AI for TestSprite Hackathon Season 3: Build the Loop.

Captrix is a browser-based caption studio for short creator videos. It turns speech into editable captions, lets creators adjust timing visually, apply different styles, preview platform-specific formats, and export a finished video with captions burned in.

Adding captions to short videos often requires several separate tools. One generates the transcript, another styles the captions, and a full video editor is needed to correct timing.

I wanted to create a focused application where the complete workflow could happen in one place:

I used OpenAI Codex as my primary coding agent and built the application with Next.js, React, TypeScript, Tailwind CSS, Hugging Face Transformers, and browser media APIs.

The editor supports formats for Reels, TikTok, Shorts, YouTube, Facebook, Feed, and square posts. It also includes caption presets such as Creator Pop, Karaoke, Meme Stack, Minimal, and Neon Punch.

The timeline became one of the most important parts of the project. Caption blocks can be moved, resized with timing handles, and edited directly. Silence between spoken sections remains caption-free instead of leaving old text on the video.

Instead of waiting until the end to test everything, I followed a maker-checker loop:

This process caught several real issues, including:

The most useful part of the hackathon was treating testing as part of product development instead of a final checklist.

Every failed or blocked test forced me to clarify either the application behavior or the test contract. That made Captrix more practical, predictable, and consumer-focused.

Try Captrix AI

Live application: [https://captrix-ai.vercel.app/](https://captrix-ai.vercel.app/)

GitHub repository: [https://github.com/ayush002jha/captrix](https://github.com/ayush002jha/captrix)

X/Twitter Post:

// Detect dark theme
var iframe = document.getElementById('tweet-2075694620835750228-757');
if (document.body.className.includes('dark-theme')) {

iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2075694620835750228&theme=dark" }

── more in #developer-tools 4 stories · sorted by recency
── more on @captrix ai 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/how-i-built-captrix-…] indexed:0 read:1min 2026-07-10 ·