The Next.js DevTools MCP solves a specific problem: coding assistants can read your files, but they can’t see if your app is actually running or what errors you’re getting.

Next.js 16+ includes a built-in MCP endpoint at /_next/mcp. The next-devtools-mcp package discovers this endpoint and exposes live build errors, runtime errors, TypeScript type errors, application routes, page metadata, Server Action definitions, dev server logs, and project configuration.

Installation

Claude Code:

1
claude mcp add next-devtools npx next-devtools-mcp@latest

OpenAI Codex:

1
codex mcp add next-devtools -- npx next-devtools-mcp@latest

Google Gemini:

1
gemini mcp add next-devtools npx next-devtools-mcp@latest

Other editors (.mcp.json in project root):

1
{
2
  "mcpServers": {
3
    "next-devtools": {
4
      "command": "npx",
5
      "args": ["-y", "next-devtools-mcp@latest"]
6
    }
7
  }
8
}

Restart your dev server. The package auto-discovers the /_next/mcp endpoint.

Live Error Access

Before:

1
Error: Cannot read property 'map' of undefined
2
  at Page (app/posts/page.tsx:12)
3

4
# You copy/paste the error into Claude

After:

1
# Claude queries get_errors automatically and sees:
2
# - Full stack trace + error type
3
# - Your project structure (get_project_metadata)
4
# - The actual code in app/posts/page.tsx

Claude checks your project config, searches the docs, writes code, verifies no errors, tests it in the browser, and confirms it works.

The difference: Claude sees your running app instead of guessing from static files.

Available Tools

Next.js 16+ gets full support (errors, state, logs). Next.js 15 and below get partial support (upgrades, docs, browser testing).