DEV Community

Cover image for Why my coding agent couldn't see my app's API calls, and the 3 fixes I use
Parth V Square for Branch42 Labs

Posted on Originally published at netraptor.dev

Why my coding agent couldn't see my app's API calls, and the 3 fixes I use

TL;DR: Your agent runs in a terminal or editor. Your app's API calls run in a Chrome tab, behind your login. Nothing connects the two until you add something. You have three options:

  1. Paste it (Copy as cURL or HAR). Zero setup. Manual, and it leaks tokens if you don't clean it.
  2. Give the agent a browser (Chrome DevTools MCP, Playwright MCP, Claude in Chrome, Cursor's browser). Best for reproducing bugs. Sees only what it loads in that session.
  3. Let it read traffic you already recorded through a local MCP server. Best for writing code against the real API. Read-only, covers only what you recorded.

The problem

I kept asking Claude Code to write a client for an internal API nobody had documented. It read the frontend source, found the URLs, and invented the response shapes. Then it tried curl from the terminal and got a 401, because the terminal doesn't have my session cookies.

The agent did nothing wrong. The data it needed lived in a browser tab it had no way into.

Fix 1: paste the request

For one failing call this is still the fastest thing:

  1. DevTools → Network, reproduce the problem.
  2. Right-click the request → Copy → Copy as cURL.
  3. Delete the Cookie and Authorization values.
  4. Paste it into the chat with the response body.

Watch out for:

  • Copy as cURL includes your headers, so tokens go straight into the chat unless you remove them.
  • Chrome's default HAR export is sanitized, but that only drops Cookie, Set-Cookie and Authorization. Tokens in URLs, custom headers like X-Api-Key and bodies stay in.
  • A HAR of a few minutes of clicking has hundreds of entries. That's a lot of context spent on images and scripts.

Fix 2: give the agent its own browser

# Chrome DevTools MCP (network, console, perf traces, Lighthouse)
claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest

# Playwright MCP (multi-browser, accessibility tree, request mocking)
claude mcp add playwright npx @playwright/mcp@latest

# Claude in Chrome extension: uses your Chrome and its login state
claude --chrome
Enter fullscreen mode Exit fullscreen mode

In Cursor, the built-in browser in Agent already reads console messages and monitors network requests for the pages it opens.

This is the one I reach for when the agent has to do something: reproduce a bug, check a UI fix, read console errors, profile a slow page. It's also the only option that can see a page nobody has opened yet.

Where it gets awkward is "tell me about the whole API":

  • The request list is per page. Chrome DevTools MCP resets it on navigation and includePreservedRequests reaches back 3 navigations.
  • DevTools MCP and Playwright MCP start their own browser profile, so logged-in pages mean logging in there or attaching to your real session.
  • Every page the agent walks costs tool calls and tokens.
  • /orders/1042 and /orders/1043 come back as two unrelated URLs.

I wrote up DevTools MCP setup and attach mode separately: Chrome DevTools MCP guide.

Fix 3: let the agent read what you already recorded

The other way round: you use the app normally, something records the calls, and the agent queries that recording.

This is what I built Netraptor for. It's a Chrome extension that records your app's fetch/XHR calls in your own signed-in Chrome (turn on Keep history for this site so sessions are saved). Pro includes a local, read-only MCP server with five tools: list_sessions, list_endpoints, get_endpoint, search and get_request. Endpoints come back as templates like /orders/{id} with an inferred schema and a couple of real examples.

Pair once from Settings → Local MCP server (it gives you an npx -y @branch42-labs/netraptor-mcp pair NR-… command), then add it to your client:

# Claude Code
claude mcp add netraptor -- npx -y @branch42-labs/netraptor-mcp

# Codex (CLI and IDE extension share ~/.codex/config.toml)
codex mcp add netraptor -- npx -y @branch42-labs/netraptor-mcp
Enter fullscreen mode Exit fullscreen mode
// Cursor: ~/.cursor/mcp.json or .cursor/mcp.json
{
  "mcpServers": {
    "netraptor": {
      "command": "npx",
      "args": ["-y", "@branch42-labs/netraptor-mcp"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Honest limits:

  • It only reads saved sessions. Live traffic in the DevTools panel without Keep history isn't visible to the agent.
  • Sensitive headers, URL params and top-level JSON fields (Authorization, Cookie, anything named like token, secret, session, key) are redacted. Nested JSON fields aren't, so I use a test account.
  • It records from inside the page, so browser-added headers like Cookie aren't there at all. DevTools MCP shows them.
  • It can't click or send anything. If you never opened a page, its calls aren't there.
  • The MCP server is Pro ($29.99 once). Recording and Postman/HAR/curl export are free.

Prompts that work well once it's connected:

  • "What does GET /orders/{id} return? Show me a real response."
  • "Write a typed client for the endpoints the checkout page calls."
  • "Which calls returned 401 in my last session, and what did the token refresh request return just before?"
  • "Generate a mock server for /api/billing from the recorded responses."

What I actually do

  • One request, one question: Copy as cURL, minus tokens.
  • Reproduce or verify: Chrome DevTools MCP, or Playwright MCP for flows and other browsers.
  • Write code against the real API: recorded traffic over MCP.
  • Usually both: recorded traffic tells the agent what the API looks like, and the browser server lets it check the fix.

The full comparison, with setup for each client and an FAQ, is on the original guide: Why your coding agent can't see your app's API calls.

Top comments (0)