next-devtools-mcp — Claude Code MCP server: what it does
Wires your coding agent into a running Next.js dev server so it reads real errors, routes and logs.
claude mcp add next-devtools-mcp -- npx -y next-devtools-mcpWhat next-devtools-mcp does
This is a thin connector, not a toolbox. It finds Next.js 16+ dev servers on your machine and proxies the built-in MCP endpoint at /_next/mcp, so the agent queries the app's actual state instead of guessing from source files.
Four tools ship with it. nextjs_index scans ports and returns every server it finds along with that server's runtime tools; nextjs_call invokes one of those tools on a given port. The other two are gateways: nextjs_docs points the agent at the docs bundled with your installed Next.js under node_modules/next/dist/docs/, and browser_eval tells it how to install and run the agent-browser CLI. Gateways hand off instructions — the agent does the work itself.
Node.js v20.19 or a newer LTS release is required, plus npm or pnpm. The runtime tools need a live Next.js 16+ dev server; without one there is nothing to discover. Upstream calls, response-body reads included, are cut off after 60 seconds, so this is not the path for long-running operations.
What it helps with
- check which build, runtime and type errors the app currently has
- list routes and page metadata from the live dev server
- locate the dev log file for browser console and server output
- resolve a Server Action ID back to its source file
- read docs that match the installed Next.js version
Example prompts for the agent
- What errors is my Next.js app throwing right now?
- List the routes the running dev server exposes
- Show me what landed in the dev server logs
How to install next-devtools-mcp
Platform CLI
claude mcp add next-devtools-mcp -- npx -y next-devtools-mcpPlatform CLI
codex mcp add next-devtools-mcp -- npx -y next-devtools-mcpConfig file
{
"mcpServers": {
"next-devtools-mcp": {
"command": "npx",
"args": [
"-y",
"next-devtools-mcp"
]
}
}
}Config file
{
"servers": {
"next-devtools-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"next-devtools-mcp"
]
}
}
}Platform CLI
gemini mcp add next-devtools-mcp npx -y next-devtools-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about next-devtools-mcp
How do I install next-devtools-mcp in Claude Code?
Run claude mcp add next-devtools-mcp -- npx -y next-devtools-mcp. The server then shows up among your client's MCP servers.
What does next-devtools-mcp do?
It links a coding agent to a running Next.js 16+ dev server through that server's /_next/mcp endpoint. The agent gets errors, routes and logs, plus pointers to version-matched docs and the agent-browser CLI.
What do I need before running next-devtools-mcp?
Node.js v20.19 or a newer LTS version, and npm or pnpm. The nextjs_index and nextjs_call tools only work while a Next.js 16+ dev server is up.
