{"slug": "how-i-built-captrix-ai-with-codex-and-testsprite", "title": "How I Built Captrix AI with Codex and TestSprite", "summary": "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.", "body_md": "I built Captrix AI for TestSprite Hackathon Season 3: Build the Loop.\n\nCaptrix 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.\n\nAdding 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.\n\nI wanted to create a focused application where the complete workflow could happen in one place:\n\nI 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.\n\nThe 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.\n\nThe 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.\n\nInstead of waiting until the end to test everything, I followed a maker-checker loop:\n\nThis process caught several real issues, including:\n\nThe most useful part of the hackathon was treating testing as part of product development instead of a final checklist.\n\nEvery 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.\n\nTry Captrix AI\n\nLive application: [https://captrix-ai.vercel.app/](https://captrix-ai.vercel.app/)\n\nGitHub repository: [https://github.com/ayush002jha/captrix](https://github.com/ayush002jha/captrix)\n\nX/Twitter Post:\n\n// Detect dark theme\nvar iframe = document.getElementById('tweet-2075694620835750228-757');\nif (document.body.className.includes('dark-theme')) {\niframe.src = \"https://platform.twitter.com/embed/Tweet.html?id=2075694620835750228&theme=dark\"\n}", "url": "https://wpnews.pro/news/how-i-built-captrix-ai-with-codex-and-testsprite", "canonical_source": "https://dev.to/ayush002jha/how-i-built-captrix-ai-with-codex-and-testsprite-181i", "published_at": "2026-07-10 21:42:42+00:00", "updated_at": "2026-07-10 22:13:21.477941+00:00", "lang": "en", "topics": ["developer-tools", "artificial-intelligence", "ai-tools", "generative-ai", "natural-language-processing"], "entities": ["Captrix AI", "TestSprite", "OpenAI Codex", "Next.js", "React", "TypeScript", "Tailwind CSS", "Hugging Face"], "alternates": {"html": "https://wpnews.pro/news/how-i-built-captrix-ai-with-codex-and-testsprite", "markdown": "https://wpnews.pro/news/how-i-built-captrix-ai-with-codex-and-testsprite.md", "text": "https://wpnews.pro/news/how-i-built-captrix-ai-with-codex-and-testsprite.txt", "jsonld": "https://wpnews.pro/news/how-i-built-captrix-ai-with-codex-and-testsprite.jsonld"}}