Products Marketplace Blog About Contact Sign in Download
lac watch: Send Your Entire Browser Session to AI

lac watch: Send Your Entire Browser Session to AI

Most debugging workflows involve copy-pasting bits of context into a chat window and hoping the AI guesses the rest. /watch skips all of that by recording your entire browser session and sending it directly to lac agent in one shot.

The debugging copy-paste loop is exhausting

You open DevTools. You see a 422 from some endpoint. You copy the request body, paste it into a chat, describe what you were doing, paste the error message, and then answer three follow-up questions before the AI finally gets enough context to help. By that point you've probably spotted the bug yourself out of sheer frustration.

This is the problem /watch is built to fix.

What /watch actually does

/watch is a browser monitoring command inside lac-cli. Once you start a watch session, it runs a lightweight listener that captures everything happening in your browser tab:

  • Every click and the element it landed on
  • Every input field change
  • Navigation events — URL changes, page loads, pushState calls
  • XHR and fetch calls with full headers and request/response body
  • JavaScript errors and unhandled promise rejections

All of that gets assembled into a session timeline. When something goes wrong — or when you just want the AI to understand exactly what you did — you hit the floating Send to AI button. The full timeline goes straight to lac agent.

No manual copy-paste. No "here's a rough description of what I did." The agent gets the real thing.

How to start a session

First, make sure lac-cli is installed:

pip install lac-cli

or

curl -fsSL https://lacai.io/install.sh | bash

Then open your terminal and run:

lac agent

From inside the agent, type /watch. It will give you a local URL to open in your browser — something like http://localhost:5173/watch. Open that alongside whatever tab you're debugging. The floating Send to AI button will appear in the corner of your screen.

Now just use your app normally. Click around, trigger the bug, reproduce the flow you're trying to fix. When you're ready, hit the button.

What the agent receives

This is where it gets genuinely useful. The agent doesn't just get a wall of logs. It gets a structured timeline — each event has a timestamp, type, and relevant detail. An XHR entry includes the method, URL, status code, request headers, request body, and response body. A click entry includes the target element's tag, class, and text content. A JS error includes the full stack trace.

So when you send the session, the agent already knows:

  • What you clicked and in what order
  • Which API calls fired as a result
  • What the server sent back
  • Whether any JS blew up along the way

You can then just say something like "the form submission fails on step 3, figure out why" and the agent has everything it needs to actually answer that.

A real scenario: hunting down a silent 401

I was working on an app where a delete action was silently failing. No visible error on screen, just nothing happening after the button click. Classic.

I started a /watch session, reproduced the click, and sent the timeline. The agent spotted it immediately: the DELETE request was going out with an empty Authorization header. The access token wasn't being attached because the request fired before the auth store had hydrated from localStorage.

The agent then opened the relevant file, found the async timing issue, and showed me the fix with a diff. From clicking the broken button to reading a proposed patch: maybe four minutes. The old way — staring at the Network tab, guessing, asking questions — would have taken much longer.

It pairs really well with PlanMode

If you're dealing with a more complex bug that touches multiple files, try this: send the session from /watch, then switch the agent into PlanMode before it starts writing any code. Type /plan and it will map out what needs to change across which files before touching anything. You get to review the approach before any edits happen.

Combined with undo/diff support — which I wrote about earlier this week — you can send a browser session, let the agent propose a multi-file fix, preview every change, and revert cleanly if something looks off. That's a pretty solid debugging loop.

Works with any frontend stack

/watch doesn't care whether you're running React, Vue, plain HTML, or a Laravel Blade view. It monitors at the browser level, so the framework is irrelevant. The XHR/fetch interceptor catches calls regardless of what library made them — Axios, fetch, jQuery AJAX, doesn't matter.

It also captures errors from third-party scripts, which is something DevTools sometimes buries or mutes depending on CORS settings.

One practical tip

Before you hit Send to AI, reproduce the exact steps that trigger the bug — don't wander around the app first. The timeline is chronological, so if there's a lot of noise from earlier in the session, the agent has to work through it. A clean, focused reproduction makes the timeline much easier for the agent to read and cuts down on back-and-forth.

If you find yourself constantly switching between DevTools, a notes app, and a chat window trying to assemble enough context to debug something, give /watch a shot. It's one of those features that makes the old way feel unnecessary once you've tried it.

Install lac-cli with pip install lac-cli, run lac agent, and type /watch to start.

We use cookies to keep you signed in and to serve ads via Google AdSense. By continuing to use this site you agree to our Privacy Policy.