# DevTool MCP

Gives the agent a handle on your running app: dev-server control, a reverse proxy and frontend diagnostics. Comes in handy when UI work has to happen with the page in view.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 22
- Author: standardbeagle
- License: Apache-2.0 · policy=link-only · description only; the file stays with the author
- Source: https://github.com/standardbeagle/agnt
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/mcp/devtool-mcp

## What it does

DevTool MCP runs development processes and a proxy for you, and pulls diagnostics out of the frontend. The agent gets console errors, network requests and layout state from the live page instead of a written description.

It connects like any other MCP server and starts through `npx`. In Claude a single command is enough; Cursor and GitHub Copilot need a config entry with the command `npx` and the args `-y` plus `@standardbeagle/devtool-mcp`. There is no build step.

Node.js with `npx` on `PATH` is what the server launches through, so without both it will not come up. Check that before wiring it into an editor.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add devtool-mcp -- npx -y @standardbeagle/devtool-mcp
```

### Codex

**Platform CLI**
```bash
codex mcp add devtool-mcp -- npx -y @standardbeagle/devtool-mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "devtool-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "@standardbeagle/devtool-mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "devtool-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@standardbeagle/devtool-mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add devtool-mcp npx -y @standardbeagle/devtool-mcp
```

## When to use it
- start a dev server and proxy on the agent's request
- catch JavaScript errors on a live page
- inspect network requests without copying them out of DevTools
- check layout on a device through a tunnel
- hand the agent structured page data instead of prose

## Example prompts
- Start the dev server for this project and show me the console errors in the browser
- Take a screenshot of the page and work out why the button sits off-screen
- Inspect the network requests on the checkout page

## Similar
- [REA](https://affpapa.org/en/nevibecode/mcp/rea.md) — MCP server · ★ 386989
- [GitHub](https://affpapa.org/en/nevibecode/mcp/github.md) — MCP server · ★ 33918
- [Netdata](https://affpapa.org/en/nevibecode/mcp/netdata.md) — MCP server · ★ 81115
- [browser-use](https://affpapa.org/en/nevibecode/mcp/browser-use.md) — MCP server · ★ 119160
- [Codebase Memory](https://affpapa.org/en/nevibecode/mcp/codebase-memory.md) — MCP server · ★ 47392
- [mcp-server](https://affpapa.org/en/nevibecode/mcp/mcp-server.md) — MCP server · ★ 43872

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md