FlowLens

Hi Product Hunt! 👋

Debugging with AI agents is powerful, but only when the agent can actually see what you saw. We kept running into the same problem: you find a bug, but the agent has almost no context beyond your description, and you end up stuck in copy-pasting hell.

So we built FlowLens, an open-source MCP server and Chrome extension that give coding agents instant, structured browser context. Think of it as session replay designed for AI debugging.

Tools like DevTools or Playwright MCP focus on reproducing issues. FlowLens helps when you have already found the bug and simply need to show your agent exactly what happened. This significantly cuts down the time and tokens needed to reproduce issues, especially in complex user flows.

What you can do with the extension

• Record specific workflows on demand

• Use a rolling session replay mode that keeps around 60 seconds of DOM, network, and console events

When something breaks, you can grab an instant replay without recreating anything.

The extension exports a local `.zip` that contains the full session.

The MCP server loads that file and exposes token-efficient tools that agents can use. Your agent starts with a summary of errors, failed requests, and timestamps, then drills down using tools like:

• search_flow_events_with_regex

• take_flow_screenshot_at_second

Your agent can search, filter, and inspect specific points in time the same way a developer would, without bloating its context window with raw logs.

Privacy and collaboration

• Privacy-first: everything runs locally and captured data stays on your machine

• For teams: optionally share flows on the FlowLens platform

If you want to get started or explore the MCP server, the repo is here:
👉 https://github.com/magentic/flowlens-mcp-server

Would love your feedback!

Looks like a winner. Next step would be anything you can do to cut steps. Just a thought.

I asked Claude Code how it’s finding FlowLens, and here’s what it said. Excited to see how people use it!

> If I have a web app bug, which is more efficient — and by how much in terms of tokens and time — for you to find the root cause of the issue: you using the browser via Chrome DevTools, or me sharing a FlowLens flow?

— Claude Code's response below —

FlowLens flow is significantly more efficient.

Time:
- ~5–10× faster
- FlowLens: I see the entire recorded session immediately and can jump to specific moments.
- Browser use: Requires iterative navigation, reproducing steps, and trial-and-error.

Tokens:
- ~3–5× fewer
- FlowLens: Targeted screenshots only at relevant moments; searchable events (regex, filters).
- Browser use: Requires many screenshots during navigation, console checks, element inspection.

Why:
- FlowLens has the bug already captured vs. needing to reproduce it.
- Full timeline view vs. step-by-step exploration.
- Ability to search/jump directly to issues vs. manual navigation.
- Pre-recorded network/console events vs. live inspection.

Best approach:
- FlowLens for debugging user-reported bugs.
- Browser/DevTools for exploratory testing or when testing fixes interactively.

We built FlowLens with privacy and flexibility in mind.

Choose the setup that works for you:

1. Let your AI agent debug for you: with our free, open-source MCP, all data stays on your machine.

2. Share flows with teammates for your different projects: using our SOC 2 compliant SaaS with a startup-friendly free tier.

3. Self-host for enterprise (BYOC): maintain full control over your data.

Every shared flow includes full context: network requests, console logs, JavaScript error traces, storage events, and a visual recording.

Very cool. Is it possible to self host?