# Next.js DevTools MCP server

> Query a running Next.js dev server for runtime errors, routes and logs, and find version-matched docs from your coding agent.

- Listing: https://mcp.tc/i/nextjs-devtools
- Connect: this is a local (stdio) server; install it on your machine (see Install). The listing link is a page, not an MCP endpoint.
- Type: local (stdio)
- Auth: no API key needed
- Category: [Developer Tools](https://mcp.tc/c/developer-tools)
- Vendor: Vercel
- Verified: yes, mcp.tc checked that this is the official server (https://mcp.tc/verify). It says who runs the server, not that it is safe.
- Repository: <https://github.com/vercel/next-devtools-mcp>
- Package: npm `next-devtools-mcp`

## About

Connects coding agents such as Claude Code and Cursor to a running Next.js 16+ dev server. It discovers local dev servers, proxies their built-in MCP endpoint (/\_next/mcp) and returns live build and runtime errors, routes, page metadata, project config and dev logs. Two gateway tools point the agent at the docs bundled in node\_modules/next/dist/docs and at the agent-browser CLI for browser automation.

Runs locally over stdio with npx -y next-devtools-mcp@latest. Requires Node.js 20.19 or newer and, for the runtime tools, a Next.js 16+ dev server started with npm run dev. No sign-in or API key is needed.

## What it can do

- Discover running Next.js dev servers and list their runtime tools
- Read current build, runtime and type errors
- Inspect routes, pages and project metadata
- Find the dev server log file
- Resolve a Server Action ID to its source file
- Locate version-accurate Next.js docs in the installed package
- Get setup steps for the agent-browser CLI

## Example prompts

- "What errors are in my Next.js application right now?"
- "Show me the structure of my routes in the running dev server."
- "What's in the Next.js development server logs?"
- "Where are the docs for the Next.js version installed in this project?"

## Install

### Claude Code

1. Run this in a terminal, in your project folder:

```bash
claude mcp add --transport stdio nextjs-devtools -- npx -y next-devtools-mcp@latest
```

2. Start Claude Code and type `/mcp`. **nextjs-devtools** should show as connected.

Add `--scope user` to make it available in every project.

### Claude Desktop

1. Open **Settings → Developer → Edit Config**. It opens `claude_desktop_config.json`. Add:

`claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "nextjs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "next-devtools-mcp@latest"
      ]
    }
  }
}
```

2. Save the file and restart Claude Desktop.

Needs Node.js on your computer. The file lives in `~/Library/Application Support/Claude/` on macOS and `%APPDATA%\Claude\` on Windows.

### Cursor

[Add to Cursor](<https://cursor.com/install-mcp?name=nextjs-devtools&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIm5leHQtZGV2dG9vbHMtbWNwQGxhdGVzdCJdfQ%3D%3D>) (opens Cursor)

Or add it by hand to `~/.cursor/mcp.json` (all projects) or `.cursor/mcp.json` (this project):

`mcp.json`:

```json
{
  "mcpServers": {
    "nextjs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "next-devtools-mcp@latest"
      ]
    }
  }
}
```

Needs Node.js on your computer.

### VS Code

[Install in VS Code](<https://vscode.dev/redirect/mcp/install?name=nextjs-devtools&config=%7B%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22next-devtools-mcp%40latest%22%5D%7D>) (opens VS Code)

Or from a terminal:

```bash
code --add-mcp '{"name":"nextjs-devtools","type":"stdio","command":"npx","args":["-y","next-devtools-mcp@latest"]}'
```

Or commit it to the repo in `.vscode/mcp.json`:

`.vscode/mcp.json`:

```json
{
  "servers": {
    "nextjs-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "next-devtools-mcp@latest"
      ]
    }
  }
}
```

Needs Node.js on your computer.

### Devin Desktop

1. Add it to `~/.config/devin/mcp_config.json` (macOS and Linux) or `%APPDATA%\devin\mcp_config.json` (Windows):

`mcp_config.json`:

```json
{
  "mcpServers": {
    "nextjs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "next-devtools-mcp@latest"
      ]
    }
  }
}
```

2. Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf.

### Codex

```bash
codex mcp add nextjs-devtools -- npx -y next-devtools-mcp@latest
```

Or edit `~/.codex/config.toml` directly:

`config.toml`:

```toml
[mcp_servers.nextjs-devtools]
command = "npx"
args = ["-y", "next-devtools-mcp@latest"]
```

Needs Node.js on your computer.

### Gemini CLI

```bash
gemini mcp add nextjs-devtools npx -- -y next-devtools-mcp@latest
```

This adds it to the current project. Add `-s user` to use it everywhere.

### Any client

Most clients that start local servers accept this shape:

```json
{
  "mcpServers": {
    "nextjs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "next-devtools-mcp@latest"
      ]
    }
  }
}
```

Zed puts servers under `context_servers` in its settings, with the same `command`, `args` and `env` fields.

Needs Node.js on your computer.

## Details

- Server version: 0.3.6
- Last checked: 2026-10-03
- Listed: 2026-10-03
- Updated: 2026-10-03

---
Source: https://mcp.tc/i/nextjs-devtools (mcp.tc is an independent directory, not affiliated with this server's publisher). Corrections: https://mcp.tc/report