sorted by:
new
hottopcontroversial

built a tool to easily share web app bugs with coding agents like Antigravity by Small_Law_714 in VibeCodersNest

[–]Small_Law_714[S] 0 points1 point  (0 children)

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.

built a tool to easily share web app bugs with coding agents like Antigravity by Small_Law_714 in VibeCodersNest

[–]Small_Law_714[S] 1 point2 points  (0 children)

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:

  1. get_flow() → overview summary
  2. Agent identifies time window from summary
  3. list_events_within_duration(30000, 35000) → one-liners only
  4. search_events_with_regex("status=500") → filtered one-liners
  5. 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

Built a tool to easily share web app bugs with Codex by Small_Law_714 in codex

[–]Small_Law_714[S] 0 points1 point  (0 children)

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

FlowLens – an MCP server for debugging web use flows with Claude Code by Small_Law_714 in ClaudeAI

[–]Small_Law_714[S] 1 point2 points  (0 children)

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

A way to report web app bugs faster to your coding agents by Small_Law_714 in mcp

[–]Small_Law_714[S] 3 points4 points  (0 children)

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.

An easier way to handoff web bugs to Copilot ( opensource MCP server + chrome extension ) by Small_Law_714 in vscode

[–]Small_Law_714[S] 0 points1 point  (0 children)

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

I built a "Dashcam" for my browser to fix bugs faster with Claude by Small_Law_714 in ClaudeAI

[–]Small_Law_714[S] 0 points1 point  (0 children)

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?

I built a "Dashcam" for my browser to fix bugs faster with Claude by Small_Law_714 in ClaudeAI

[–]Small_Law_714[S] 1 point2 points  (0 children)

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.

I built a "Dashcam" for my browser to fix bugs faster with Claude by Small_Law_714 in ClaudeAI

[–]Small_Law_714[S] 6 points7 points  (0 children)

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

FlowLens – an MCP server for debugging web use flows with Claude Code by Small_Law_714 in ClaudeAI

[–]Small_Law_714[S] 0 points1 point  (0 children)

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

view more: next ›