<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Julien Berthomier</title>
    <description>The latest articles on DEV Community by Julien Berthomier (@julien_berthomier_33cb099).</description>
    <link>https://dev.to/julien_berthomier_33cb099</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3789314%2F5cffac16-d1f2-4c9a-bac8-7f19aac24585.png</url>
      <title>DEV Community: Julien Berthomier</title>
      <link>https://dev.to/julien_berthomier_33cb099</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/julien_berthomier_33cb099"/>
    <language>en</language>
    <item>
      <title>Forcing AI agents to actually prove they did the work</title>
      <dc:creator>Julien Berthomier</dc:creator>
      <pubDate>Wed, 25 Mar 2026 07:25:41 +0000</pubDate>
      <link>https://dev.to/julien_berthomier_33cb099/forcing-ai-agents-to-actually-prove-they-did-the-work-4ocj</link>
      <guid>https://dev.to/julien_berthomier_33cb099/forcing-ai-agents-to-actually-prove-they-did-the-work-4ocj</guid>
      <description>&lt;p&gt;My AI agents kept telling me “Done!” while the page was blank and the console had 47 errors.&lt;/p&gt;

&lt;p&gt;The problem is simple: agents write UI code but never open a browser to check. They can’t see if the layout is broken, if buttons overlap, or if the console is full of red.&lt;/p&gt;

&lt;p&gt;So I built ProofShot: a CLI that gives any AI agent a browser, records the session, and bundles the proof of the agent's hard work&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyg3za0arcv621mlm26v7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyg3za0arcv621mlm26v7.png" alt=" " width="800" height="439"&gt;&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;We hit 280 stars overnight after posting on HN — would love more feedback.&lt;/p&gt;

&lt;h2&gt;
  
  
  How it works
&lt;/h2&gt;

&lt;p&gt;Three commands:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;proofshot start --run "npm run dev" --port 3000&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;(agent navigates, clicks, takes screenshots)&lt;/p&gt;

&lt;p&gt;&lt;code&gt;proofshot stop&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;start opens a headless browser, begins video recording, and pipes your dev server logs. The agent interacts with the page through proofshot exec — clicking, typing, navigating. stop collects console errors, trims the video, and generates a self-contained HTML viewer with everything synced to a timeline.&lt;/p&gt;

&lt;p&gt;The viewer is a single file — video playback with clickable action markers, console and server log tabs, screenshot gallery. Works offline, no dependencies. You can drop it on a PR and any reviewer sees exactly what happened.&lt;/p&gt;

&lt;p&gt;proofshot pr uploads the whole bundle to a GitHub PR comment automatically.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it catches
&lt;/h2&gt;

&lt;p&gt;ProofShot collects console errors and matches server log errors across 10+ languages (JS, Python, Ruby, Go, Rust, Java, etc). So if the agent’s code throws a React error, a Python traceback, or a Go panic — it shows up in the viewer with timestamps.&lt;/p&gt;

&lt;h2&gt;
  
  
  Agent-agnostic
&lt;/h2&gt;

&lt;p&gt;It’s just shell commands. Works with Claude Code, Cursor, Codex, Gemini CLI, Windsurf — anything that can call a terminal. Built on agent-browser from Vercel Labs, which uses compact element references instead of the full accessibility tree (~93% smaller than Playwright MCP’s output).&lt;/p&gt;

&lt;h2&gt;
  
  
  Why not Playwright?
&lt;/h2&gt;

&lt;p&gt;Playwright is great for writing test scripts. ProofShot solves a different problem: the agent doesn’t write tests, it just operates the browser and records everything. No scripting, no assertions. The human reviews the evidence.&lt;/p&gt;

&lt;p&gt;Think of it as the difference between automated testing and a screen recording of a QA session.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it’s not
&lt;/h2&gt;

&lt;p&gt;It’s not a testing framework. The agent doesn’t decide pass/fail. It gives you the recording, the errors, and the screenshots — you decide if the feature is correct.&lt;/p&gt;

&lt;p&gt;Open source, MIT licensed.&lt;/p&gt;

