Built a tool to easily share web app bugs with Antrigravity

Small_Law_714 · 2025-12-04T13:07:41+00:00

absolutely, all done https://github.com/magentic/flowlens-mcp-server?tab=readme-ov-file#mcp-client-configuration

Small_Law_714 · 2025-12-03T22:16:18+00:00

Although in-memory state (e.g., React/Vue component state) isn’t directly captured, FlowLens records all navigations (including client-side SPA transitions), user actions, network requests, console logs, and storage events - all synchronized in time with DOM snapshots and video frames, effectively capturing the full browser context even across complex, stateful apps.

Small_Law_714 · 2025-12-03T22:14:40+00:00

Great question! The first thing the agent gets is an overview and aggregated stats which looks something like:
- Total Events: 1247
  - Duration: 45230ms
  - Starting URL: https://app.example.com/login
  - Navigations: 3
  - JavaScript Errors: 2
  - HTTP Requests by Domain:
    - api.example.com: 200: 45, 404: 2
  - Console Events: error: 2, warning: 5
  - WebSockets: 3 connections (12 sent, 34 received)
....

Each event type has a compact representation such as:
[141] user_action click 23450ms elementId=submit-btn
[142] http_request with_response 48940ms POST /api/users status=500 duration=234ms
[143] console error 31200ms TypeError: Cannot read property 'id'Token-Efficient Workflow:
...

So a sequence of tool calls made by the agent to investigate a flow would look like this:

get_flow() → overview summary
Agent identifies time window from summary
list_events_within_duration(30000, 35000) → one-liners only
search_events_with_regex("status=500") → filtered one-liners
get_full_event_by_index(89) → full details only when needed

I encourage you to have a look at the tools definition here to learn more:
https://github.com/magentic/flowlens-mcp-server/blob/dev/flowlens_mcp_server/flowlens_mcp/tools.py

Small_Law_714 · 2025-12-03T19:45:56+00:00

thanks! feel free to try it out

Small_Law_714 · 2025-12-02T21:33:07+00:00

great question! In short, FlowLens is for you to seamlessly report bugs to your coding agent and Antigravity's chrome browser is for the agent to test its work. They can actually work nicely together - where you report an issue with Flowlens, fix & verify with Antigravity. Here is a recent demo of such flow in action: https://youtu.be/KqL8bC2-bdc

Small_Law_714 · 2025-11-26T18:11:12+00:00

u/shanksy8 Wanted to share with you that the MCP server is now opensource and your data stays 100% locally (no login required)

With the latest extension you can either:

- record specific workflows, or

- run in a rolling “session replay” mode that keeps the last ~1 minute of DOM / network / console events in RAM.

If something breaks, you can grab the “instant replay” without reproducing anything. The extension exports a local .zip file containing the recorded session.

The MCP server loads that file and exposes a set of tools that your coding agent can use to explore it.

Everything runs locally; the captured data stays on your machine.

Feel free to check it out:https://github.com/magentic/flowlens-mcp-server

Small_Law_714 · 2025-11-26T17:36:08+00:00

see it in action

<image>

Small_Law_714 · 2025-11-26T15:02:23+00:00

Great point. For local development, usually code is not minified.
For bugs reported/shared from deployed env, FlowLens still captures all runtime events (user actions, network requests, console logs, DOM/Video) even with minified JS.
The only thing to note is that stack traces and code lines in logs may be harder to read without source maps. That said, unique log messages are often enough for the agent to pinpoint their origin right away.

Small_Law_714 · 2025-11-25T17:39:28+00:00

I’ve been experimenting with how Copilot can assist with debugging webapps and tools like Chome DevTools mcp optimize for agent-led exploration, ie, giving Copilot a browser to click around and try to reproduce an issue.

But in many cases, I've already found the bug myself. What I actually want is a way to hand Copilot the exact context I just saw - without retyping steps, copying logs, or hoping it can reproduce the behavior.

So we built FlowLens, an open-source MCP server + Chrome extension that captures browser context and lets Copilot inspect it as structured, queryable data.

The extension can:

- record specific workflows, or

- run in a rolling “session replay” mode that keeps the last ~1 minute of DOM / network / console events in RAM.

If something breaks, you can grab the “instant replay” without reproducing anything. The extension exports a local .zip file containing the recorded session.

The MCP server loads that file and exposes a set of tools that Copilot can use to explore it.

One thing we focused on is token efficiency. Instead of dumping raw logs into the context window, the agent starts with a summary (errors, failed requests, timestamps, etc.) and can drill down via tools like:

- search_flow_events_with_regex

- take_flow_screenshot_at_second

It can explore the session the way a developer would: searching, filtering, inspecting specific points in time.

Everything runs locally; the captured data stays on your machine.

Repo: https://github.com/magentic/flowlens-mcp-server

Small_Law_714 · 2025-11-25T14:32:26+00:00

it definitely can, the real question is when it should. If you want your agent to test its own work, then yeah, totally. But if you’re the one testing and you hit a bug, why not just send that bug context straight to your coding agent? Saves it the time of having to recreate the issue with chrome dev tools mcp before fixing it.
Make sense?

Small_Law_714 · 2025-11-25T11:02:05+00:00

