Next.js DevTools MCP

next-devtools-mcp is a MCP server that provides Next.js development tools and utilities for AI coding assistants like Claude and Cursor.

What can you do with Next Js DevTools MCP?

- Discover running Next.js dev servers— Usenextjs_indexto find active Next.js 16+ servers and see which runtime tools each exposes.
- Query live runtime errors and logs— Callnextjs_callwithget_errorsorget_logson a discovered port to retrieve current build, runtime, and type errors or dev server logs.
- Inspect routes and page metadata— Usenextjs_callwithget_page_metadatato list all routes, pages, and component metadata from the running app.
- Resolve Server Action IDs to source files— Callnextjs_callwithget_server_action_by_idto map a Server Action ID back to its implementation file.
- Get version-accurate Next.js docs— Usenextjs_docsto locate the bundled docs innode_modules/next/dist/docs/that match your installed Next.js version.
- Set up browser automation— Usebrowser_evalto detect or install theagent-browserCLI so the agent can drive a browser directly.

next-devtools-mcpis a Model Context Protocol (MCP) server that connects coding agents like Claude and Cursor to your running Next.js dev server.

It is athin connector. It discovers running Next.js 16+ dev servers and proxies their built-in MCP endpoint (/_next/mcp) so agents get live runtime errors, routes, and logs. It also ships twogatewaysthat point agents at tools they run directly: version-accurate docs and theagent-browserCLI.

[!NOTE] Docs and migration workflows no longer live in this server. Next.js bundles its own docs atnode_modules/next/dist/docs/, and upgrade / Cache Components workflows are distributed as agent skills. SeeMigrating from 0.3.x.

- Node.jsv20.19 or a newerLTSversion
- npmorpnpm
- Next.js 16+ with a running dev server (fornextjs_index/nextjs_call)

Install for all your coding agents withadd-mcp:

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

[!NOTE]next-devtools-mcp@latestkeeps your client on the latest version.

amp mcp add next-devtools -- npx next-devtools-mcp@latest

Or followAmp's MCP docswith the config above.

claude mcp add next-devtools npx next-devtools-mcp@latest

codex mcp add next-devtools -- npx next-devtools-mcp@latest

env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" } startup_timeout_ms = 20_000

# Project gemini mcp add next-devtools npx next-devtools-mcp@latest # Global gemini mcp add -s user next-devtools npx next-devtools-mcp@latest

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

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

Or follow the official VS Code MCP setup guide.

Settings | AI | Manage MCP Servers→+ Add:

- Name:next-devtools
- Command:npx
- Arguments:-y, next-devtools-mcp@latest

Next.js 16+ enables its MCP endpoint by default athttp://localhost:3000/_next/mcp.next-devtools-mcpdiscovers and connects to it automatically — no config needed.

Then ask your agent about the running app:

Next Devtools, what errors are in my Next.js application? Next Devtools, show me the structure of my routes Next Devtools, what's in the development server logs?

The agent callsnextjs_indexto discover servers, thennextjs_callto query their real state.

The gateways do not do the work themselves — they tell the agent where the docs are or how to install/run the CLI, and the agent runs it directly (faster than proxying through MCP).

Scans common ports for running Next.js 16+ dev servers and lists each server's built-in runtime tools at/_next/mcp. No parameters.

Runtime tools exposed by Next.js (varies by version):

- get_errors— current build, runtime, and type errors
- get_logs— path to the dev log file (browser console + server output)
- get_page_metadata— routes, pages, component metadata
- get_project_metadata— project structure, config, dev server URL
- get_server_action_by_id— resolve a Server Action ID to its source file

Output: JSON listing discovered servers (port, PID, URL) and their tools.

Calls one runtime tool on a discovered server. Runnextjs_indexfirst to find the port and tool name.

- port(required) — dev server port
- toolName(required) — runtime tool to invoke
- args(optional) — arguments object, only if the tool requires them

{ "port": 3000, "toolName": "get_errors" }

Output: JSON with the tool's result.

Doesnotfetch docs. Next.js 16+ ships its full docs (markdown, matching your installed version) atnode_modules/next/dist/docs/. This tool returns that path and how to read it, so the agent uses version-accurate docs instead of training-data guesses. On older Next.js, it recommendsnpx @next/codemod@latest upgrade latest.

Input:topic(optional),project_path(optional, defaults to cwd).

Doesnotdrive the browser. It detects whetheragent-browseris installed and returns either the entry point (agent-browser skills get core --full) or the install steps (npm install -g agent-browser, thenagent-browser install), so the agent runs the CLI directly.

[error] No server info found—nextjs_index/nextjs_callneed a running Next.js 16+ dev server:
- Start it:npm run dev
- Confirm Next.js 16+ (the/_next/mcpendpoint only exists there)
- Verify it started without errors

browser_evalandnextjs_docswork without a dev server.

git clone https://github.com/vercel/next-devtools-mcp.git cd next-devtools-mcp pnpm install pnpm build

Point your MCP client at the local build:

{ "mcpServers": { "next-devtools": { "command": "node", "args": ["/absolute/path/to/next-devtools-mcp/dist/index.js"] } } }

codex mcp add next-devtools-local -- node dist/index.js

See theNext.js MCP documentationfor how MCP works with Next.js and coding agents.

Retrieve and analyze Claude Code conversation history from local files.