</description>
      <category>agents</category>
      <category>ai</category>
      <category>cli</category>
      <category>showdev</category>
    </item>
    <item>
      <title>I built a Chrome extension that lets you annotate localhost and have AI fix everything</title>
      <dc:creator>Julien Berthomier</dc:creator>
      <pubDate>Tue, 24 Feb 2026 11:26:51 +0000</pubDate>
      <link>https://dev.to/julien_berthomier_33cb099/i-built-a-chrome-extension-that-lets-you-annotate-localhost-and-have-ai-fix-everything-309m</link>
      <guid>https://dev.to/julien_berthomier_33cb099/i-built-a-chrome-extension-that-lets-you-annotate-localhost-and-have-ai-fix-everything-309m</guid>
      <description>&lt;p&gt;If you use AI coding tools (Cursor, Claude Code, Windsurf), you've probably hit this: you see something wrong in your UI, and now you have to describe it in text.&lt;/p&gt;

&lt;p&gt;"The padding on the card component... it's in the dashboard page... the one with the user avatar... the spacing between the avatar and the name is too tight, and the border radius should match the other cards..."&lt;/p&gt;

&lt;p&gt;By the time you've typed that, you could have just opened the CSS and fixed it.&lt;/p&gt;

&lt;p&gt;What I built&lt;br&gt;
Pointa is a Chrome extension that lets you click on any element in your localhost app and leave a visual annotation. &lt;/p&gt;

&lt;p&gt;pointa.dev | GitHub: github.com/AmElmo/pointa-app&lt;/p&gt;

&lt;p&gt;Behind the scenes, it captures:&lt;/p&gt;

&lt;p&gt;Element CSS selector&lt;br&gt;
Current CSS properties&lt;br&gt;
Source file reference&lt;br&gt;
Your annotation text&lt;br&gt;
Optional screenshot&lt;br&gt;
Your AI coding tool reads all annotations via MCP (Model Context Protocol) and implements the changes.&lt;/p&gt;

&lt;p&gt;The bulk workflow&lt;br&gt;
This is where it clicks.&lt;/p&gt;

&lt;p&gt;Browse through your app. Click things that need fixing. Wrong color here. Bad padding there. Missing hover state. Broken alignment on mobile.&lt;/p&gt;

&lt;p&gt;Build up 15-20 annotations across different pages.&lt;/p&gt;

&lt;p&gt;Then tell your AI: "Please fix those annotations."&lt;/p&gt;

&lt;p&gt;All changes. One command. No context switching between "reviewing the app" and "fixing the app."&lt;/p&gt;

&lt;p&gt;Bug reports with context&lt;br&gt;
For bugs, Pointa captures a full timeline:&lt;/p&gt;

&lt;p&gt;Console errors and warnings&lt;br&gt;
Network request failures&lt;br&gt;
User interactions (clicks, inputs)&lt;br&gt;
DOM state at the time of the bug&lt;br&gt;
Backend logs (if you wrap your dev server with pointa dev)&lt;br&gt;
Your AI gets the same context a senior developer would want when debugging — automatically.&lt;/p&gt;

&lt;p&gt;Setup&lt;/p&gt;

&lt;h1&gt;
  
  
  Install Chrome extension from Chrome Web Store
&lt;/h1&gt;

&lt;h1&gt;
  
  
  Then:
&lt;/h1&gt;

&lt;p&gt;npx pointa-server&lt;br&gt;
That's it. Under a minute.&lt;/p&gt;

&lt;p&gt;Privacy&lt;br&gt;
Everything runs locally. Annotations live in ~/.pointa on your machine. No cloud, no accounts, no data leaving your machine.&lt;/p&gt;

&lt;p&gt;Open source, MIT licensed.&lt;/p&gt;

&lt;p&gt;pointa.dev | GitHub: github.com/AmElmo/pointa-app&lt;/p&gt;

&lt;p&gt;Works with Cursor, Claude Code, Windsurf, GitHub Copilot — any MCP-compatible tool.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>productivity</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
