Next.js DevTools MCP

Next.js DevTools MCP is the official Model Context Protocol server for the Next.js React framework, built and maintained by the Vercel team at github.com/vercel/next-devtools-mcp. According to the official Next.js documentation at nextjs.org/docs/app/guides/mcp, Next.js 16 and later ships a built-in MCP endpoint at /_next/mcp inside the running development server. The next-devtools-mcp npm package acts as a thin connector: it automatically discovers running Next.js 16 dev servers across different ports, forwards tool calls to the matching endpoint, and gives an MCP-capable coding agent real-time insight into the application's state without Vercel needing to be involved as a cloud provider at all. The server is clearly distinct from the Vercel MCP Server already listed in the catalog: that one manages deployments, projects, and web analytics data on the Vercel platform, while Next.js DevTools MCP talks exclusively, and locally, to a Next.js project's currently running development process and requires no Vercel account or login.

What the server actually provides

Through the tools get_errors, get_logs, get_page_metadata, get_project_metadata, get_routes, get_server_action_by_id, get_compilation_issues, and compile_route, an agent gets, per the documentation, access to current build, runtime, and type errors, the path to the development log file with browser console output, metadata for individual pages and the overall project, a full route list grouped by App and Pages Router, and targeted lookups for Server Actions. The Turbopack-only tools get_compilation_issues and compile_route additionally let an agent retrieve project-wide compilation issues or trigger on-demand compilation of a single route without firing an actual HTTP request. A documentation gateway further points to the docs bundled with the exact installed Next.js version, shipped inside node_modules/next/dist/docs/, so explanations and generated code stay consistent with the version actually in use rather than an outdated or too-recent one. For browser testing, the README notes that the server additionally integrates Microsoft's separate Playwright MCP project.

Typical use cases

In practice, a user might ask their coding agent "What errors are currently in my application?", after which the agent queries the running dev server through the MCP server, collects build, runtime, and hydration errors, and proposes concrete fixes based on them. The same applies to upgrades ("Help me upgrade my Next.js app to version 16"), where the agent, per the Next.js documentation, runs the official upgrade codemod npx @next/codemod@latest upgrade latest and walks through breaking changes step by step, or to conceptual questions like "When should I use 'use client' in the App Router?", answered from the version-accurate bundled documentation. This lets an agent make suggestions that actually fit the existing project structure and installed Next.js version instead of relying on outdated training knowledge.

Installation and requirements

Per the README and official docs, next-devtools-mcp is added to a project's .mcp.json file and started via npx -y next-devtools-mcp@latest; alternatively, npx add-mcp next-devtools-mcp@latest installs the server automatically across all detected coding agents. Requirements are Node.js 20.19 or a newer current LTS release, and a running Next.js 16 project for access to the runtime tools; documentation and discovery features work even without a running dev server. Transport is stdio via the local npx process — there is no Vercel-hosted remote endpoint for this server.

License, provenance, and fit

Per its package.json on npm, the repository is MIT licensed, published from Vercel's GitHub organization through an automated release process (GitHub Actions, npm provenance), and is therefore clearly identifiable as an official Vercel/Next.js project rather than a community reimplementation. The server itself performs no authentication and requires no account; it communicates exclusively with the locally running Next.js development process on the same machine. Skill Road lists this as a separate catalog entry alongside the existing Vercel MCP Server because the two solve clearly distinct jobs: platform management on one side, in-framework development diagnostics on the other.

Who benefits from Next.js DevTools MCP?

The server is particularly useful for developers working with an AI coding agent on a Next.js 16 application who want to automate error diagnosis, routing overviews, and version upgrades directly inside their editor workflow instead of manually copying error messages from the terminal or browser console. It is less relevant for projects on Next.js versions below 16 or other frameworks, since the runtime tools strictly depend on the built-in /_next/mcp endpoint that only Next.js 16+ provides.

Node.js 20.19 or a newer current LTS release, npm or pnpm; the runtime tools additionally require a locally running Next.js 16 project.

Add next-devtools-mcp to the project's .mcp.json via npx -y next-devtools-mcp@latest, or run npx add-mcp next-devtools-mcp@latest to set it up automatically across all detected coding agents. Start the Next.js dev server (npm run dev); the MCP server then automatically connects to the running /_next/mcp endpoint.

npx -y next-devtools-mcp@latest

No authentication required; the server communicates only locally with the running Next.js development process on the same machine.

Read access to the local dev server's errors, logs, routes, and page/project metadata; no write operations on source code through the server itself.

Tool calls stay local between the MCP server, the dev server's /_next/mcp endpoint, and the connected coding agent; error messages, logs, and route data can enter the agent's model context.

Development logs and error messages can include sensitive paths or internal details; since this content enters the model context, real production secrets should never end up in the dev server log.