Browser control + dev-server logs on one correlated timeline — so a browser console error and the backend stack trace from the same moment sit side by side. For AI agents and humans.
claude mcp add devloop --scope user -- npx -y devloop-mcpThen, in any project: “dev_start and repro a navigate to /projects.” It starts your dev server, drives the browser, and returns a correlated slice of both sides. Need one instance shared across agents? devloop-mcp daemon. MCP blocked by an enterprise sandbox? Drive the tools as shell commands — see the mcporter guide.
A desktop app: tabbed browser panes (and Expo iOS/Android targets) beside a unified, filterable timeline, a repro builder, an element picker, and pop-out browser windows. Grab your platform:
Server stdout/stderr and browser console/network/page-errors share one clock — correlate cause and effect across the stack.
Drive a browser, or an Expo/React Native app on the iOS simulator or an Android emulator — live device in the pane, native logs + RN network on the same timeline, snapshot/tap via idb/adb.
Run an action sequence (navigate / click / type / eval), wait for network idle, and get everything that happened on both sides.
Run several projects at once; query logs by app name, not just the active pane. Each project gets isolated browser storage.
Run one devloop-mcp daemon and many agents/sessions share it over HTTP/SSE — one browser, one dev server, one timeline.
Headless stdio for Claude Code, MCP-over-HTTP for the cockpit + daemon, or call the tools as plain shell commands via mcporter when MCP is sandboxed.
Three transports expose one shared, transport- & substrate-agnostic core, which drives a browser — or a native device. Everything lands on one timeline.
%%{init: {"flowchart": {"wrappingWidth": 700}}}%%
flowchart TD
clients["<b>MCP clients</b><br/>Claude Code · agents · mcporter"]
clients --> stdio & daemon & cockpit
stdio["<b>stdio</b><br/><i>spawned per session</i>"]
daemon["<b>daemon</b><br/><i>HTTP/SSE · one shared instance</i>"]
cockpit["<b>cockpit</b><br/><i>HTTP/SSE · Electron app</i>"]
stdio --> mcp
daemon --> mcp
cockpit --> mcp
mcp(["<b>MCP Server</b><br/><i>stdio transport, or HTTP/SSE for the daemon + cockpit</i>"])
mcp --> core
core["<b>shared core</b> · <i>transport- and substrate-agnostic</i><br/>the MCP tool layer + one unified, correlated timeline"]
core --> iface(["<b>IBrowserController · IBrowserManager · ITargetController</b><br/><i>capability-gated by the active target</i>"])
iface --> pup & elec & rn
pup["<b>web</b> · Puppeteer / Chrome<br/><i>stdio + daemon</i>"]
elec["<b>web</b> · Electron CDP panes<br/><i>cockpit · per-project partitions</i>"]
rn["<b>native</b> · React Native (Hermes)<br/><i>JS + network over Metro CDP</i>"]
rn -->|"idb / adb"| nd["<b>NativeDriver</b><br/>iOS idb · Android adb<br/>taps · snapshot · screens · logs"]
Devloop timestamps your dev server's stdout/stderr and the browser's console, network, and page errors into one buffer, so a console error and the backend stack trace from the same moment line up on a single correlated timeline.
Yes. Devloop is an MCP server. Add it with claude mcp add devloop --scope user -- npx -y devloop-mcp and Claude Code can drive your browser and dev server and read both sides of the timeline.
Yes — it controls an Expo / React Native app on the iOS simulator or an Android emulator, with native logs and RN network on the same timeline and snapshot/tap via idb/adb.
Those show only the browser side. Devloop correlates the browser with your dev-server logs (and native logs) on one clock, and exposes it to AI agents over MCP — so you debug cause and effect across the whole stack, not just the front end.
Drive the same tools as plain shell commands via mcporter — see the mcporter guide.
Run devloop-mcp daemon and many agents or sessions share it over HTTP/SSE — one browser, one dev server, one timeline.