My coding agent now records what it built

Most of my development now happens on my phone. I open T3 Code, write what I want, and an agent - Claude Code or Codex - starts working on a devbox on Railway. I go do something else. When it finishes, T3 pings my phone: "Done".

"Done" tells me what changed. It doesn't show me. And when the work is UI, what matters is what's on the screen.

This post is about the project that made that video: agentic-media-kit, an open-source kit that lets your coding agent show its work.

The loop that runs on my phone

T3 Code is Theo's open-source app for talking to coding agents. It isn't another model, it's the interface: threads, diffs, a preview of the app, and a notification when the agent is done. It's my remote control. The agents run on an always-on Railway service with my repositories cloned. The laptop can stay closed.

For backend work, this loop is great. Tests pass, the diff is readable on a phone screen, I approve or ask for changes. For UI, it broke at the same spot every time: every feature ended with "record a quick video so I can see it".

The agent could record, actually. What it didn't have was a way to hand that video to a person on a phone. The file sat in a directory on a server I was never going to open.

And there was a second request hiding inside the first one. If the feature turned out well, it deserves a post. The same footage I use to check the screen works for a Reel.

Capture, compose, publish

The kit does it in three steps, and each one is a folder in the repo:

• Capture. agent-browser opens the running app on a phone viewport, takes screenshots, and records a scripted flow as WebM. The agent looks at the images before moving on. That alone is validation: better evidence than "it compiles".
• Compose. A Remotion template with zod-typed props renders the 9:16 Reel, the 4:5 feed post, a square, and the cover. Captures go into a phone mockup with one caption per step, and the text stays inside Instagram's safe zones, where the username and buttons don't cover anything. The agent changes copy, colors and steps through --props, without editing code.
• Publish. A single-file Express viewer with no client-side JavaScript and no database: the bucket is the database, and a project is just a key prefix. Video plays from presigned URLs on the S3 bucket and never streams through the app. A second URL forces the download, which is what makes "save to phone, then post" work. Humans log in with a password. Agents upload with a bearer token.

On the devbox terminal, the whole path looks like this:

scripts/capture-flow.sh http://localhost:3000 apps/studio/public/captures mobile
npx remotion render Tour-Reel out/tour.mp4 --props=./tour.json
scripts/webm-to-mp4.sh out/tour.mp4 out/tour-ig.mp4
scripts/upload.sh my-app out/tour-ig.mp4 out/cover.png
# -> https://<viewer>/p/my-app

But I don't type that. The kit ships a Claude Code skill that runs the pipeline. From T3, on my phone, I write "make a Reel of the new onboarding", and a few minutes later the reply is a link. I open it, watch, tap Download.

T3 also has its own preview with recording tools, and the kit documents that as an alternative capture path. The split I've been using: explore in T3's preview, watching live, then freeze the flow into a capture-flow.sh script that runs headless on the devbox and can be re-shot after every UI change.

The launch video was made by the kit

It made no sense to announce a video tool with a hand-edited video. The launch went through the same pipeline the kit gives the agent. A script recorded the public viewer on an iPhone 14 viewport: the gallery, the tap into the project, the Reel playing, the scroll down to the download button. A Remotion composition cut it into four scenes: the hook, a terminal rendered in React replaying the real commands, the viewer recording inside a phone, and the call to action. The result was normalized and published to the demo viewer.

It's recursive on purpose: the footage inside the phone, in the video, is the viewer playing an earlier render of that same Reel.

What broke along the way

The most useful part of building this was the failures, because none of them show up as errors.

• A blank cover that "rendered successfully". In Remotion, a still renders frame 0, and at frame 0 every spring() animation is still at zero. The headline is there, just invisible. The fix was a useEnter() hook that returns the settled state when the composition is a still. The rule that stuck: the agent always opens the rendered image before saying it's done.
• Railway ignored railway.json. The deploy block, with the healthcheck and restart policy, wasn't applied, and the service came up with no healthcheck at all. I set it on the service directly: /healthz.
• railway redeploy doesn't redeploy what you think. It re-runs the previous deployment's snapshot and doesn't pick up new settings. The right command is railway redeploy --from-source.
• Remotion's H.264 comes out as yuvj420p. That's the full-range format most players accept but not every upload does. The kit re-encodes to yuv420p with faststart, which moves the metadata to the front of the file so previews start before the download finishes.
• Security in a public repo. I'd rather make the mistake impossible than rely on being careful. The repo holds no Railway credentials. There are no pull request environments, so an outside PR can't spin up anything with access to secrets. The demo gallery is public and read-only (PUBLIC_READ), but writing requires the token. And everything in a public bucket is public, so captures with private data never go there.

Who it's for

For anyone running agents away from their own machine who wants to see the UI, not a summary of it. And above all, for SaaS founders shipping alone or with a small team: every feature becomes evidence and content for the same effort. The same images that prove a screen works belong in a PR. Upload them to a pr-123 project and put the link in the description.

Two honest caveats. Remotion has its own license: it's free for individuals and small teams, but companies above the threshold need a company license. And capturing a real app can capture real data. That's why the viewer asks for a password by default, and public mode is an explicit choice.

Try it

The code is MIT. It renders out of the box with a generated demo UI, so you can see the output before pointing it at your app:

git clone https://github.com/rwspatin/agentic-media-kit && cd agentic-media-kit
npm install
cd apps/studio && npx remotion render Tour-Reel out/tour.mp4

Repo, capture guides, Instagram specs and the Railway deploy guide: https://github.com/rwspatin/agentic-media-kit. The public demo is at media-viewer-production-dfcc.up.railway.app/p/launch.

If you use it, tell me where it broke. Issues and PRs are welcome, and feedback from people with a loop like mine is what I'm most interested in.

• Renan