MCP browser setup for coding agents

Use this when you want a coding agent — Claude Code, Cursor, Windsurf, Codex, Cline, or Zed — to browse the live web from your editor or CLI without writing any glue code. The MCP server exposes navigation, clicking, typing, form filling, screenshots, and page inspection as tools the model calls directly.

Building on a personal assistant instead (OpenClaw, Hermes, and similar)? See the personal agent browser setup, which uses a skill file rather than an editor MCP config.

Connect your client

The server lives at https://mcp.browser.city/mcp and authenticates with your API key in the Authorization header.

{
  "mcpServers": {
    "browsercity": {
      "url": "https://mcp.browser.city/mcp",
      "headers": { "Authorization": "Bearer ${env:BROWSERCITY_API_KEY}" }
    }
  }
}

{
  "mcpServers": {
    "browsercity": {
      "serverUrl": "https://mcp.browser.city/mcp",
      "headers": { "Authorization": "Bearer ${env:BROWSERCITY_API_KEY}" }
    }
  }
}

First task to try

Ask the agent to open a page and summarize it:

Using the browsercity tools, open https://example.com, take a snapshot, and summarize what the page offers.

The agent opens a stealth session, navigates, inspects the page, and closes the session when done.

Production hardening checklist

• Keep the API key in your environment or secret manager, never in the prompt.
• Scope agent instructions to the sites the task actually needs.
• Ask agents to close sessions when a task finishes so you don’t pay for idle time.
• Use one MCP connection per agent workspace rather than sharing keys across teams.

Cost and plan notes

Agent sessions bill like any other browser session: compute time plus proxy traffic. Most tool-driven tasks finish in under a minute, so cost is driven by how many tasks you run, not how complex each one is.