Provides specialized development tools and utilities for Next.js
Next.js DevTools MCP
next-devtools-mcp is a Model Context Protocol (MCP) server that provides Next.js development tools and utilities for coding agents like Claude and Cursor.
Getting Started
Requirements
- Node.js v20.19 or a newer latest maintenance LTS version
- npm or pnpm
Install with add-mcp
Install the MCP server for all your coding agents:
npx add-mcp next-devtools-mcp@latest
Add -y to skip the confirmation prompt and install to all detected agents already in use in the project directory. Add -g to install globally across all projects.
Manual installation
Add the following config to your MCP client:
{
"mcpServers": {
"next-devtools": {
"command": "npx",
"args": ["-y", "next-devtools-mcp@latest"]
}
}
}
[!NOTE] Using
next-devtools-mcp@latestensures that your MCP client will always use the latest version of the Next.js DevTools MCP server.
MCP Client Configuration
Amp
Using Amp CLI:
amp mcp add next-devtools -- npx next-devtools-mcp@latest
Or configure manually:
Follow Amp's MCP documentation and apply the standard configuration shown above.
Claude Code
Use the Claude Code CLI to add the Next.js DevTools MCP server:
claude mcp add next-devtools npx next-devtools-mcp@latest
Alternatively, manually configure Claude by editing your MCP settings file and adding the configuration shown above.
Codex
Using Codex CLI:
codex mcp add next-devtools -- npx next-devtools-mcp@latest
Or configure manually:
Follow the MCP setup guide with the standard configuration format:
- Command:
npx - Arguments:
-y, next-devtools-mcp@latest
Windows 11 Special Configuration:
Update .codex/config.toml with environment variables and increased startup timeout:
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000
Cursor
Click the button to install:
Or install manually:
Go to Cursor Settings → MCP → New MCP Server. Use the config provided above.
Gemini
Using Gemini CLI:
Project-wide installation:
gemini mcp add next-devtools npx next-devtools-mcp@latest
Global installation:
gemini mcp add -s user next-devtools npx next-devtools-mcp@latest
Or configure manually:
Follow the MCP setup guide with these parameters:
- Command:
npx - Arguments:
-y, next-devtools-mcp@latest
Google Antigravity
Configure in MCP config file:
Add this to your Antigravity MCP config file: .gemini/antigravity/mcp_config.json
{
"mcpServers": {
"next-devtools": {
"command": "npx",
"args": ["-y", "next-devtools-mcp@latest"]
}
}
}
See Antigravity MCP docs for more info.
VS Code / Copilot
Using VS Code CLI:
code --add-mcp '{"name":"next-devtools","command":"npx","args":["-y","next-devtools-mcp@latest"]}'
Or configure manually:
Follow the official VS Code MCP server setup guide and add the Next.js DevTools server through VS Code settings.
Warp
Using Warp UI:
Navigate to Settings | AI | Manage MCP Servers and select + Add to register a new MCP server with the following configuration:
- Name:
next-devtools - Command:
npx - Arguments:
-y, next-devtools-mcp@latest
Quick Start
For Next.js 16+ Projects (Recommended)
To unlock the full power of runtime diagnostics, start your Next.js dev server:
npm run dev
Next.js 16+ has MCP enabled by default at http://localhost:3000/_next/mcp (or whichever port your dev server uses). The next-devtools-mcp server will automatically discover and connect to it.
⚠️ IMPORTANT: Start every Next.js session by calling the init tool to set up proper context:
Use the init tool to set up Next.js DevTools context
This initializes the MCP context and ensures the AI assistant uses official Next.js documentation for all queries.
After initialization, try these prompts to explore runtime diagnostics:
Next Devtools, what errors are in my Next.js application?
Next Devtools, show me the structure of my routes
Next Devtools, what'
Tools (1)
initInitializes the MCP context and ensures the AI assistant uses official Next.js documentation.Configuration
{"mcpServers": {"next-devtools": {"command": "npx", "args": ["-y", "next-devtools-mcp@latest"]}}}