Next.js DevTools MCP

Next.js DevTools MCP is an MCP server that connects AI coding assistants like Claude, Cursor, and Codex to running Next.js development servers. Acting as a lightweight proxy, it interfaces with the built-in MCP endpoint available in Next.js 16 and later environments. Software engineers and frontend developers use this server to provide coding assistants with direct access to active runtime diagnostic data. Through standard protocol tools, connected agents can inspect live compilation errors, runtime type issues, and combined server and browser log files without requiring manual copy-pasting from terminal consoles. In addition to debugging support, the server exposes route and component metadata, resolves Server Action IDs back to their corresponding source files, and directs agents toward version-accurate bundled local documentation. It also provides guidance for setting up browser automation using external command-line utilities.

Category: Developer Tools & Code Intelligence

Tags: frontend, nextjs, react, web-development

Visit Next.js DevTools MCP

How to install and configure Next.js DevTools MCP

1. Ensure Node.js v20.19 or higher and Next.js 16+ are installed. 2. Automatically install for detected clients by running npx add-mcp next-devtools-mcp@latest. 3. Alternatively, manually add the server configuration to your MCP client settings: json { "mcpServers": { "next-devtools": { "command": "npx", "args": ["-y", "next-devtools-mcp@latest"] } } } 4. For Cursor, navigate to Cursor Settings > MCP > New MCP Server and enter the command above. 5. Start your application dev server using npm run dev.

What you can do with Next.js DevTools MCP

• Diagnosing runtime and compilation issues: Fetch live build errors, runtime exceptions, and TypeScript diagnostics directly from the active Next.js development server.

Key facts

• Open Source
• https://github.com/vercel/next-devtools-mcp
• Developer Tools & Code Intelligence, DevOps, CI/CD & Version Control
• frontend, nextjs, react, web-development

Part of MCP Servers

How do I install Next.js DevTools MCP?

You can install it automatically across your coding agents by executing npx add-mcp next-devtools-mcp@latest. Alternatively, add next-devtools-mcp to your MCP client configuration under mcpServers, specifying npx as the command and -y with next-devtools-mcp@latest as the arguments.

What can Next.js DevTools MCP do?

It discovers running Next.js 16+ dev servers, queries live build and runtime errors, inspects server and browser logs, reads route and page metadata, resolves Server Action IDs to source files, points agents to bundled version-specific documentation, and provides instructions to configure browser automation.

Which MCP clients work with Next.js DevTools MCP?

The server works with clients that support the Model Context Protocol, including Cursor, Claude Code, Amp, Codex, Gemini, Google Antigravity, VS Code with Copilot, and Warp.

What are the system requirements for Next.js DevTools MCP?

You need Node.js version 20.19 or a newer LTS release, npm or pnpm, and an active Next.js 16 or newer development server running locally to access runtime tools.

Is Next.js DevTools MCP open source?

Yes, Next.js DevTools MCP is open-source software released under the MIT license, with source code maintained in the official Vercel repository on GitHub.