Circle it. Say it. See it shipped.
Your coding agent says "done" with total confidence, and sometimes it isn't. Here is the full loop, filmed on a real change: a two-minute recording becomes a spec, a live map of the work, and video proof that the fix shipped.
By Vidmatic · · 9 min read
It is 11:31 at night and you are explaining the same button to your coding agent for the third time. "The upgrade button on pricing is wrong." Done! "No, the middle card. It still says Submit." Done! I've fixed the pricing page. You open the page. It isn't.
The film at the top of this page follows one real change through every step below.
A Chrome Web Store reviewer, Ian Foutch, put the problem better than we can:
Knowledge workers lose a lot in handoffs. Bug reports, show your work explanations. Things get lost when someone retells what they saw, and the person on the other end fills the gaps with assumptions. Vidmatic fixes that handoff for me. Whether the other end is a teammate, a third-party or my AI coding agent.
So stop retelling. Show it. This post walks through screen recording for AI coding agents the way Vidmatic does it, end to end, using one real change: a demo pricing page with three bugs, recorded, specced, fixed, proven and merged in ten minutes. Every animation below is cut from that run, and the artifacts are public: the issue and the pull request.
The loop at a glance
| Step | What you do | What you get |
|---|---|---|
| 1. Circle it | Record your app with the Chrome extension, draw on it, talk | A video with your marks and your voice |
| 2. Every mark, timed | Nothing | Every word and every mark pinned to the second |
| 3. Hand it off | Paste one line into your agent | A spec written against your code, filed as one issue |
| 4. Watch it work | Watch, if you want | Every stage of the agent's work, live, with its reasons |
| 5. Prove it | Ask for it in one line | Before and after video of the fix |
| 6. Ship it | Merge | The proof in your Inbox, next to the pull request |
Step 1: record and mark up your product in the Chrome extension
Open the page that is wrong, start a recording with the Vidmatic Chrome extension and just talk. When you get to the broken thing, pick up the pen. Circle the element that misbehaves. Cross out what should not be there. Write the right value by hand if that is faster than saying it.
In our run, Sam circled a grey Pro button ("this upgrade button is gray and it says Submit, it should be our brand blue and say Upgrade to Pro"), crossed out a leftover beta banner ("just remove it"), and struck through a wrong price and wrote $24 next to it.
Twenty-seven seconds of video, three marks, one voice. No ticket template.
You do not structure anything. The structure comes from the marks and the timing. If you only want a narrated bug report for a teammate, the same recording does that too: see bug reports from video.
Step 2: every word and mark, pinned to the second
When the upload finishes, Vidmatic transcribes the voice into timed lines and stores each drawing with the second you started it and the second you confirmed it. On the recording page the captions follow along word by word, and the Drawings tab keeps every mark.
0:04 the words, 0:05 the circle. The mark carries the sentence that was spoken while it was drawn.
We call this bundle issue intelligence, but it is plain data: what you said, when you said it, and what you were pointing at while you said it.
Step 3: your agent writes the spec with your code open
This is the step that makes the loop work, and it is the step Vidmatic deliberately does not do alone. Vidmatic has the video. Your agent has the code. Only your agent can say where each ask lands.
Every recording has a Give this to your agent panel with one line to paste:
/mcp__vidmatic__workstream_from_video <recording id>
Your agent reads the timed transcript and looks at each mark, then searches your repository and writes one row per ask, with one to three file and line anchors. If it cannot find an anchor it writes "anchor: none found" rather than inventing one. In our run it produced this table and filed it as issue #1:
| R# | When and mark | The ask, in Sam's words | Anchors |
|---|---|---|---|
| R1 | 0:04, circle at 0:05 | "it says submit… say upgrade to pro" | src/app.js:10, src/styles.css:28 |
| R2 | 0:12, cross at 0:13 | "just remove it" | index.html:10, src/styles.css:7 |
| R3 | 0:17, $24 at 0:19 | "it should be 24" | src/plans.js:14 |
A replay of the real session's text. The circled button lands on src/app.js:10.
One recording always becomes one issue. Complexity goes into the issue body, not into a pile of tickets. For a deeper walkthrough of this step on its own, read how to turn a screen recording into a GitHub issue.
Step 4: track every requirement on Agent Workstreams
Most tools stop here: the agent has the context, good luck. The part that hurts in practice is what happens next, when you hand work off and cannot see it. Did it read the right thing? Is it stuck? What did it decide, and why?
On Agent Workstreams your agent reports each stage as it finishes. Each issue is a card with a box per stage; in our run that was plan, the before video, build, review, the after video and ship. When a stage fans out, like two reviewers checking the diff, each reviewer appears as its own card under that stage. Opening a card shows its record: a one-line summary, what it did, the decisions and findings it logged, the files it touched and its links.
The real run, four minutes, sped up. Each box appeared when the agent reported that stage.
Two honest notes. Your agent reports and Vidmatic draws: the record is what the agent wrote, not something Vidmatic observed on its own. And reporting is additive: if a report fails, the agent keeps working and says so in one line.
Step 5: before and after videos as proof of work
"Done" is a claim. A video is evidence. By default the loop ends with one narrated demo of the finished work. For proof, add one line to your prompt and the agent runs /mcp__vidmatic__before_after: before touching the code it records the bug as it looks today against your running app, and after the fix it records the same path again. Vidmatic pairs the two halves per requirement, so they play back to back with one click, narrated. That is what our run did.
Same page, same path, same circle. Red before, green after.
What it needs: Node and a headless browser on the agent's machine, an app it can reach (a local dev server is fine), and the "before" filmed before the fix lands. An app behind a sign-in needs a signed-in session captured once by a person at a machine with a display. Nothing is installed in your repository and nothing runs ffmpeg on your machine. If you only need a narrated demo of finished work, the same pipeline does that too: see generate a demo video.
Step 6: ship, close the loop, and keep the receipt
The pull request merges and the agent reports the ship. The workstream flips to shipped with the pull request link, the recording's Agent tab ticks its last box, and the proof lands in your Inbox, linked back to the issue it answers.
Recorded 11:33 PM, shipped 11:43 PM. Ten minutes, nothing lost in the handoff.
That is the whole loop. You showed it once, and you got back a spec, a live view of the work, a merged pull request and a video that proves it.
Vidmatic vs Clipy, Jam and annotation tools
Plenty of good tools now connect a recording or a bug report to a coding agent. They are built for different jobs. Here is a fair comparison of the full loop, as of October 2026, based on each product's public pages.
| Capability | Vidmatic | Clipy | Jam | Marker.io | Annotation tools | Screen Studio MCP |
|---|---|---|---|---|---|---|
| Record with voice and hand-drawn marks | Full | Partial: voice and clicks, no drawing listed | Partial: video and annotations | Partial: screenshots and annotations | Partial: element notes, no video | None: the agent records |
| Agent-readable recording over MCP | Full: transcript, timed marks, images | Full: summary, transcript, frames, clicks, console | Full: video, events, console, network | Partial: screenshots, console, network | Partial: selectors and styles | None |
| Console and network capture | None | Partial | Full | Full | None | None |
| Spec written against your own code, one issue | Full | Partial: agent improvises | Partial | Partial | Partial | None |
| Live stage-by-stage view of the agent's work | Full | None | None | None | Partial: resolve status (MarkLayer) | None |
| Before and after proof video | Full | None | None | None | None | Partial: polished output videos |
| Price | Free to start, Pro $25 a seat | $9 a month | Free tier | From $59 a month | Mostly free | Paid app |
Pick something else when it fits better. Choose Jam when your bugs live in console errors and network calls. Choose Clipy if all you need is an agent-readable recording at the lowest price. Choose an annotation tool like Vibe Annotations or MarkLayer for quick, free element notes on localhost. Choose Marker.io for client feedback on websites. Choose Screen Studio MCP for polished marketing videos.
Choose Vidmatic when you want the loop closed: show it once, watch the agent work, and get video proof that it shipped. Plans and limits are on the pricing page.
Connect once, then show it
Connect once. Run this, then /mcp and choose Authenticate to sign in in the browser; there is no key to paste:
claude mcp add --transport http vidmatic https://api.vidmatic.ai/mcp
Then record the next thing that annoys you, circle it, say it, and paste the line from the recording's Give this to your agent panel. Prefer a key? Copy your connect command from Settings, Developer.
Frequently asked questions
- Can Claude Code watch a screen recording?
- Not as a raw video file. Through the Vidmatic MCP it reads your recording as a timed transcript, your on-screen marks with the second each was drawn, and images of what you circled. That is the part an agent can actually act on.
- How do I give my coding agent a screen recording?
- Connect the Vidmatic MCP once with claude mcp add, sign in in the browser, then paste the one-line prompt from the recording's Give this to your agent panel. It looks like /mcp__vidmatic__workstream_from_video followed by the recording id.
- Does my code leave my machine?
- Your source code does not. Vidmatic has the video; your agent has the code. The agent reads your repository locally and sends back only what it writes on purpose: the issue text, stage summaries, file paths and diff stats. The demo and before and after videos it records of your running app are uploaded to Vidmatic, and the issue goes to your GitHub.
- How is Vidmatic different from Clipy or Jam?
- Clipy and Jam hand a recording to your agent, and both do that well. Vidmatic also shows the agent's work stage by stage while it happens, and returns before and after video of the fix when it ships, linked to the issue and the pull request.
- Which AI coding agents does it work with?
- Any agent that can connect to a remote MCP server. In Claude Code every step is a slash command. Agents without slash commands call get_skill with the workflow name and follow the same steps.
- How can I check that an AI agent's fix actually works?
- Ask your agent for a before and after: it records the bug before the fix and the same path after it, against your running app. Vidmatic pairs the two halves per requirement, and they land in your Inbox and on the workstream next to the pull request.
Full video transcript
Third time explaining the same button. Your agent says it's done. Things get lost when someone retells what they saw. So stop retelling. Show it. Draw on your app, and just talk it through. Every word and every mark, pinned to the second. Paste one line. Your agent watches it, with your code open. You watch every step, as it happens. Then it films the proof. Before, and after. It ships, and the proof lands in your inbox. Ten minutes. Nothing lost in the handoff. Vidmatic. Video for your coding agent.
Try it on your next bug
Record the problem, hand it to your coding agent, and get a narrated demo of the fix.