Drive Devloop via mcporter

Devloop puts a browser and your dev server on one timestamped timeline, so a browser error and the backend log from the same moment sit side by side. It exposes that as MCP tools: start a dev server, drive a browser (navigate / click / type / snapshot / screenshot), capture logs + network, diagnose what's broken, and repro a flow — plus native iOS/Android.

When the Devloop MCP server is connected to this agent directly, just call the tools. When it isn't — but you have a shell — use [mcporter](https://mcporter.sh) to call the same tools as commands.

Setup (once per machine)

Run one shared, long-running Devloop and point mcporter at it:

# Start a headless daemon (one shared instance on :7333). Use npx if devloop-mcp isn't installed.
devloop-mcp daemon &              # or: npx -y devloop-mcp daemon &

# Sanity-check + discover tools (use --schema to see every tool's signature):
npx mcporter list --allow-http --http-url http://localhost:7333/mcp --name devloop --schema

If spawning a process per call is fine and you'd rather not run a daemon, point mcporter at stdio instead: npx mcporter list --stdio "npx -y devloop-mcp" --name devloop.

--allow-http is required because the localhost URL is cleartext. Exact flags can vary by mcporter version — npx mcporter --help is authoritative.

Calling tools

M='npx mcporter call --allow-http --http-url http://localhost:7333/mcp'

$M 'devloop.dev_start(cwd: "/abs/path/to/project")'          # start the dev server (auto-detects the cmd)
$M 'devloop.browser_navigate(url: "http://localhost:3000")'
$M 'devloop.browser_snapshot()'                               # a11y tree with refs for click/type
$M 'devloop.browser_click(selector: "#submit")'
$M 'devloop.get_logs(stream: "network", limit: 50)'
$M 'devloop.diagnose()'                                       # triage: grouped errors + failed requests
$M 'devloop.export_har()'                                     # full network as HAR 1.2

Recipes

• Reproduce + correlate a bug — dev_start, then one repro with a sequence; it clears the timeline,

runs the steps, waits for things to settle, and returns everything that happened on both sides:

  $M 'devloop.repro(actions: [{kind:"navigate", url:"http://localhost:3000/checkout"}, {kind:"click", selector:"#pay"}], waitFor:"networkidle")'

• Triage first — diagnose() before digging through get_logs; it dedupes errors and lists failed/4xx-5xx requests.
• Native (Expo / React Native) — native_open(platform: "ios") (or "android"), then the same

browser_* tools drive the device (snapshot/tap/type via idb/adb); native_build(platform: "ios") to (re)build. Native tools require the Devloop cockpit (the desktop app), not the headless daemon.

All tools

The complete tool set, so you don't need introspection. Optional args end in ?. Call any of these as $M 'devloop.<name>(arg: value, …)'. (npx mcporter list devloop --schema is the live, authoritative list if this drifts from your installed version.)

Browser — act on the active pane/target:

• browser_navigate(url) — open a URL.
• browser_snapshot() — accessibility tree: url, title, and interactive/landmark elements each with a CSS-selector ref. Prefer this over a screenshot to find/target elements.
• browser_click(selector) · browser_type(selector, text) · browser_hover(selector) · browser_scroll(selector?, x?, y?) · browser_select(selector, value) · browser_press(key, selector?) — keys like Enter/Tab/ArrowDown.
• browser_screenshot(fullPage?) → PNG.
• browser_eval(expression) — run JS in page context (not CSP-blocked).
• browser_wait_for(selector?, text?, timeoutMs?) — wait until a selector/text appears.
• browser_wait_for_idle(idleMs?, timeoutMs?) — wait until the network settles.
• browser_emulate(device?, width?, height?, mobile?, deviceScaleFactor?, userAgent?, reset?) — device: iphone/ipad/pixel; reset:true → desktop.
• browser_throttle(profile) — slow-3g/fast-3g/offline/none.
• browser_clear_storage(allOrigins?) — clear cookies/localStorage/IndexedDB/cache/SW.

Logs & correlation:

• get_logs(source?, stream?, grep?, app?, sinceSeq?, limit?) — unified tail. source: server/browser/native; stream: stdout/stderr/console/network/pageerror. app scopes to one project.
• get_logs_around(ts, windowMs?, source?, app?) — everything within ±windowMs of a moment, time-ordered across sources (the correlation tool).
• get_network(grep?, app?, limit?) — every request (full ring, independent of the log threshold).
• diagnose(windowMs?, app?) — grouped/deduped errors + failed (4xx/5xx) requests + a one-line summary. Start here.
• export_har(app?) — full network as HAR 1.2. export_bundle(app?, windowMs?) — shareable bug-report bundle (diagnose + timeline + screenshots + HAR + repro). clear_logs() — reset before reproducing.

Dev server: dev_start(project?, cmd?, cwd?) (saved project, or cmd+cwd, or neither → cwd defaults + cmd auto-detected) · dev_stop() · dev_status().

Project registry: project_list() · project_add(name, cwd, cmd?, url?) · project_remove(name).

Panes (cockpit, multi-target): pane_list() · pane_new(url?) · pane_select(id) · pane_close(id) · pane_pop(id).

Native (cockpit only): native_open(platform) (ios/android — opens the sim/mirror + routes browser_* to it) · native_close() · native_build(platform, cwd?).

repro — repro(actions?, action?, waitFor?, settleMs?, stepSettleMs?, idleMs?, timeoutMs?, continueOnError?, clear?): clears the timeline, runs one action or an actions sequence, waits, and returns everything that happened on both sides. actions: [{kind, …}] — kinds navigate/click/type/hover/scroll/select/press/eval/wait/none. waitFor: "networkidle" for slow/streaming responses.

Notes

• The daemon is shared — many agents/sessions hit one browser, one dev server, one timeline.
• Persist the server in mcporter's config (~/.mcporter/mcporter.json) or rely on its auto-import from an

existing Claude/Cursor/Codex MCP config, so you can drop the --http-url flags and just call devloop.<tool>.