Next.js DevTools MCP

Official

Connects coding agents to your running Next.js dev server

★ 819 Stars Category · Dev Tools Very popular

63FMRS · C

This is the Vercel-maintained Next.js DevTools MCP server (MIT licensed, version 0.4.0). As a thin connector, it discovers Next.js 16+ dev servers and proxies their built-in /_next/mcp endpoint so coding agents get live errors, routes, and logs, while gateway tools point agents at version-accurate docs and the agent-browser CLI. It suits developers on Next.js 16+ working with MCP coding agents; it is not for non-Next.js projects or versions below 16, nor for users expecting it to fetch docs or drive the browser itself. Note the default anonymous telemetry and the 60-second upstream request deadline.

Reliability

10/20

Security and permissions

12/20

Maintenance

12/20

Documentation

14/20

Setup experience

15/20

Read the FMRS scoring method →

next-devtools-mcp is a Model Context Protocol (MCP) server maintained by Vercel that connects coding agents like Claude and Cursor to your running Next.js dev server. It is a thin 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 two gateways that point agents at tools they run directly: version-accurate docs and the agent-browser CLI. As of 0.4.0, docs and migration workflows no longer live in this server; Next.js bundles its own docs at node_modules/next/dist/docs/, and upgrade / Cache Components workflows are distributed as agent skills.

Tools

nextjs_index

Discover running Next.js dev servers and list each one's runtime MCP tools.

nextjs_call

Call a runtime tool on a discovered server (errors, routes, logs, Server Actions).

nextjs_docs

Gateway. Point the agent at version-accurate docs in node_modules/next/dist/docs/.

browser_eval

Gateway. Point the agent at the agent-browser CLI for browser automation.

Setup

Verify requirements: Node.js v20.19 or a newer LTS version, and npm or pnpm.
Install for all your coding agents with add-mcp: npx add-mcp next-devtools-mcp@latest (add -y to skip the prompt and install to all detected agents, add -g to install globally).
Or add the config to your MCP client manually: {"mcpServers":{"next-devtools":{"command":"npx","args":["-y","next-devtools-mcp@latest"]}}}.
Client-specific commands are also available, e.g. Claude Code: claude mcp add next-devtools npx next-devtools-mcp@latest; Cursor offers an install link or Settings → MCP → New MCP Server.
Start your Next.js dev server: npm run dev. Next.js 16+ enables its MCP endpoint by default at http://localhost:3000/_next/mcp, and the server discovers and connects to it automatically with no extra config.

claude_desktop_config.json

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

Generate and validate client config

Fit and risk

Best for

Front-end developers on Next.js 16+ who want coding agents to read live dev server state directly
Teams using MCP-capable agent workflows such as Claude Code, Cursor, or Codex
Next.js projects that need version-accurate docs instead of fetching docs over the network

Not for

Projects not using Next.js or below version 16 (nextjs_index / nextjs_call need a running Next.js 16+ dev server)
Users expecting the server to fetch docs itself or drive the browser directly (nextjs_docs and browser_eval are gateways only)
Deployments needing non-stdio transports such as remote HTTP

Required permissions

Read the project's next/package.json locally to resolve the installed Next.js version and docs path
Network access to local dev server ports (e.g. localhost:3000) to discover and call the /_next/mcp endpoint
Write local files under ~/.next-devtools-mcp/ (telemetry-id, telemetry-salt, and debug log mcp.log)
browser_eval may prompt installation of a global CLI: npm install -g agent-browser

Risks and side effects

Anonymous usage telemetry is collected by default (tool usage, anonymous error messages, session ID, timestamps, and basic environment such as OS and Node.js version); your code, file contents or paths, personal data, credentials, and tool arguments are not collected. Opt out with export NEXT_TELEMETRY_DISABLED=1, and delete local telemetry data with rm -rf ~/.next-devtools-mcp.
Upstream requests for runtime tool calls, including response-body reads, have a 60-second deadline.
nextjs_docs falls back to https://nextjs.org/docs when an installed release has no bundled docs and asks the agent to verify APIs against the installed version.
Using next-devtools-mcp@latest keeps clients on the latest version, which may introduce unexpected changes.

Troubleshooting

ERR_MODULE_NOT_FOUND referencing next-devtools-mcp/dist: clear your npx cache and restart your MCP client; the server reinstalls fresh.
[error] No server info found: nextjs_index / nextjs_call need a running Next.js 16+ dev server — start it with npm run dev, confirm Next.js 16+ (the /_next/mcp endpoint only exists there), and verify it started without errors.
browser_eval and nextjs_docs work without a dev server.
On Windows 11 with Codex, add environment variables (SystemRoot, PROGRAMFILES) and a longer startup timeout (startup_timeout_ms = 20_000) to .codex/config.toml.
For local development, run pnpm install and pnpm build first, then point your MCP client at the local build at dist/index.js.

Use cases

Ask your agent about errors in the running Next.js application (nextjs_index + nextjs_call with get_errors)

Inspect routes and page structure (get_page_metadata)

Read development server logs (get_logs)

Resolve a Server Action ID to its source file (get_server_action_by_id)

Get the path to version-accurate Next.js docs for the installed version (nextjs_docs)

Set up agent-browser for browser automation (browser_eval)

Supported clients

Claude CodeFull support

CursorFull support

CodexFull support

AmpFull support

GeminiFull support

Google AntigravityFull support

VS Code / CopilotFull support

WarpFull support

Related MCP servers

Compare with other MCP servers