Skip to main content

agnt with Cursor

Cursor is an AI-native code editor with built-in Composer for chat-driven development, but it has no visibility into what your browser is rendering. When you describe a visual bug or a failing API call, Cursor's AI is guessing. agnt changes that. It connects Cursor to your browser through an MCP server that exposes screenshots, JavaScript errors, DOM state, and network traffic directly to Composer.

With agnt configured, Cursor can start your dev server, proxy browser traffic, capture runtime errors, inspect elements, and take screenshots — all from within Composer. No manual DevTools required.

Installation​

Install the agnt binary first, then register it as an MCP server in Cursor.

Install the Binary​

go install github.com/standardbeagle/agnt/cmd/agnt@latest

Verify the installation:

agnt --version

Register the MCP Server​

  1. Open Cursor Settings (Cmd+, on macOS, Ctrl+, on Linux/Windows)
  2. Navigate to Cursor Settings > MCP
  3. Click Add new MCP server
  4. Enter the following configuration:
{
  "mcpServers": {
    "agnt": {
      "command": "agnt",
      "args": ["mcp"]
    }
  }
}

Restart Cursor after adding the server. You should see agnt listed as a connected MCP server in the MCP settings panel.

tip

Unlike Claude Code, Cursor does not need agnt run to wrap its process. Configure the MCP server directly and Composer will call agnt tools through the standard MCP protocol.

What Cursor Gets​

Once connected, Composer gains access to these MCP tools:

ToolWhat it does
detectAuto-detect project type (Node, Go, Python) and available scripts
runStart dev servers and shell commands in background or foreground
procMonitor process output, status, and manage lifecycle
proxyStart a reverse proxy with automatic browser instrumentation
proxylogQuery captured traffic logs, errors, and screenshots
get_errorsUnified error view across all processes and proxies
currentpageTrack active browser sessions and page state
snapshotCapture visual snapshots for regression testing

Project Configuration​

Create an .agnt.kdl file in your project root to skip manual setup each session:

scripts {
    dev {
        run "npm run dev"
        autostart true
    }
}

proxies {
    app {
        target "http://localhost:3000"
        autostart true
    }
}

With this config, agnt auto-starts the dev server and proxy when the MCP server initializes. Composer can immediately call get_errors or proxy exec without any setup commands.

Your First Debugging Session​

Here is what a real Composer debugging session looks like. You describe the problem; Cursor does the rest.

You: "The signup form submits but nothing happens. No error visible on screen."

Cursor: I'll set up browser debugging and investigate.

[detect {path: "."}]
→ Node.js project, package manager: npm, scripts: dev, build, test

[run {script_name: "dev"}]
→ Dev server started, process ID: dev

[proxy {action: "start", id: "app", target_url: "http://localhost:5173"}]
→ Proxy running on port 38412

Cursor: Open http://localhost:38412/signup in your browser and submit the form.
        The proxy captures all errors and network traffic automatically.

[get_errors {}]
→ 1 error found:
  [proxy:http] 422 Unprocessable Entity
    → POST /api/auth/signup — {"error": "email field required"}

[proxy {action: "exec", id: "app",
  code: "window.__devtool.getElementInfo('form.signup')"}]
→ { tag: "form", children: 3,
    inputs: [
      { name: "username", type: "text", value: "testuser" },
      { name: "mail", type: "email", value: "test@example.com" }
    ] }

Cursor: Found the issue. The API expects a field named "email" but
        the form input is named "mail". The 422 response gets swallowed
        because there is no error handler on the fetch call.

        I'll rename the input field and add error handling.

Cursor identified the field name mismatch and the missing error handler without you opening DevTools or reading network logs.

Cursor-Specific Features​

Composer Workflow​

Composer is where agnt tools appear. When you ask Cursor to debug a browser issue, Composer calls agnt tools in sequence — detect the project, start the server, open the proxy, then query errors. You can also call tools explicitly by referencing them in your prompt: "use get_errors to check for JavaScript exceptions."

Tool Approval​

By default, Cursor may prompt you to approve each MCP tool call. For a smoother debugging workflow:

  1. Open Cursor Settings > MCP
  2. Look for tool approval or auto-approve settings
  3. Enable auto-approval for the agnt server, or approve tools individually during your first session

Once approved, subsequent calls to the same tool run without prompts.

Multi-File Context​

Cursor excels at multi-file edits. After agnt identifies an error with stack traces pointing to specific files, Cursor can open those files, apply fixes across components, and verify the fix with another get_errors call — all in a single Composer conversation.

Inline Editing with Browser Context​

Use Cursor's inline editing (Cmd+K / Ctrl+K) alongside Composer. Ask Composer to capture the current error state with agnt, then use inline edit on the specific file and line that agnt identified. The combination of browser diagnostics and inline editing is faster than switching between DevTools and your editor.

Tips for Best Results​

  • Start with get_errors {} to see all current issues across processes and proxies in one call. This gives Cursor the full picture before diving into specifics.
  • Configure .agnt.kdl for auto-start so the proxy is ready the moment you open Composer. No repeated setup commands each session.
  • Use proxy exec to run window.__devtool diagnostics from Composer. There are 50+ primitives for layout analysis, accessibility auditing, and DOM inspection.
  • Use the floating indicator in your browser to send messages directly to agnt. Click a broken element, describe what is wrong, and the context flows through the proxy logs.
  • Use snapshot before and after fixes. Ask Cursor to compare the snapshots to verify the fix did not introduce regressions.
  • Reference specific tools in your prompt when Cursor does not call them automatically. Saying "use proxylog to check recent network requests" guides Composer to the right tool.

See Also​