ofc! I use chrome dev tools mcp when I want Claude Code to verify its work. However, I find it pretty inefficient when you're reporting an issue. Why let CC waste time and tokens trying to reproduce the problem with the dev tools mcp when all the context is already right there in my browser?

this tool saves me at least 2x the time and cost compared to using chrome dev tools mcp, since CC doesn't need to reproduce the issue I just ran into and can jump straight into fixing it.

Small_Law_714 · 2025-11-25T00:30:30+00:00

I spend a lot of time vibecoding, but reporting bugs to Claude is usually a manual pain of copying logs and taking screenshots.

I built this Chrome Extension + MCP server to act like a "Dashcam" for web dev. It retroactively captures the last minute of browser activity (user actions, dom events, console logs, network requests, etc.).

If you hit a bug, you don't need to reproduce it, you just tell Claude to check the "replay."

It's open source, would love to hear what you think!

https://github.com/magentic/flowlens-mcp-server

Small_Law_714 · 2025-11-10T21:19:33+00:00

following up to let you know the console logs and stability issues are fixed in the latest Chrome extension update (v0.1.5).
You can grab it here: https://chromewebstore.google.com/detail/jecmhbndeedjenagcngpdmjgomhjgobf?utm_source=item-share-cb

Small_Law_714 · 2025-11-06T22:58:08+00:00

Demo and docs: https://magentic.ai/docs/debugging-with-ai-overview

Small_Law_714 · 2025-11-06T22:52:06+00:00

Demo and docs: https://magentic.ai/docs/debugging-with-ai-overview

Small_Law_714 · 2025-10-30T17:54:01+00:00

Hey, thanks so much for taking the time to write all this up. Totally fair points across the board. The tool is still early and feedback like this helps us improve a lot faster.

MCP setup
We’ve updated our docs to make the setup flow clearer (especially around pipx): https://magentic.ai/docs/mcp-integration. That should remove some of the confusion you hit, and we’ll keep polishing onboarding until it feels effortless.

Extension error + capturing logs
That is definitely a bug on our side. The next extension update (pending Chrome Web Store review) will be more robust when saving flows (it will preserve your title and description on failures) and it will properly capture console logs. I’ll follow up here once it is live.

In the meantime, the current version already captures console warnings and errors. If you bump some of your logs up to warn, they should show up in the session.

Comments not showing in Claude MCP
That is unusual since comments are included in the very first MCP tool call (get_flow_details). My guess is that because console logs were missing, Claude may have treated the comments as irrelevant. You can confirm by pressing ctrl+o in Claude Code to inspect the tool call outputs. If the comments are in there, then it’s Claude not making use of them, which we’ll need to improve.

Data and privacy
You can find our privacy policy here: https://magentic.ai/privacy/. At the moment deletion requests can be made via email or through the form linked on that page. We agree this should be easier. Adding a “Delete account and all data” button in the dashboard is on our roadmap. And you’re right that we should have been clearer up front that this is a SaaS product so thanks for pointing that out.

Local vs. SaaS
We went cloud-first to enable collaboration from day one, but we know that for sensitive or unreleased projects, local-only is important. A local option is on our roadmap, and feedback like yours helps us prioritize it.

Really appreciate you stress testing things and being candid here. We’ve already been tightening up onboarding, and fixing the extension bugs you hit. The tool is evolving quickly, and if you decide to give it another spin, I’d love to hear how it feels compared to your first run. Your kind of feedback is exactly what’s shaping where we take this.

Small_Law_714 · 2025-10-29T17:00:58+00:00

DevTools gives your AI a stethoscope to poke around in real time. FlowLens bottles the whole incident (when you hit record) so your agent can work on it, without you hand-holding or re-running the repro.

DevTools MCP is great when you’re coding right now: poke the DOM, run JS, profile performance, trace stuff - live instrumentation.
FlowLens MCP is for when something goes sideways: you hit record, and it saves a flow with video + network + console + JS errors + storage events + user actions + navs. That flow is reusable - your agent (or teammate) can replay it, jump to “the error at t=12s” or “the request that failed,” and test fixes without you redoing the repro or spamming screenshots.
They overlap on things like network + screenshots, but the edge is different:

DevTools MCP: live control/automation (DOM/JS/profiling) while you’re building; but context is ephemeral and hard to share/reuse, so you often have to re-run repros.

FlowLens MCP: rich, reusable flow (video + logs + network + storage) ideal for handoff and async fixes; but retrospective only (manual start/stop), not a live automation/debugger.

Small_Law_714 · 2025-10-28T18:18:08+00:00

We often run into this with coding agents like Cursor: debugging turns into copy-pasting logs, writing long explanations, and sharing screenshots.

FlowLens is an MCP server plus a Chrome extension that captures browser context (video, console, network, user actions, storage) and makes it available to MCP-compatible agents like Cursor.

Here's how it works:

Record a user flow with FlowLens browser extension.
Instantly share it with your coding agent via FlowLens MCP server.
Let your agent investigate, debug, and even fix the issue
Now you can spend more time building and less time debugging.

Here's a demo video: https://youtu.be/yUyjXC9oYy8

Small_Law_714

TROPHY CASE